【ReactNative開発】React Navigation 6でBottom TabからFull Screen Modalを開く

こんにちは。今週末もReact Nativeの開発を進めております。今日はReact Navigationをまた色々と触ったので、備忘としてこの記事をこ残しておこうと思います。

前提

• React Native
• Expo
• React Navigation v6.x

実現したいこと

画面下部のタブメニューからフルスクリーンのモーダルを開きたい。呼び出し先の画面でタブを表示させたくないのです。

現状は、タブからメニューを開くと、ボトムタブはそのままで画面が切り替わる状況です。

解決方法

このSOの記事がドンピシャでハマりました。タブを構成するStackの上位にRoot Stackなるものを作って、そこに遷移先の画面を含めます。

https://stackoverflow.com/questions/68900300/react-navigation-opening-a-modal-from-the-tab-bar

参考までにBeforeコード

#before
const Tab = createBottomTabNavigator();
const MainFlow = () => {

  return(
    <Tab.Navigator
      defaultScreenOptions={{headerShown:false, headerTransparent:true}}
      screenOptions={({ route }) => ({
        headerShown: false,
　　　　　　　　　　　　　　　　・・・
      })}
      >
　　　　　　　　　　　　・・・・
      ★このままPostBaseを呼び出すと、ボトムタブが残る
      <Tab.Screen name="Write" component={PostScreen}/> 
    </Tab.Navigator>
  )
}

Afterコード

#After
★追加
const PostBase = () => <View style={{ flex: 1 }} />

const Tab = createBottomTabNavigator();
const MainFlow = () => {

  return(
    <Tab.Navigator
      defaultScreenOptions={{headerShown:false, headerTransparent:true}}
      screenOptions={({ route }) => ({
        headerShown: false,
　　　　　　　　　　　　　　　　・・・
      })}
      >
　　　　　　　　　　　　・・・・
　　　　　　　　　　　　★空のPostBaseを指定 + listenerを追加
      <Tab.Screen name="Write" component={PostBase}
              listeners={({ navigation }) => ({
                tabPress: (e) => {
                  e.preventDefault()
                  navigation.navigate("Post")
                },
              })}
      />
    </Tab.Navigator>
  )
}

★新規追加。上位コンポーネントからは、上のMainFlowを呼ぶのではなく、このMainRootFlowを呼ぶように変更
const rootStack = createStackNavigator();
const MainRootFlow = () => {
  return (
    <rootStack.Navigator 
      initialRouteName="Main"
      screenOptions={{
        headerShown: false,
      }}
    >
      <rootStack.Screen name="Main" component={MainFlow} />
      <rootStack.Screen name="Post" component={PostStack} />
    </rootStack.Navigator>
  )
}

ふう・・・この記事にたどり着いて実装完了まで２時間くらいかかりました・・・同じことで悩まれている方の参考に少しでもなれば幸いです。（下のイイねボタンポチっていただけますと励みになります！）

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。