-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
OnyxTabNavigator.tsx
73 lines (63 loc) · 2.96 KB
/
OnyxTabNavigator.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import type {MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import type {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native';
import React from 'react';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import type {TabSelectorProps} from '@components/TabSelector/TabSelector';
import type {IOURequestType} from '@libs/actions/IOU';
import Tab from '@userActions/Tab';
import ONYXKEYS from '@src/ONYXKEYS';
import type {SelectedTabRequest} from '@src/types/onyx';
import type ChildrenProps from '@src/types/utils/ChildrenProps';
import {defaultScreenOptions} from './OnyxTabNavigatorConfig';
type OnyxTabNavigatorOnyxProps = {
selectedTab: OnyxEntry<SelectedTabRequest>;
};
type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
ChildrenProps & {
/** ID of the tab component to be saved in onyx */
id: string;
/** Name of the selected tab */
selectedTab?: SelectedTabRequest;
/** A function triggered when a tab has been selected */
onTabSelected?: (newIouType: IOURequestType) => void;
tabBar: (props: TabSelectorProps) => React.ReactNode;
screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
};
// eslint-disable-next-line rulesdir/no-inline-named-export
export const TopTab = createMaterialTopTabNavigator();
// This takes all the same props as MaterialTopTabsNavigator: https://reactnavigation.org/docs/material-top-tab-navigator/#props,
// except ID is now required, and it gets a `selectedTab` from Onyx
function OnyxTabNavigator({id, selectedTab, children, onTabSelected = () => {}, screenListeners, ...rest}: OnyxTabNavigatorProps) {
return (
<TopTab.Navigator
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...rest}
id={id}
initialRouteName={selectedTab}
backBehavior="initialRoute"
keyboardDismissMode="none"
screenListeners={{
state: (e) => {
const event = e as unknown as EventMapCore<NavigationState>['state'];
const state = event.data.state;
const index = state.index;
const routeNames = state.routeNames;
Tab.setSelectedTab(id, routeNames[index] as SelectedTabRequest);
onTabSelected(routeNames[index] as IOURequestType);
},
...(screenListeners ?? {}),
}}
screenOptions={defaultScreenOptions}
>
{children}
</TopTab.Navigator>
);
}
OnyxTabNavigator.displayName = 'OnyxTabNavigator';
export default withOnyx<OnyxTabNavigatorProps, OnyxTabNavigatorOnyxProps>({
selectedTab: {
key: ({id}) => `${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`,
},
})(OnyxTabNavigator);