Misleading typings of TabBarProps

[LoserAntbear]

Current behavior

Provided Props typings are marked as required next methods:

getLabelText: (scene: Scene<T>) => string | undefined;
getAccessible: (scene: Scene<T>) => boolean | undefined;
getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
getTestID: (scene: Scene<T>) => string | undefined;
renderIndicator: (props: IndicatorProps<T>) => React.ReactNode;

But all of the are also stated in defaultProps definition:

 static defaultProps: {
        getLabelText: ({ route }: Scene<Route>) => string | undefined;
        getAccessible: ({ route }: Scene<Route>) => boolean;
        getAccessibilityLabel: ({ route }: Scene<Route>) => string | undefined;
        getTestID: ({ route }: Scene<Route>) => string | undefined;
        renderIndicator: (props: IndicatorProps<Route>) => JSX.Element;
};

Which means, that all these methods must be marked as optional since their implementations exist.

Current definitions hinder code users from Properly typing custom TabBar components based on original package definitions.

Expected behavior

Next Props typings are marked as optional:

getLabelText?: (scene: Scene<T>) => string | undefined;
getAccessible?: (scene: Scene<T>) => boolean | undefined;
getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
getTestID?: (scene: Scene<T>) => string | undefined;
renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;

Reproduction

https://snack.expo.dev/Nw9j0ErEY

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.9
react-native	0.66.4
expo	not using expo
node	14.17.3
npm or yarn	1.22.10

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.66.4, latest: 0.67.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[esoh]

Also was a bit confused by this at first too.

react-native: 0.67.3, react-native-tab-view: 3.1.1. Not using expo.

<TabView renderTabBar={props => <TabBar {...props} />} />
...

function TabBar(props: TabBarProps<Route>) {
  ...
}

gave me:

Type '{ layout: Layout; position: AnimatedInterpolation; jumpTo: (key: string) => void; navigationState: NavigationState<Route>; }' is missing the following properties from type '{ navigationState: NavigationState<Route>; scrollEnabled?: boolean | undefined; bounces?: boolean | undefined; activeColor?: string | undefined; inactiveColor?: string | undefined; ... 18 more ...; style?: StyleProp<...>; }': getLabelText, getAccessible, getAccessibilityLabel, getTestID, renderIndicator

Current using:

type MyTabBarProps = Omit<
  TabBarProps<Route>,
  | 'getLabelText'
  | 'getAccessible'
  | 'getAccessibilityLabel'
  | 'getTestID'
  | 'renderIndicator'
>;

for my custom tab bar instead.

[okwasniewski]

Hey, for now you should use React.ComponentProps<typeof TabBar> as this library is class based. Later on I will work on a rewrite to functional components. So this will be fixed and will be able to use TabBarProps one.

[okwasniewski]

@LoserAntbear FYI pull request for functional components is up it also fixes the types #1392