React-Native: Moving Between Screens

Syntax

React-Native provides a Navigation library that allows for moving between screens in an application. This library is typically used in combination with a StackNavigator component, which creates a stack of screens that can be navigated using common gestures such as swiping or tapping on a button.

import { createAppContainer, createStackNavigator } from 'react-navigation';

const StackNavigator = createStackNavigator({
  Screen1: {screen: Screen1},
  Screen2: {screen: Screen2},
});

Example

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

class Screen1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Screen 1</Text>
        <Button
          title="Go to Screen 2"
          onPress={() => this.props.navigation.navigate('Screen2')}
        />
      </View>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Screen 2</Text>
        <Button
          title="Go to Screen 1"
          onPress={() => this.props.navigation.navigate('Screen1')}
        />
      </View>
    );
  }
}

const StackNavigator = createStackNavigator({
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
});

const AppContainer = createAppContainer(StackNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Output

In the above example, tapping the "Go to Screen 2" button on Screen 1 will navigate to Screen 2. Tapping the "Go to Screen 1" button on Screen 2 will navigate back to Screen 1.

Explanation

The StackNavigator component creates a navigation stack, consisting of different screens in an application. Each screen is defined using a key-value pair that maps a screen name to a screen component. In the example above, the first screen is named Screen1 and is mapped to the Screen1 component.

The navigation prop is automatically passed down to the component as a prop and provides a navigate method, which allows for navigation to different screens. In the example above, pressing the "Go to Screen 2" button on Screen1 calls the navigate method to navigate to Screen2.

Use

The Navigation library is typically used in larger React-Native applications to allow for easy navigation between screens. The StackNavigator component is useful for building a stack of pages that can be navigated using common gestures or buttons.

Important Points

• The Navigation library is provided by React-Native and is not a separate package.
• The StackNavigator component can be customized with different options, such as setting a header title or hiding the header altogether.
• This example demonstrates navigation between screens on a button press, but navigation can also be triggered on other user events such as swiping or tapping on an image.

Summary

The Navigation library in React-Native allows for easy navigation between screens in a mobile application. By using a StackNavigator, users can navigate between screens in an intuitive way using common gestures or buttons.