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 ...

Get Hands-On Design Patterns with React Native now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.