-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: createMaterialCollapsibleTopTabNavigator
- Loading branch information
1 parent
0ed7bf0
commit e34a34b
Showing
5 changed files
with
262 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import * as React from 'react'; | ||
| import { SceneRendererProps } from 'react-native-tab-view'; | ||
| import { | ||
| NavigationHelpersContext, | ||
| TabActions, | ||
| useTheme, | ||
| } from '@react-navigation/native'; | ||
|
|
||
| import CollapsibleTabView, { | ||
| Props as CollapsibleTabViewProps, | ||
| } from './CollapsibleTabView'; | ||
| import { | ||
| MaterialTopTabBarProps, | ||
| MaterialTopTabBar, | ||
| MaterialTopTabView, | ||
| } from '@react-navigation/material-top-tabs'; | ||
|
|
||
| export type MaterialTopTabsCollapsibleTabViewProps = Parameters< | ||
| typeof MaterialTopTabView | ||
| >[0] & { | ||
| collapsibleOptions?: Partial<CollapsibleTabViewProps<any>>; | ||
| }; | ||
|
|
||
| export default function MaterialTopTabsCollapsibleTabView({ | ||
| pager, | ||
| lazyPlaceholder, | ||
| tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />, | ||
| tabBarOptions, | ||
| state, | ||
| navigation, | ||
| descriptors, | ||
| sceneContainerStyle, | ||
| collapsibleOptions, | ||
| ...rest | ||
| }: MaterialTopTabsCollapsibleTabViewProps) { | ||
| const { colors } = useTheme(); | ||
|
|
||
| const renderTabBar = (props: SceneRendererProps) => { | ||
| return tabBar({ | ||
| ...tabBarOptions, | ||
| ...props, | ||
| state: state, | ||
| navigation: navigation, | ||
| descriptors: descriptors, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <NavigationHelpersContext.Provider value={navigation}> | ||
| <CollapsibleTabView | ||
| {...collapsibleOptions} | ||
| {...rest} | ||
| routeKeyProp="name" | ||
| onIndexChange={(index) => | ||
| navigation.dispatch({ | ||
| ...TabActions.jumpTo(state.routes[index].name), | ||
| target: state.key, | ||
| }) | ||
| } | ||
| renderScene={({ route }) => descriptors[route.key].render()} | ||
| navigationState={state} | ||
| renderTabBar={renderTabBar} | ||
| renderPager={pager} | ||
| renderLazyPlaceholder={lazyPlaceholder} | ||
| onSwipeStart={() => navigation.emit({ type: 'swipeStart' })} | ||
| onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })} | ||
| sceneContainerStyle={[ | ||
| { backgroundColor: colors.background }, | ||
| sceneContainerStyle, | ||
| ]} | ||
| /> | ||
| </NavigationHelpersContext.Provider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| useNavigationBuilder, | ||
| createNavigatorFactory, | ||
| TabRouter, | ||
| TabRouterOptions, | ||
| TabNavigationState, | ||
| TabActionHelpers, | ||
| ParamListBase, | ||
| } from '@react-navigation/native'; | ||
| import MaterialTopTabsCollapsibleTabView from './MaterialTopTabsCollapsibleTabView'; | ||
| import { | ||
| createMaterialTopTabNavigator, | ||
| MaterialTopTabNavigationOptions, | ||
| } from '@react-navigation/material-top-tabs'; | ||
|
|
||
| type MaterialTopTabNavigationEventMap = { | ||
| /** | ||
| * Event which fires on tapping on the tab in the tab bar. | ||
| */ | ||
| tabPress: { data: undefined; canPreventDefault: true }; | ||
| /** | ||
| * Event which fires on long press on the tab in the tab bar. | ||
| */ | ||
| tabLongPress: { data: undefined }; | ||
| /** | ||
| * Event which fires when a swipe gesture starts, i.e. finger touches the screen. | ||
| */ | ||
| swipeStart: { data: undefined }; | ||
| /** | ||
| * Event which fires when a swipe gesture ends, i.e. finger leaves the screen. | ||
| */ | ||
| swipeEnd: { data: undefined }; | ||
| }; | ||
|
|
||
| type BaseNavigator = ReturnType< | ||
| typeof createMaterialTopTabNavigator | ||
| >['Navigator']; | ||
|
|
||
| type Props = Parameters< | ||
| Extract<BaseNavigator, React.FunctionComponent<any>> | ||
| >[0]; | ||
|
|
||
| function MaterialTopTabNavigator({ | ||
| initialRouteName, | ||
| backBehavior, | ||
| children, | ||
| screenOptions, | ||
| ...rest | ||
| }: Props) { | ||
| const { state, descriptors, navigation } = useNavigationBuilder< | ||
| TabNavigationState<ParamListBase>, | ||
| TabRouterOptions, | ||
| TabActionHelpers<ParamListBase>, | ||
| MaterialTopTabNavigationOptions, | ||
| MaterialTopTabNavigationEventMap | ||
| >(TabRouter, { | ||
| initialRouteName, | ||
| backBehavior, | ||
| children, | ||
| screenOptions, | ||
| }); | ||
|
|
||
| return ( | ||
| <MaterialTopTabsCollapsibleTabView | ||
| {...rest} | ||
| state={state} | ||
| navigation={navigation} | ||
| descriptors={descriptors} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default createNavigatorFactory< | ||
| TabNavigationState<ParamListBase>, | ||
| MaterialTopTabNavigationOptions, | ||
| MaterialTopTabNavigationEventMap, | ||
| typeof MaterialTopTabNavigator | ||
| >(MaterialTopTabNavigator); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters