TIL: RN | React Navigation - navigate

React Navigation 사용 시
Stack Navigation 의 Screen 에서 navigation 을 props 로 받아오는 경우
RootStack 내부에 sign in 페이지가 있다면 아래와 같이
type 설정

import { NativeStackScreenProps } from '@react-navigation/native-stack';
import React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';

type PropsType = NativeStackScreenProps<RootStackParamsType, 'SignIn'>;

const SignIn: React.FC<PropsType> = ({ navigation }) => {
  const onPressBack = () => {
    navigation.goBack();
  };
  return (
    <View>
      <View
        style={{
          height: 30,
          paddingHorizontal: 10,
        }}
      >
        <Pressable onPress={onPressBack}>
          <Text style={{ color: 'blue', fontSize: 24 }}>{'<'}</Text>
        </Pressable>
      </View>
      <Text>SignIn</Text>
    </View>
  );
};


export default SignIn;

다른 페이지로 이동하려면 CompositeScreenProps 를 사용한다
root 하위에 homeStack/home 과 sigin 이 있는 경우

import { CompositeScreenProps } from '@react-navigation/native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

type PropsType = CompositeScreenProps<
  NativeStackScreenProps<HomeStackParamsType, 'Home'>,
  NativeStackScreenProps<RootStackParamsType>
>;

const Home: React.FC<PropsType> = ({ navigation }) => {

  const onPressSignIn = () => {
    navigation.navigate('SignIn');
  };
  return (
    <SafeAreaView edges={['bottom']}>
      <View
        style={{
          height: 30,
        }}
      >
        <Pressable onPress={onPressSignIn}>
          <Text style={{ color: 'blue' }}>click me (sign-in page)</Text>
        </Pressable>
      </View>
      <Text>Main hi</Text>
    </SafeAreaView>
  );
};


export default Home;

useNaviagtion hook 을 사용하는 경우

type AuthNavigationType =
  NativeStackScreenProps<RootStackParamListType>['navigation'];

const navigation = useNavigation<AuthNavigationType>();
const handleLoginPress = () => {
    navigation.navigate('signIn');
  };