Multiple screens with React Navigation

It's time to add a Task screen to our StackNavigator. Use your newly learned syntax and create a placeholder screen for task details. The following is my implementation:

// src / Chapter 7 / Example 3 / src / screens / index.js// ...Task: {    screen: () => <View><Text>Under construction.</Text></View>,    path: 'project/task/:taskId',    navigationOptions: ({ navigation }) => ({        title: `Task ${navigation.state.params.taskId} details`    })},// ...

This time, I also pass navigationOptions, as I want to use the default navigator top bar with a specific title:

An example of how the new Task screen could look

To navigate ...

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.