Hands-On Design Patterns with React Native

Tab navigation

As we already have the bottom icon controls in place, it will be very straightforward to make them work. This is a classic example for tab navigation:

// src / Chapter 7 / Example 4 / src / screens / index.jsexport default createBottomTabNavigator(    {        Home: createStackNavigator({            TaskList: {                // ...            },            // ...        }, {            // ...        }),        Search: () => (            <View>                <Text>Search placeholder. Under construction.</Text>            </View>        ),        Notifications: () => (            <View>                <Text>Notifications placeholder. Under construction.</Text>            </View>        )    },    {        initialRouteName: 'Home',        initialRouteParams: {}    });

Please note the use of shorthand for creating screens. Instead of using an object, I pass the component directly:

By default, React Navigation will create a bottom ...