Zenn
🔀

ReactNativeのNavigationをTypescriptとHooksで使う

2023/10/18に公開
React Native
TypeScript
#
navigation
tech

はじめに

react-nativeでは主にReactNavigationが使われます
https://reactnavigation.org/
普通にセットアップするとナビゲーションHookを使うときにroute名がわからないので、その都度調べる羽目になったりします
なのでTypescriptの型付きのHooksを使えるようにします

以下のように使います

import React from 'react';
import {useNav} from '@/hooks/useNav';
import {Button} from 'react-native';

export const StartButton = () => {
  const nav = useNav();
  return <Button onPress={() => nav.navigate('SignIn')} title="NEXT" />;
};

nav.navigate()の引数に型が使えますので、ルート名を確認する手間が省け、間違えにくくなります

インストール

yarn add @react-navigation/native

関連ライブラリのインストール

  • Expoの場合
Expoの場合
npx expo install react-native-screens react-native-safe-area-context

Stackナビゲーションのインストール

https://reactnavigation.org/docs/stack-navigator/

yarn add @react-navigation/stack
関連ライブラリのインストール
# expoの場合
npx expo install react-native-gesture-handler
# bareのReactNativeの場合
yarn add react-native-gesture-handler

一番上でimportする

src/App.tsx
import 'react-native-gesture-handler';

ナビゲーションのコード

ミソはRootStackParamListという型を作り、それを利用することです。
ジェネリクスなどで読み込んであげれば、型を補完してくれます。

src/App.tsx
import React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {TitlePage, SignInPage} from './features/auth';

export type RootStackParamList = {
  Title: undefined;
  SignIn: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>
        <Stack.Group>
          <Stack.Screen
            name="Title"
            component={TitlePage}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="SignIn"
            component={SignInPage}
            options={{headerTitle: 'ログイン・登録'}}
          />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

※SafeAreaProviderなどは省略
※SafeAreaViewでNavigationContainerをくくると表示されなかったりするので注意

Hooksのコード

useNavigationという便利なhooksが用意されていますが、そのままだと型が効かないので、新しく型つきのHookを定義します

src/hooks/useNav.ts
import {NavigationProp, useNavigation} from '@react-navigation/native';
import type {RootStackParamList} from '../App';

export const useNav = useNavigation<NavigationProp<RootStackParamList>>;

以上です

Discussion