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

How to type Tab Navigator in react navigation 5 and TypeScript

$
0
0
import React from 'react';import { Text, TouchableOpacity, View } from 'react-native';import {  BottomTabNavigationProp,  createBottomTabNavigator,} from '@react-navigation/bottom-tabs';import { TabNavigationState } from '@react-navigation/native';export type RootParamList = {  Feed: undefined;  Search: undefined;};export enum Screens {  FEED = 'Feed',  SEARCH = 'Search',}const Tabs = createBottomTabNavigator<RootParamList>();export interface TabbarProps {  navigation: BottomTabNavigationProp<RootParamList, Screens>;  state: TabNavigationState<RootParamList>;}const TabBar = (props: TabbarProps) => {  const handleTabPress = ({    name,    isCurrentTab,  }: {    name: keyof RootParamList;    isCurrentTab: boolean;  }) => {    if (!isCurrentTab) {      props.navigation.navigate(name);    }  };  return (<View>      {props.state.routes.map((route, index) => {        const buttonText = route.name;        const isCurrentTab = props.state.index === index;        return (<TouchableOpacity            key={index}            onPress={() => handleTabPress({ name: route.name, isCurrentTab })}><Text>{buttonText}</Text></TouchableOpacity>        );      })}</View>  );};const Nav = () => (<Tabs.Navigator    tabBar={({ navigation, state }) => (<TabBar navigation={navigation} state={state} />    )}><Tabs.Screen name={Screens.FEED} component={View} /><Tabs.Screen name={Screens.SEARCH} component={View} /></Tabs.Navigator>);export default Nav;

There is an issue with <Tab.Navigator /> and the tabbar prop. I can't seem to type it correctly for my specific navigation and state props.

enter image description here


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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