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

Typescript: get `replace` from useNavigation() in react-navigation with react-native

$
0
0

This question resembles this how to use navigation.replace in TypeScript? which is for react-navigation 5.

I also read the docs https://reactnavigation.org/docs/typescript/#annotating-usenavigation

Tried a couple of different ways, but got more confused 🙃.

import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native'import { NativeStackScreenProps } from '@react-navigation/native-stack'import { AxiosError } from 'axios'declare global {  namespace ReactNavigation {    interface RootParamList extends RootStackParamList {}  }}export type RootStackParamList = {  SignIn: undefined  ResetPassword: { email?: string } | undefined  Root: NavigatorScreenParams<RootTabParamList> | undefined  Modal: undefined  Error: { error?: AxiosError | null } | undefined  DevToolsSignIn: undefined}export type RootTabParamList = {  Overview: undefined  Returns: undefined  Portfolio: undefined  More: undefined}export type RouteName = keyof RootStackParamList | keyof RootTabParamListexport const routeTypeGuard = (route: RouteName) => route as keyof RootStackParamListexport type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<  RootStackParamList,  Screen>export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<  BottomTabScreenProps<RootTabParamList, Screen>,  NativeStackScreenProps<RootStackParamList>>

then in a component I wish to tell typescript that I should be able to destruct replace from the useNavigation()

export default ({ route }: RootStackScreenProps<'ResetPassword'>) => {  const { replace } = useNavigation<?🙃?>()  const email = route.params?.email  if (!email) replace('Error')  return (<ScreenContainer><Text style={{ color: 'hotpink' }}>{email}</Text></ScreenContainer>  )}

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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