AuthStack.tsx

import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack";

export type AuthStackParamList = {
  Onboarding: undefined;
  Login: undefined;
  Register: undefined;
};

type OnboardingProps = NativeStackScreenProps<AuthStackParamList, "Onboarding">;

const OnboardingScreen: React.FC<OnboardingProps> = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title='Go to Register' onPress={() => props.navigation.push("Register")} />
      <Button title='Go to Login' onPress={() => props.navigation.push("Login")} />
    </View>
  );
};

type LoginScreenProps = NativeStackScreenProps<AuthStackParamList, "Login">;

const LoginScreen: React.FC<LoginScreenProps> = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Login Screen</Text>
      <Button title='Go to Register' onPress={() => props.navigation.push("Register")} />
    </View>
  );
};

type RegisterScreenProps = NativeStackScreenProps<AuthStackParamList, "Login">;

const RegisterScreen: React.FC<RegisterScreenProps> = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Register Screen</Text>
      <Button title='Go to Login' onPress={() => props.navigation.push("Login")} />
    </View>
  );
};

const AuthStack = createNativeStackNavigator<AuthStackParamList>();

function App() {
  return (
    <NavigationContainer>
      <AuthStack.Navigator>
        <AuthStack.Screen name='Onboarding' component={OnboardingScreen} />
        <AuthStack.Screen name='Register' component={RegisterScreen} />
        <AuthStack.Screen name='Login' component={LoginScreen} />
      </AuthStack.Navigator>
    </NavigationContainer>
  );
}

export default App;