React Native Router Flux not Showing Screen

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.

Defrayal

Same here. Trying to study source code... – Antalya

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>
    );
  }
}

Sparky

thank you :) . Can you please elaborate as to why View caused the issue ? I find it a bit strange. I thought View was a like a container to hold Components. :( – Defrayal

Man... I can't say how much I'm thankful. I spent about 7 hours trying to figure it out what was wrong with my code – Kinsey

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',
  }

Postmistress

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;

Antalya

The view tag in the App was the culprit. – Defrayal

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.

Clairvoyant