This my hello world with material bottom in ReactNative

App.js

// libraries
import React from 'react'
import { View, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'

import Icon from 'react-native-vector-icons/FontAwesome5'

const Container = ({ children }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    {children}
  </View>
)
const Home = () => (
  <Container>
    <Text>Home Page</Text>
  </Container>
)
const Search = () => (
  <Container>
    <Text>Search Page</Text>
  </Container>
)
const YourLibrary = () => (
  <Container>
    <Text>YourLibrary Page</Text>
  </Container>
)

const { Navigator, Screen } = createMaterialBottomTabNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Navigator barStyle={{ backgroundColor: '#222' }}>
        <Screen
          name="Home"
          component={Home}
          options={{
            tabBarIcon: ({ color }) => (
              <Icon name="home" color={color} size={20} />
            )
          }}
        />
        <Screen
          name="Search"
          component={Search}
          options={{
            tabBarIcon: ({ color }) => (
              <Icon name="search" color={color} size={20} />
            )
          }}
        />
        <Screen
          name="YourLibrary"
          component={YourLibrary}
          options={{
            tabBarIcon: ({ color }) => (
              <Icon name="book" color={color} size={20} />
            )
          }}
        />
      </Navigator>
    </NavigationContainer>
  )
}