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: