Introducing createStackNavigator and createAppContainer from React Navigation

If you are building a mobile app using React Native, React Navigation is a popular library for managing navigation between different screens. One key component in React Navigation is a StackNavigator, which allows you to easily navigate between screens using stack-like structure.

To get started with StackNavigator, you first need to import it along with createAppContainer from React Navigation:

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

Once you have imported these components, you can begin defining your app's navigation structure using createStackNavigator. This function takes an object that defines your app's screens, their names, and any configuration options. For example, the following code defines a simple StackNavigator with two screens:

const MainNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      header: null,
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerTitle: 'Details',
    },
  },
});

In this code, HomeScreen and DetailsScreen are the two screens defined in the StackNavigator. They are given the names "Home" and "Details" respectively. The navigationOptions object is used to configure the header that appears at the top of the screen.

Finally, you need to wrap your StackNavigator in a createAppContainer component:

const AppContainer = createAppContainer(MainNavigator);

With this code, you can render your app by simply rendering the AppContainer component:

ReactDOM.render(<AppContainer />, document.getElementById('root'));

And that's it! With createStackNavigator and createAppContainer from React Navigation, you can quickly and easily build a navigation structure for your React Native app.