O'Reilly logo

React and React Native - Second Edition by Adam Boduch

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

The navigation header

The navigation bars that you've created so far in this chapter have been sort of plain. That's because you haven't configured them to do anything, so react-navigation will just render a plain bar with a back button. Each screen component that you create can configure specific navigation header content.

Let's build on the previous example that used buttons to navigate to a details page. The App component stays the same, so let's take a look at the Home component first:

import React from 'react';import { View, Button } from 'react-native';import styles from './styles';const Home = ({ navigation }) => (  <View style={styles.container}>    <Button      title="First Item"      onPress={() =>        navigation.navigate('Details', { title: 'First ...

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