Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

Cleaner way to handle Navigation in Typescript in React Native

$
0
0

Anyone here who knows a cleaner way then ´{ navigation }:{navigation: NativeStackNavigationProp}` in Typescript in a React Native cli project? I already tried many different things from stackoverflow but they didn't work.

import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import {createNativeStackNavigator, NativeStackNavigationProp} from '@react-navigation/native-stack';import {Button, Text} from "react-native";const Stack = createNativeStackNavigator();export const App = () => {    return (<MyStack/>    );};const MyStack = () => {    return (<NavigationContainer><Stack.Navigator><Stack.Screen                    name="Home"                    component={HomeScreen}                    options={{ title: 'Welcome' }}                /><Stack.Screen name="Profile" component={ProfileScreen} /></Stack.Navigator></NavigationContainer>    );};const HomeScreen = ({ navigation }:{navigation: NativeStackNavigationProp<any>}) => {    return (<Button            title="Go to Jane's profile"            onPress={() =>                navigation.navigate('Profile', { name: 'Jane' })            }        />    );};const ProfileScreen = ({ navigation, route }:{navigation: NativeStackNavigationProp<any>, route: any}) => {    return <Text>This is {route.params.name}'s profile!</Text>;};

Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>