I started to work with React Native with the help of Stephen Grider’s Udemy Course The Complete React Native and Redux Course. I think it’s the best tutorial to start with, if you already gained some experiences in the React World.

As part of these learning I developed an app with React-Native-Router-Flux.

Later I wanted to add more feature and therefore, I took Stephen Grider’s 2. React Native Course React Native: Advanced Concepts.

Here Stephen starts to use Expo. Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript.

You can install Expo in you shell with

npm install exp --global

It is possible to convert React Native projects in Expo projects with

exp convert

This didn’t work with my project.

With the help of Charlie Cheever, I found out, that React-Native-Router-Flux does not work with Expo.

Because of the much more possibilities of React Navigation, It took me quite a long time to figure out, how to map the RNRF- to React Navigation syntax.

If you want to switch as fast as possible from React-Native-Router-Flux, without diving too deep in React Navigation, here is a guide:

It only focuses on the steps, Stephen uses in his 1. tutorial. Later I will add some more features.

1. Deinstall React Native-Router-Flux

npm uninstall --save react-native-router-flux

2. Install React Navigation

npm i react-navigation --save

3. Declaration of the Screens

const RouterComponent = () => {

return (

<Router>

<Scene key="login" component={LoginForm} title="Login" initial />

<Scene key="signup" component={SignUpForm} title="Sign up" />

</Router>

);

}

to

const Router = StackNavigator({

login: { screen: LoginForm },

signup: { screen: SignUpForm },

},

{

initialRouteName: login,

});

4. Switching Screens

Change

onPress={() => Actions.login()}

to

onPress={() => this.props.navigation.navigate('login')}

5. Convert RN project to Expo Project

delete node_modules, ios-, android folder and clean npm cache:

rm -rf node_modules

rm -rf ios

rm -rf android npm cache clean

2.

exp conv

3. Create main.js:

import expo from 'expo';

export default require('./index');

4. Find AppRegistry.registerComponent(‘App’, () => App) and replace it with Expo.registerRootComponent(App);

Now open the project with Expo XDE.

BAM!