CODEWITHSUNDEEP
typescriptreact-nativereact-navigation
Gurkan T
Gurkan T

Reputation: 257

React Navigation Custom Tab Typescript Params

I am developing projects with Typescript language with React Native library. While creating a Custom Tab Bar, parameters include state, descriptors, and navigation. What should I specify as a type with this?

import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;
........

Upvotes: 2

Views: 3113

Answers (2)

Ahmed5G
Ahmed5G

Reputation: 385

interface TabBarProps {
  state: TabNavigationState<ParamListBase>;
  descriptors: BottomTabDescriptorMap;
  navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
}

const MyTabBar = ({ state, descriptors, navigation }: TabBarProps) => {
...

Upvotes: 2

mbuluttr
mbuluttr

Reputation: 41

  • Top Tab Navigator = "MaterialTopTabBarProps"
  • Bottom Tab Bar = "BottomTabBarProps"
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';  

import { MaterialTopTabBarProps } from '@react-navigation/material-top-tabs';

Upvotes: 4

Related Questions