React-native-router-flux: router-flux-blank-screen showing where initial screen should be

Created on 28 Feb 2018 · 11Comments · Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

react-native-router-flux v4.?.? (v3 is not supported)
react-native v0.54RC

Expected behaviour

Want to display initial screen defined in Routes.js

Actual behaviour

Showing only blank screen with container style inside and top bar colored to green.
Routes.js
```

import React, {Component} from 'react';

import {Router, Stack, Scene} from 'react-native-router-flux';

import Login from './pages/Login';
import SignUp from './pages/SignUp';

export default class Routes extends Component<{}> {
render() {
return (

)
}
}

App.js
`/**

Sample React Native App
https://github.com/facebook/react-native
@flow
*/

import React, { Component } from 'react';
import {
StatusBar,
StyleSheet,
Text,
View
} from 'react-native';

import Routes from './src/Routes';

export default class App extends Component<{}> {
render() {
return (
backgroundColor="#6b9b37"
barStyle="light-content"
/>

);
}
}

const styles = StyleSheet.create({
container : {
backgroundColor:'#9ccc65',
flex:1,
alignItems:'center',
alignContent: 'center',
}
});
`

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.
1.
2.
3.

Source

prchy

Most helpful comment

Or you can do one thing
just remove alignItems:'center', from style it will fix your problems.

chiragsheta on 1 Mar 2018

👍14 ❤7

All 11 comments

This is not working inside View
use
return <Routes />
insted of

return (
      <View style={styles.container}>
          <StatusBar
              backgroundColor="#6b9b37"
              barStyle="light-content"
          />
          <View style={{ flex:1 }}>
              <Routes />
          </View>
      </View>
    );

chiragsheta on 1 Mar 2018

❤2

Or you can do one thing
just remove alignItems:'center', from style it will fix your problems.

chiragsheta on 1 Mar 2018

👍14 ❤7

Thank you so much

Dne 1. 3. 2018 6:49 dop. napsal uživatel "chiragsheta" <
[email protected]>:

Or you can do one thing
just remove alignItems:'center', from style it will fix your problems.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/2909#issuecomment-369481361,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZ36nRxXb-1-3MEAfSFb59EZL-A4EB6oks5tZ4v-gaJpZM4SWhKJ
.

prchy on 1 Mar 2018

@chiragsheta

Could you explain why removing alignItems:'center' fix the problem?
I was stuck with my code.. Did that and it's working now!

Thanks

tadeuaugusto on 24 Jun 2018

👍1

After that background color is not showing

Pallavgarg on 1 Aug 2018

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists

aksonov on 8 Aug 2018

👍1

I see. It is almost impossible to support such project alone, during only free time

aksonov on 8 Aug 2018

Error i get when using RNRF

package.json

{
"name": "ABC",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"axios": "^0.18.0",
"eslint": "^5.2.0",
"native-base": "2.6.1",
"react": "16.3.1",
"react-native": "0.54.0",
"react-native-router-flux": "^4.0.1",
"react-native-timeline-listview": "^0.2.3",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"rnpm": {
"assets": [
"app/resources/fonts",
"app/resources/img"
]
}
}

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
// Root for enabling Toast
import { Root } from "native-base";
import { Router, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux';
import store from './app/store/store';

import PostAd from './app/components/PostAd';
import SignUp from './app/components/SignUp';

const App = () => (

);

AppRegistry.registerComponent('ABC', () => App);

log:

08-13 13:17:09.919 23416 23416 D ReactNative: 08-13 13:17:09.919 23416 23416 D ReactNative: 08-13 13:17:09.919 23416 23416 D ReactNative: 08-13 13:17:09.919 23416 23416 D ReactNative: 08-13 13:17:09.919 23416 23416 D ReactNative: 08-13 13:17:09.924 23416 23531 D ReactNative: 08-13 13:17:10.054 23416 23531 D ReactNative: 08-13 13:17:10.064 23416 23531 D ReactNative: 08-13 13:17:10.109 23416 23534 D ReactNative: 08-13 13:17:10.114 23416 23531 D ReactNative: 08-13 13:17:10.114 23416 23531 D ReactNative: 08-13 13:17:10.114 23416 23536 D ReactNative: 08-13 13:17:10.114 23416 23536 D ReactNative: 08-13 13:17:10.114 23416 23536 D ReactNative: 08-13 13:17:11.729 23416 23535 I ReactNativeJS: 08-13 13:17:11.909 23416 23535 E ReactNativeJS: 08-13 13:17:11.909 23416 23535 E ReactNativeJS:
ReactInstanceManager.recreateReactContextInBackground()
ReactInstanceManager.runCreateReactContextOnNewThread()
ReactInstanceManager.tearDownReactContext()
CatalystInstanceImpl.destroy() start
ReactInstanceManager.createReactContext()
Initializing React Xplat Bridge.
Initializing React Xplat Bridge before initializeBridge
CatalystInstanceImpl.destroy() end
Initializing React Xplat Bridge after initializeBridge
CatalystInstanceImpl.runJSBundle()
ReactInstanceManager.setupReactContext()
CatalystInstanceImpl.initialize()
ReactInstanceManager.attachRootViewToInstance()
Running application "PINTP2P" with appParams: {"rootTag":11}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
TypeError: undefined is not an object (evaluating 'context.changedBits')
/> This error is located at:
in SceneView (at StackViewLayout.js:563)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:562)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:561)
in RCTView (at View.js:78)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:612)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:470)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:469)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:63)
in RCTView (at View.js:78)
in View (at Transitioner.js:169)
in Transitioner (at StackView.js:21)
in StackView (at createNavigator.js:59)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:376)
in NavigationContainer (at Router.js:97)
in App (at Router.js:122)
in Router (at index.js:16)
in Provider (at index.js:15)
in App (at renderApplication.js:35)
in RCTView (at View.js:78)
in View (at AppContainer.js:102)
in RCTView (at View.js:78)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
Warning: Unexpected pop.
TypeError: Attempted to assign to readonly property.
/> This error is located at:
in SceneView (at StackViewLayout.js:563)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:562)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:561)
in RCTView (at View.js:78)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:612)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:470)
in RCTView (at View.js:78)
in View (at StackViewLayout.js:469)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:63)
in RCTView (at View.js:78)
in View (at Transitioner.js:169)
in Transitioner (at StackView.js:21)
in StackView (at createNavigator.js:59)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:376)
in NavigationContainer (at Router.js:97)
in App (at Router.js:122)
in Router (at index.js:16)
in Provider (at index.js:15)
in App (at renderApplication.js:35)
in RCTView (at View.js:78)
in View (at AppContainer.js:102)
in RCTView (at View.js:78)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
Warning: Unexpected pop.
Should have found an error boundary. This error is likely caused by a bug in React. Please file an issue.

abhishekgargx on 13 Aug 2018

@chiragsheta way works

edoantonioco on 21 Aug 2018

Thank you so much Dne 1. 3. 2018 6:49 dop. napsal uživatel "chiragsheta" < [email protected]>:
…
Or you can do one thing just remove alignItems:'center', from style it will fix your problems. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2909 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AZ36nRxXb-1-3MEAfSFb59EZL-A4EB6oks5tZ4v-gaJpZM4SWhKJ .

This thread literally saved my life! Huge thanks!