React Native Router Flux not Showing Screen - react-native

Question

I've a view which I'm trying to load via the react-native-router-flux module.
However, it is not showing the screen on emulator. However, I can see my Components in the react-dev tools.
I don't see any error but an Empty screen on Android Emulator. Details follow:
Test.js :
import React from 'react';
import { Text, View } from 'react-native';
const Test = () => {
return (
<View style={{margin: 128}}>
<Text>This is PageTwo!</Text>
</View>
);
};
export default Test;
My Router: Router.js
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LoginForm from './components/LoginForm';
import Test from './components/Test';
class RouterComponent extends Component {
render() {
return (
<Router>
<Scene key="root" >
<Scene key="pageOne" component={Test} title="PageOne" initial={true} />
<Scene key="pageTwo" component={LoginForm} title="PageOne" initial={false} />
</Scene>
</Router>
);
}
}
export default RouterComponent;
My App Loader:
import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import RouterComponent from './Router';
import LoginForm from './components/LoginForm';
class App extends Component {
componentWillMount() {
// Initialize Firebase
}
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<View>
<RouterComponent />
</View>
</Provider>
);
}
}
export default App;
Android Emulator Screen:
React dev tools:
Package.json:
Please help.

Answer 1

I don't think is the stateless component's issue, I added a flexbox styling to the <View> component that wraps around the <RouterComponent> and it works on my Android emulator, simply removing the <View> wrapper around the <RouterComponent> would also work:
class App extends Component {
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<View style={{ flex: 1 }}>
<RouterComponent />
</View>
</Provider>
);
}
}

Answer 2

Many time in app.js we used
container: {
backgroundColor: '#455e64',
flex : 1,
alignItems: 'center',
justifyContent: 'center',
}
alignItems: 'center',
so we can get the same error
we need to just remove alignItems:'center', from style it will fix your problems.
container: {
backgroundColor: '#455e64',
flex : 1,
justifyContent: 'center',
}

Answer 3

This is insane. Spent 2 hours debugging. Figured out that component should not be stateless, you have to define it as a class that extends Component.
So in your Test.js instead of:
import React from 'react';
import { Text, View } from 'react-native';
const Test = () => {
return (
<View style={{margin: 128}}>
<Text>This is PageTwo!</Text>
</View>
);
};
export default Test;
just do:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Test extends Component {
render() {
return (
<View style={{margin: 128}}>
<Text>This is PageTwo!</Text>
</View>
);
}
};
export default Test;

Answer 4

Just added a flexbox styling to the View for wrap component RouterComponent. And the idea is work also in my Android emulator.
Or you can remove component View like :
class App extends Component {
componentWillMount() {
// Initialize Firebase
}
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<RouterComponent />
</Provider>
);
}
}
I hope the idea can helping you.