How to use react-navigation with create-react-native-app (CRNA) for Android build

Question

I have started experimenting with react-native and in particular with the latest approach with create-react-native-app script. Everything seems to be working flawlessly out of the box but when I am trying to use react-navigation for navigation of my app, it works only for iOS, for Android fails to render anything without errors. The following snack is an example of how to use it and it demonstrates the problem if you switch OS on the bottom.

score 1 · Answer 1 · answered Apr 03 '17 at 16:39

Already answered this elsewhere but for the benefit of StackOverflow

If you're getting a blank screen on android and you haven't specifically defined a width for any type of React Navigation element try setting the width.

Here's an updated snack that should display on Android: https://snack.expo.io/BJZ_aoOol

For a context free example, style is applied within the TabNavigator's TabNavigatorConfig, see the React Navigation Docs for more info

const MainScreenNavigator = TabNavigator({
  First: { screen: FirstScreen },
  Second: { screen: SecondScreen },
},{
  tabBarOptions: {
    style: {
      width: 300,
    },
  },
});

You could also set this width based on a per-device basis using:

let screenWidth = Dimensions.get("window").width;

How would you go on about setting the `width` dynamically? Using this approach, the navigation does not extend when you turn the phone horizontally (assuming the app startet when the phone was hold vertically). It stays the same size... — four-eyes, Aug 01 '17 at 06:54

score 0 · Answer 2 · answered Jul 17 '17 at 07:50

I am looking for something like this too. In your code I think you have to change TabNavigator to StackNavigator. Then I agree with Peter Evans the screen not shown in android because actually it works but we have to define the Dimension to the width of the screen (on android).

My solution: on line 64 just add: <MainScreenNavigator style={{width: Dimensions.get("window").width}} />

Now I continuing my experiment to use redux.

score 0 · Answer 3 · edited Jul 25 '17 at 21:11

I just try the following and it works for myself:

import React from "react";
import { View, StyleSheet } from "react-native";
import { StackNavigator } from "react-navigation";
import Expo from "expo";

import Home from "./Home";
import About from "./About";

const routes = {
  Home: {
    name: "Home",
    screen: Home
  },
  About: {
    name: "About",
    screen: About
  }
};

const MainApp = StackNavigator(routes);

export default class Navigation extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MainApp />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
});

Don not forget to add snippet like below in your Component file.

 static navigationOptions = {
        title: 'About',
    };

How to use react-navigation with create-react-native-app (CRNA) for Android build

3 Answers3