Headers and footers

To implement navigation in our app, we can use the react-navigation package that we learned about in Chapter 18, Navigating between Screens. But, in this example, we will implement the layout of tab navigation without navigation features.

Here's what our App component looks like:

import React from "react";
import { Text } from "native-base";
import Container from "./Container";
export default function App() {
  return (
    <Container title="Home">
      <Text>Home content goes here...</Text>
    </Container>
  );
}

We're passing to the Container component the title that allows us to update the Header title. Let's take a look at the updated Container component:

<NativeBaseProvider theme={theme}>
  <StatusBar bg="#3700B3" barStyle="light-content"...