How to route to a new page on button click in React Native

In this React Native source code example, the source code below illustrate how to route to a new page on button click in React Native.

You can copy and adopt this source code example to your React Native project without reinventing the wheel.

import React, {Component} from 'react';
import {Text, View,TouchableOpacity} from 'react-native';
import { createStackNavigator,createAppContainer } from 'react-navigation' /*react-navigation mut have been installed*/

class HomeScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home screen</Text>
        <Text
          style={{padding:20,backgroundColor:'#9dcf40',marginBottom:20}}
          onPress={()=>this.props.navigation.navigate('Screen1')}
          >
          Screen1
        </Text>
        <Text
          style={{padding:20,backgroundColor:'#5598c8'}}
          onPress={()=>this.props.navigation.navigate('Screen2')}
          >
          Screen2
        </Text>
      </View>
    );
  }
}

class Screen1 extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'#c8e98b' }}>
        <Text style={{fontSize:25}}>Screen1</Text>
      </View>
    );
  }
}

class Screen2 extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'#87b3d2' }}>
        <Text style={{fontSize:25}}>Screen2</Text>
      </View>
    );
  }
}
export default class App extends Component {
    render(){
      return(
        <YourAppContainer />);
    }
  }

  const OurNavigator = createStackNavigator({
    HomeScreen: { screen: HomeScreen },
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
    });
const YourAppContainer = createAppContainer(OurNavigator);/*We need this to Wrap our new Navigator*/

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment