O'Reilly logo

Hands-On Design Patterns with React Native by Mateusz Grzesiukiewicz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required