react native-tutorial

React Native Moving Between Screens

Rarely do mobile apps consist of just one screen. A navigator is often responsible for controlling how several screens are presented and switched between.

The different navigational elements that React Native offers are covered in this article. React Navigation should be used if you are just starting started with navigation. With the ability to display popular stack navigation and tabbed navigation patterns on both iOS and Android, React Navigation offers a simple to use navigation solution.

If you’re exclusively targeting iOS, you might also want to take a look at NavigatorIOS, which offers a wrapper around the native UINavigationController class to provide a native appearance and feel with little configuration. However, Android will not support this component.

The following library offers native navigation on both platforms if you’d like to achieve a native look and feel on both iOS and Android or you’re integrating React Native into an app that already manages navigation natively: react-native-navigation.

Navigate to the new screen

Navigation from one screen to another screen is performed in different ways:

<Button  
          title="Go to URL"  
          onPress={() => this.props.navigation.navigate('url')}  
        />  

Add a Button component in ‘HomeScreen’ and perform an onPress{} action which calls the this.props.navigation.navigate(‘Profile’) function. Clicking the Button component moves screen to ‘ProfileScreen’ layout.

App.js

import React from 'react';  
import { View, Text, Button } from 'react-native';  
import { createStackNavigator, createAppContainer } from 'react-navigation';  
  
class HomeScreen extends React.Component {  
    render() {  
        return (  
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>  
                <Text>Home Screen</Text>  
                <Button  
                    title="Go to Profile"  
                    onPress={() => this.props.navigation.navigate('Profile')}  
                />  
            </View>  
        );  
    }  
}  
class ProfileScreen extends React.Component {  
    render() {  
        return (  
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>  
                <Text>Profile Screen</Text>  
            </View>  
    );  
    }  
}  
  
const AppNavigator = createStackNavigator(  
    {  
        Home: HomeScreen,  
        Profile: ProfileScreen  
    },  
    {  
        initialRouteName: "Home"  
    }  
);  
  
const AppContainer = createAppContainer(AppNavigator);  
export default class App extends React.Component {  
    render() {  
        return <AppContainer />;  
    }  
}  

Output:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *