CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
adi.neag
adi.neag

Reputation: 643

React navigator blank screen

I'm trying to use react navigator with react native but I get only a blank screen, no errors. What is wrong here ?

import React, { Component } from 'react';
import { Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class MainScreen extends Component {
  render() {
    return (
      <Button
        title="Success"
      />
    );
  }
}

const AppNavigator = StackNavigator(
  {
    Index: {
      screen: MainScreen
    }
  },
  {
    initialRouteName: 'Index',
    headerMode: 'none'
  }
);

export default AppNavigator;

Upvotes: 1

Views: 1729

Answers (3)

Ganang Wahyu W
Ganang Wahyu W

Reputation: 59

Using

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';

class MainScreen extends Component {
  render() {
    return (
      <AppNavigator/> //this is for starting routing
    );
  }
}

const AppNavigator = StackNavigator(
  {
    Index: {
      screen: MainScreen
    }
  },
  {
    initialRouteName: 'Index',
    headerMode: 'none'
  }
);

export default MainScreen;

U can use this for destination Documentation 

 static navigationOptions = {
    title: 'Home',
  }

Upvotes: 0

adi.neag
adi.neag

Reputation: 643

Seems like I forgot to register the main app component. I added AppRegistry.registerComponent('MyApp', () => AppNavigator); and it worked.

Upvotes: 0

Antoine Grandchamp
Antoine Grandchamp

Reputation: 7471

Try adding a height to your MainScreen.

Do something like : 

return (
  <View style={{ flex: 1 }}>
    <Button
      title="Success"
    />
  </View>
);

Upvotes: 1

Related Questions