createBottomTabNavigatorでボトムタブを追加

yarn add @react-navigation/bottom-tabs react-native-vector-icons

// 近いところに似たファイルがありますがこの./android/app/build.gradle を弄ります。
// 使いたいアイコン郡のttfを追記。ttfって書き忘れてハマった。
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialCommunityIcons.ttf', 'MaterialIcons.ttf', 'EvilIcons.ttf', 'FontAwesome.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

ボトムタブの実装は最近ブログにアップしてた近くで済ますアプリに追加していくつもりで、ただ画面1枚だけだとちょっとさみしいので急ピッチで作業時間1時間ほどかけて2枚のアプリを追加しました。
追加したアプリはコードが汚すぎるのでアップはできませんが（笑）主題はタブやしいいかな。
使い方は公式サイトにも書いてあるとおりコンポーネントをTab.Navigatorで挟めばOK。ReactNavigation仲間？のStack.Navigatorとも同じ感じで使えますがPropsとかは違うので注意が必要。あとどうもバージョン5から使い勝手ちょっと変わってるみたいやけど大丈夫です。

だいぶ前にアップしてたReact Nativeのアプリでも過去のバージョンの同じライブラリを使ってたみたいやけど、もうまったく覚えてはいなくて確かに記述も違うからなかなか気づかなかったです。

const Tab = createBottomTabNavigator();

const BottomTab = () => (
  <Tab.Navigator
    tabBarOptions={{
      activeTintColor: "black",
      inactiveTintColor: "gray",
      activeBackgroundColor: "darkseagreen",
    }}>
    <Tab.Screen
      name="ちかすま"
      component={Navi}
      options={{
        tabBarIcon: () => <Icon name="rice" size={32} color="black" />,
      }}
    />
    <Tab.Screen
      name="お天気"
      component={Weather}
      options={{
        tabBarIcon: () => <Icon name="weather-sunny" size={32} color="black" />,
      }}
    />
    <Tab.Screen
      name="好き本"
      component={Book}
      options={{
        tabBarIcon: () => <Icon name="book" size={32} color="black" />,
      }}
    />
  </Tab.Navigator>
);

export default BottomTab;

こんなふうにコンポネントを挟んでいきます。一番上のちかすまというのは、前回あたりのブログに書いた「近くで済ますアプリ」の略で、これはStack Naviを使ってますがとくに問題ないです。
Propsがおかしなことにならなければ反対の利用方法でも大丈夫じゃないかと。
初期設計が大事なんだな。

残りの下の2個が、さっき言ってた1時間くらいでバーっと作ったもので、「お天気」はこれまただいぶ昔に作ったアプリをグワーッとReactHooks用に書き直したもので、「好き本」はGoogleBooksで書籍の情報が取れるAPI（があるのを調べた）を使ったものです。

で、このコンポーネントをapp.jsなんかに突っ込むと出来上がりです。

import BottomTabs from "./components/BottomTab";

export default function App() {
  return (
    <NavigationContainer>
      <BottomTabs />
    </NavigationContainer>
  );
}

作成途中で撮ったので2枚しかないですが、こんな感じになります。