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

How to combine tab and stack navigation props in reactnavigation typescript react native

$
0
0

I am trying to combine two navigation props But I am not sure how to do this. Earlier when I used to define only one route I used to do something like this.

    export type MatrimonyStackRoutes = {      Matrimony: undefined;      GroomDetail: undefined;    };    export type MatrimonyStackNavigationProps<      T extends keyof MatrimonyStackRoutes> = {      navigation: StackNavigationProp<MatrimonyStackRoutes, T>;      route: RouteProp<MatrimonyStackRoutes, T>;    };<Stack.Navigator><Stack.Screen name="Matrimony" component={MatrimonyTab} /><Stack.Screen name="GroomDetail" component={GroomDetail} /></Stack.Navigator>

And Inside component I used to declare like this

const Groom = ({ navigation }: MatrimonyStackNavigationProps<"Matrimony">) => {  return (    //////////  );};

This works fine But Now I am in need to combine two routes stack and bottomTab props show that I can use in my component in similar way.I am not sure how to do that any help would be great.

Here Is my Complete Code of both Tab And stack navigation when it is not combined

    export type MatrimonyTabRoutes = {      Groom: undefined;      Bride: undefined;      Vendors: undefined;    };    export type MatrimonyStackRoutes = {      Matrimony: undefined;      GroomDetail: undefined;    };    export type MatrimonyStackNavigationProps<      T extends keyof MatrimonyStackRoutes> = {      navigation: StackNavigationProp<MatrimonyStackRoutes, T>;      route: RouteProp<MatrimonyStackRoutes, T>;    };    export type MatrimonyTabNavigationProps<T extends keyof MatrimonyTabRoutes> = {      navigation: BottomTabNavigationProp<MatrimonyTabRoutes, T>;      route: RouteProp<MatrimonyTabRoutes, T>;    };const MatrimonyTab = ({}) => {  const theme = useTheme();  return (<Tab.Navigator      tabBarOptions={{        activeTintColor: theme.colors.primaryText,        inactiveTintColor: theme.colors.grey,        indicatorStyle: {          backgroundColor: theme.colors.mainIconColor,        },      }}><Tab.Screen name="Groom" component={Groom} /><Tab.Screen name="Bride" component={Bride} /><Tab.Screen name="Vendors" component={Vendors} /></Tab.Navigator>  );};const MatrimonyStack = () => {  return (<Stack.Navigator><Stack.Screen name="Matrimony" component={MatrimonyTab} /><Stack.Screen name="GroomDetail" component={GroomDetail} /></Stack.Navigator>  );};

Viewing all articles
Browse latest Browse all 6214

Trending Articles



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