Expo with React-Navigation

Expo SDK
1

Hi there!
I’m pretty sure there are people who have decided to use react-navigation instead of the default navigation library. It is said that react-navigation will be the successor to the default hence I am trying to use it.

I’m trying to create a tab navigator with a drawer, but it doesn’t appear on my iOS simulator with Expo. Haven’t tried with Android. Literally only the main text in the example like “Open up main.js…” appears.

It would be useful too if there’s a reference to an open source Expo project with react-navigation! Something to the effects of “Android-like Nav Example” on Expo explore… help will be much appreciated :smiley:

import Expo from 'expo';
import React,  {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator, DrawerNavigator, TabNavigator} from 'react-navigation';

class App extends Component {
  static navigationOptions = {
    title: 'Home',
    tabBarLabel: 'Home'
  }

  render() {

    return (
      <View style={styles.container}>
        <Text>Open up main.js to start working on your app! YO</Text>
      </View>
    );
  }
}

class SecondScreen extends Component {
  static navigationOptions = {
    tabBarLabel: 'Other'
  }

  render() {
    return(
      <Text>
        Some text here!
      </Text>
    );
  }
}

const MainScreenNavigator = TabNavigator ({
  Home: {screen: App},
  All: {screen: SecondScreen}
}, {
  tabBarPosition: 'bottom'
});

const Drawer = DrawerNavigator ({
    Home: {screen: App},
    All: {screen: SecondScreen}
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Expo.registerRootComponent(App);
2

Take a look at this part of the docs: https://reactnavigation.org/docs/intro/nesting#Nesting-a-Navigator-in-a-screen

In essence, your root component should be one of the navigators (e.g. Drawer) - and within a navigator, one of the screens can actually be another navigator such as your MainScreenNavigator. Right now, you don’t see it because your registering the App component which has no knowledge of the navigators, but the navigators have knowledge of App.

I’ve used react-navigation & expo together and there’s nothing special for Expo to use the library, although react-navigation is still pretty new so I’ve looked at their github issues quite a bit (it’s a pretty active community on their github).

3

Hi Will !
I managed to solve it in the end.
Maybe my initial code was buggy in the first post, but i followed along a udemy tutorial and still had the same problem with this (apparently works for previous versions of expo)

import Expo from 'expo';
import React,  {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator, DrawerNavigator, TabNavigator} from 'react-navigation';

import AuthScreen from './screens/AuthScreen';
import WelcomeScreen from './screens/WelcomeScreen';

class App extends Component {

  render() {

    // Create our first Navigator
    const MainNavigator = TabNavigator({
      welcome: {screen: WelcomeScreen},
      auth: {screen: AuthScreen}
    });

    return (
      <View style={styles.container}>
        <MainNavigator />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Expo.registerRootComponent(App);

Turns out that the new version of expo 16.0.0 may actually break react-navigation.
If you guys can see this link here:
https://www.udemy.com/react-native-advanced/learn/v4/questions/2238196

So some of the solutions include downloading expo 15.0 instead, locking previous dependencies versions, reinstall the master version of react-navigation through github

The new version of expo which uses new react/react-native will for some reason break react-navigation. So you’ll need to uninstall it and then reinstall the master version from github:

npm install react-navigation@https://github.com/react-community/react-navigation.git --save
2 Likes
4

I’m using “react-navigation”: “^1.0.0-beta.11” and expo 17 and it’s working for me. Maybe try that?

I did use expo 15 and it worked and I never upgraded to expo 16 (got various errors - not sure if they were react-navigation related).

5

I am still having this issue with the latest version of expo. Please tell how to downgrade expo to 15.

6

still having lots of issues with expo 22.x & react-navigation, cant fix errors, had to bring my navigator to root instead of importing … this solved my initial issue but now redux is the issue … dont know what to do … cant go back to expo 15 its 22 now and 23 will be released soon.

7

Hi everyone! Comments here seem out of date, React Navigation works well with (and is in fact in a large part built by) Expo. Additionally, the behavior inside Expo is not likely to be any different than outside of Expo, so you’re probably best off posting issues to https://github.com/react-navigation/react-navigation/issues if you find a bug!