Routing with React-Native

Question

I have a HomePage.js with only one button, Login Button, and when clicked I want to render LoginPage.js. I tried something like this but it's not working:

HomePage.js:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';

class HomePage extends Component{
  constructor () {
    super();
    this.state = {LoginPage:false};
  }

  showLogin = () => {
     this.setState({LoginPage:true});
  }

  render() {
    return(
      <View>
        <TouchableOpacity onPress={() => this.showLogin()}>
          <Text>LogIn</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

export default HomePage;

In React it's easily done with react-router but I don't know how to do it with React-Native.

EDIT 1 after including react-navigation I get the following error: Route 'navigationOptions' should declare a screen. Did I miss something?

App.js:

import React, {Component} from 'react';
import {StackNavigator} from 'react-navigation';
import HomePage from './HomePage';
import LoginPage from './LoginPage';


const App = StackNavigator({
  Home: {screen: HomePage},
  LoginPage: {screen: LoginPage},
  navigationOptions: {
    header: () => null,
  }
});

export default App;

HomePage.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';

class HomePage extends Component{
  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    const { navigate } = this.props.navigation;
    return(
      <View>
        <TouchableOpacity onPress={() => navigate('LoginPage'), { name: 'Login' }}>
          <Text>Login</Text>
        </TouchableOpacity>

        <Button
          onPress={() => navigate('LoginPage'), { name: 'Login' }}
          >Log In</Button>
      </View>
    )
  }
}


export default HomePage;

LoginPage.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class LoginPage extends Component {
    static navigationOptions = ({navigation}) => ({
        title: navigation.state.params.name,
    });
    render() {
        return (
      <View>
        <Text>This is login page</Text>
      </View>
        );
    }
}

export default LoginPage;

Answer 1

Use React Navigation. Its the best and simple solution right now for react native.

for adding the library use npm install --save react-navigation

You can define class for routing like below using a StackNavigator.

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

        const BasicApp = StackNavigator({
          Main: {screen: MainScreen},
          Profile: {screen: ProfileScreen},
      , {
headerMode: 'none',
}
    });

Then u can define classes like the one u mentioned in the question. eg:

class MainScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />
    );
  }
}

and second class

    class ProfileScreen extends React.Component {
      static navigationOptions = ({navigation}) => ({
        title: navigation.state.params.name,
      });
      render() {
        const { goBack } = this.props.navigation;
        return (
          <Button
            title="Go back"
            onPress={() => goBack()}
          />
        );
      }

}

The navigate function can be used for navigating to a class and goBack can be used for going back to a screen.

For hiding header u can use header mode or specify navigation options in each screen

For details please refer : https://reactnavigation.org/

Answer 2

If you're just looking for a plugin like react-router to use on React Native, you can use react-native-router-flux, available here: https://github.com/aksonov/react-native-router-flux.

Also, it's better if you just put a reference to the function in there instead of invoking it. Something like:

<TouchableOpacity onPress={this.showLogin}>...</TouchableOpacity>