@react-navigation/drawer 6.1.6 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/index.js +14 -14
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/navigators/createDrawerNavigator.js +22 -16
- package/lib/commonjs/navigators/createDrawerNavigator.js.map +1 -1
- package/lib/commonjs/utils/DrawerStatusContext.js.map +1 -1
- package/lib/commonjs/utils/getDrawerStatusFromState.js +2 -2
- package/lib/commonjs/utils/getDrawerStatusFromState.js.map +1 -1
- package/lib/commonjs/utils/useDrawerStatus.js.map +1 -1
- package/lib/commonjs/views/DrawerContent.js +6 -5
- package/lib/commonjs/views/DrawerContent.js.map +1 -1
- package/lib/commonjs/views/DrawerContentScrollView.js +7 -6
- package/lib/commonjs/views/DrawerContentScrollView.js.map +1 -1
- package/lib/commonjs/views/DrawerItem.js +16 -12
- package/lib/commonjs/views/DrawerItem.js.map +1 -1
- package/lib/commonjs/views/DrawerItemList.js +28 -14
- package/lib/commonjs/views/DrawerItemList.js.map +1 -1
- package/lib/commonjs/views/DrawerToggleButton.js +5 -4
- package/lib/commonjs/views/DrawerToggleButton.js.map +1 -1
- package/lib/commonjs/views/DrawerView.js +44 -34
- package/lib/commonjs/views/DrawerView.js.map +1 -1
- package/lib/commonjs/views/GestureHandler.js +7 -4
- package/lib/commonjs/views/GestureHandler.js.map +1 -1
- package/lib/commonjs/views/GestureHandlerNative.js +1 -1
- package/lib/commonjs/views/ScreenFallback.js +13 -9
- package/lib/commonjs/views/ScreenFallback.js.map +1 -1
- package/lib/commonjs/views/legacy/Drawer.js +20 -13
- package/lib/commonjs/views/legacy/Drawer.js.map +1 -1
- package/lib/commonjs/views/legacy/Overlay.js +8 -6
- package/lib/commonjs/views/legacy/Overlay.js.map +1 -1
- package/lib/commonjs/views/modern/Drawer.js +28 -30
- package/lib/commonjs/views/modern/Drawer.js.map +1 -1
- package/lib/commonjs/views/modern/Overlay.js +18 -9
- package/lib/commonjs/views/modern/Overlay.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/navigators/createDrawerNavigator.js +22 -16
- package/lib/module/navigators/createDrawerNavigator.js.map +1 -1
- package/lib/module/utils/DrawerStatusContext.js.map +1 -1
- package/lib/module/utils/getDrawerStatusFromState.js +2 -2
- package/lib/module/utils/getDrawerStatusFromState.js.map +1 -1
- package/lib/module/utils/useDrawerStatus.js.map +1 -1
- package/lib/module/views/DrawerContent.js +6 -5
- package/lib/module/views/DrawerContent.js.map +1 -1
- package/lib/module/views/DrawerContentScrollView.js +7 -6
- package/lib/module/views/DrawerContentScrollView.js.map +1 -1
- package/lib/module/views/DrawerItem.js +16 -12
- package/lib/module/views/DrawerItem.js.map +1 -1
- package/lib/module/views/DrawerItemList.js +28 -14
- package/lib/module/views/DrawerItemList.js.map +1 -1
- package/lib/module/views/DrawerToggleButton.js +5 -4
- package/lib/module/views/DrawerToggleButton.js.map +1 -1
- package/lib/module/views/DrawerView.js +43 -33
- package/lib/module/views/DrawerView.js.map +1 -1
- package/lib/module/views/GestureHandler.js +6 -3
- package/lib/module/views/GestureHandler.js.map +1 -1
- package/lib/module/views/ScreenFallback.js +13 -9
- package/lib/module/views/ScreenFallback.js.map +1 -1
- package/lib/module/views/legacy/Drawer.js +20 -13
- package/lib/module/views/legacy/Drawer.js.map +1 -1
- package/lib/module/views/legacy/Overlay.js +8 -6
- package/lib/module/views/legacy/Overlay.js.map +1 -1
- package/lib/module/views/modern/Drawer.js +28 -30
- package/lib/module/views/modern/Drawer.js.map +1 -1
- package/lib/module/views/modern/Overlay.js +19 -10
- package/lib/module/views/modern/Overlay.js.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/navigators/createDrawerNavigator.d.ts +1 -1
- package/lib/typescript/src/types.d.ts +13 -1
- package/lib/typescript/src/utils/DrawerStatusContext.d.ts +2 -1
- package/lib/typescript/src/utils/getDrawerStatusFromState.d.ts +2 -2
- package/lib/typescript/src/utils/useDrawerStatus.d.ts +2 -1
- package/lib/typescript/src/views/DrawerItem.d.ts +4 -0
- package/lib/typescript/src/views/DrawerView.d.ts +2 -1
- package/lib/typescript/src/views/ScreenFallback.d.ts +1 -0
- package/lib/typescript/src/views/legacy/Overlay.d.ts +4 -0
- package/lib/typescript/src/views/modern/Overlay.d.ts +4 -0
- package/package.json +10 -10
- package/src/index.tsx +1 -0
- package/src/navigators/createDrawerNavigator.tsx +22 -14
- package/src/types.tsx +11 -1
- package/src/utils/DrawerStatusContext.tsx +4 -2
- package/src/utils/getDrawerStatusFromState.tsx +4 -3
- package/src/utils/useDrawerStatus.tsx +2 -1
- package/src/views/DrawerItem.tsx +6 -0
- package/src/views/DrawerItemList.tsx +21 -8
- package/src/views/DrawerView.tsx +21 -6
- package/src/views/ScreenFallback.tsx +1 -0
- package/src/views/legacy/Drawer.tsx +21 -9
- package/src/views/legacy/Overlay.tsx +1 -0
- package/src/views/modern/Drawer.tsx +25 -23
- package/src/views/modern/Overlay.tsx +16 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Drawer.tsx"],"names":["React","InteractionManager","Keyboard","Platform","StatusBar","StyleSheet","View","PanGestureHandler","State","GestureState","Animated","interpolate","runOnJS","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","DrawerProgressContext","Overlay","SWIPE_DISTANCE_MINIMUM","DEFAULT_DRAWER_WIDTH","minmax","value","start","end","Math","min","max","Drawer","dimensions","drawerPosition","drawerStyle","drawerType","gestureHandlerProps","hideStatusBarOnOpen","keyboardDismissMode","onClose","onOpen","open","overlayStyle","renderDrawerContent","renderSceneContent","statusBarAnimation","swipeDistanceThreshold","swipeEdgeWidth","swipeEnabled","swipeVelocityThreshold","getDrawerWidth","width","flatten","endsWith","percentage","Number","replace","isFinite","drawerWidth","isOpen","isRight","getDrawerTranslationX","useCallback","hideStatusBar","hide","setHidden","useEffect","interactionHandleRef","useRef","startInteraction","current","createInteractionHandle","endInteraction","clearInteractionHandle","hideKeyboard","dismiss","onGestureStart","onGestureEnd","hitSlop","right","undefined","left","touchStartX","touchX","translationX","gestureState","UNDETERMINED","toggleDrawer","velocity","translateX","stiffness","damping","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","onGestureEvent","onStart","event","ctx","startX","state","x","onActive","onEnd","nextOpen","abs","velocityX","touchDistance","ACTIVE","drawerAnimatedStyle","transform","contentAnimatedStyle","progress","styles","main","flexDirection","content","OS","container","position","zIndex","create","top","bottom","maxWidth","flex","select","web","default","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n InteractionManager,\n Keyboard,\n Platform,\n StatusBar,\n StyleSheet,\n View,\n} from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n State as GestureState,\n} from 'react-native-gesture-handler';\nimport Animated, {\n interpolate,\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n} from 'react-native-reanimated';\n\nimport type { DrawerProps } from '../../types';\nimport DrawerProgressContext from '../../utils/DrawerProgressContext';\nimport Overlay from './Overlay';\n\nconst SWIPE_DISTANCE_MINIMUM = 5;\nconst DEFAULT_DRAWER_WIDTH = '80%';\n\nconst minmax = (value: number, start: number, end: number) => {\n 'worklet';\n\n return Math.min(Math.max(value, start), end);\n};\n\nexport default function Drawer({\n dimensions,\n drawerPosition,\n drawerStyle,\n drawerType,\n gestureHandlerProps,\n hideStatusBarOnOpen,\n keyboardDismissMode,\n onClose,\n onOpen,\n open,\n overlayStyle,\n renderDrawerContent,\n renderSceneContent,\n statusBarAnimation,\n swipeDistanceThreshold,\n swipeEdgeWidth,\n swipeEnabled,\n swipeVelocityThreshold,\n}: DrawerProps) {\n const getDrawerWidth = (): number => {\n const { width = DEFAULT_DRAWER_WIDTH } =\n StyleSheet.flatten(drawerStyle) || {};\n\n if (typeof width === 'string' && width.endsWith('%')) {\n // Try to calculate width if a percentage is given\n const percentage = Number(width.replace(/%$/, ''));\n\n if (Number.isFinite(percentage)) {\n return dimensions.width * (percentage / 100);\n }\n }\n\n return typeof width === 'number' ? width : 0;\n };\n\n const drawerWidth = getDrawerWidth();\n\n const isOpen = drawerType === 'permanent' ? true : open;\n const isRight = drawerPosition === 'right';\n\n const getDrawerTranslationX = React.useCallback(\n (open: boolean) => {\n 'worklet';\n\n if (drawerPosition === 'left') {\n return open ? 0 : -drawerWidth;\n }\n\n return open ? 0 : drawerWidth;\n },\n [drawerPosition, drawerWidth]\n );\n\n const hideStatusBar = React.useCallback(\n (hide: boolean) => {\n if (hideStatusBarOnOpen) {\n StatusBar.setHidden(hide, statusBarAnimation);\n }\n },\n [hideStatusBarOnOpen, statusBarAnimation]\n );\n\n React.useEffect(() => {\n hideStatusBar(isOpen);\n\n return () => hideStatusBar(false);\n }, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);\n\n const interactionHandleRef = React.useRef<number | null>(null);\n\n const startInteraction = () => {\n interactionHandleRef.current = InteractionManager.createInteractionHandle();\n };\n\n const endInteraction = () => {\n if (interactionHandleRef.current != null) {\n InteractionManager.clearInteractionHandle(interactionHandleRef.current);\n interactionHandleRef.current = null;\n }\n };\n\n const hideKeyboard = () => {\n if (keyboardDismissMode === 'on-drag') {\n Keyboard.dismiss();\n }\n };\n\n const onGestureStart = () => {\n startInteraction();\n hideKeyboard();\n hideStatusBar(true);\n };\n\n const onGestureEnd = () => {\n endInteraction();\n };\n\n // FIXME: Currently hitSlop is broken when on Android when drawer is on right\n // https://github.com/software-mansion/react-native-gesture-handler/issues/569\n const hitSlop = isRight\n ? // Extend hitSlop to the side of the screen when drawer is closed\n // This lets the user drag the drawer from the side of the screen\n { right: 0, width: isOpen ? undefined : swipeEdgeWidth }\n : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };\n\n const touchStartX = useSharedValue(0);\n const touchX = useSharedValue(0);\n const translationX = useSharedValue(getDrawerTranslationX(open));\n const gestureState = useSharedValue<GestureState>(GestureState.UNDETERMINED);\n\n const toggleDrawer = React.useCallback(\n (open: boolean, velocity?: number) => {\n 'worklet';\n\n const translateX = getDrawerTranslationX(open);\n\n touchStartX.value = 0;\n touchX.value = 0;\n translationX.value = withSpring(\n translateX,\n {\n velocity,\n stiffness: 1000,\n damping: 500,\n mass: 3,\n overshootClamping: true,\n restDisplacementThreshold: 0.01,\n restSpeedThreshold: 0.01,\n },\n () => {\n if (translationX.value === getDrawerTranslationX(true)) {\n runOnJS(onOpen)();\n } else if (translationX.value === getDrawerTranslationX(false)) {\n runOnJS(onClose)();\n }\n }\n );\n },\n [getDrawerTranslationX, onClose, onOpen, touchStartX, touchX, translationX]\n );\n\n React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);\n\n const onGestureEvent = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startX: number }\n >({\n onStart: (event, ctx) => {\n ctx.startX = translationX.value;\n gestureState.value = event.state;\n touchStartX.value = event.x;\n\n runOnJS(onGestureStart)();\n },\n onActive: (event, ctx) => {\n touchX.value = event.x;\n translationX.value = ctx.startX + event.translationX;\n gestureState.value = event.state;\n },\n onEnd: (event) => {\n gestureState.value = event.state;\n\n const nextOpen =\n (Math.abs(event.translationX) > SWIPE_DISTANCE_MINIMUM &&\n Math.abs(event.translationX) > swipeVelocityThreshold) ||\n Math.abs(event.translationX) > swipeDistanceThreshold\n ? drawerPosition === 'left'\n ? // If swiped to right, open the drawer, otherwise close it\n (event.velocityX === 0 ? event.translationX : event.velocityX) > 0\n : // If swiped to left, open the drawer, otherwise close it\n (event.velocityX === 0 ? event.translationX : event.velocityX) < 0\n : open;\n\n toggleDrawer(nextOpen, event.velocityX);\n runOnJS(onGestureEnd)();\n },\n });\n\n const translateX = useDerivedValue(() => {\n // Comment stolen from react-native-gesture-handler/DrawerLayout\n //\n // While closing the drawer when user starts gesture outside of its area (in greyed\n // out part of the window), we want the drawer to follow only once finger reaches the\n // edge of the drawer.\n // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by\n // dots. The touch gesture starts at '*' and moves left, touch path is indicated by\n // an arrow pointing left\n // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|.<-*..| |XXXXXXXX|<--*..| |XXXXX|<-----*..|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // +---------------+ +---------------+ +---------------+ +---------------+\n //\n // For the above to work properly we define animated value that will keep start position\n // of the gesture. Then we use that value to calculate how much we need to subtract from\n // the translationX. If the gesture started on the greyed out area we take the distance from the\n // edge of the drawer to the start position. Otherwise we don't subtract at all and the\n // drawer be pulled back as soon as you start the pan.\n //\n // This is used only when drawerType is \"front\"\n const touchDistance =\n drawerType === 'front' && gestureState.value === GestureState.ACTIVE\n ? minmax(\n drawerPosition === 'left'\n ? touchStartX.value - drawerWidth\n : dimensions.width - drawerWidth - touchStartX.value,\n 0,\n dimensions.width\n )\n : 0;\n\n const translateX =\n drawerPosition === 'left'\n ? minmax(translationX.value + touchDistance, -drawerWidth, 0)\n : minmax(translationX.value - touchDistance, 0, drawerWidth);\n\n return translateX;\n });\n\n const drawerAnimatedStyle = useAnimatedStyle(() => {\n if (drawerType === 'permanent') {\n return {};\n }\n\n return {\n transform: [\n {\n translateX: drawerType === 'back' ? 0 : translateX.value,\n },\n ],\n };\n });\n\n const contentAnimatedStyle = useAnimatedStyle(() => {\n if (drawerType === 'permanent') {\n return {};\n }\n\n return {\n transform: [\n {\n translateX:\n drawerType === 'front'\n ? 0\n : drawerPosition === 'left'\n ? drawerWidth + translateX.value\n : translateX.value - drawerWidth,\n },\n ],\n };\n });\n\n const progress = useDerivedValue(() => {\n return drawerType === 'permanent'\n ? 1\n : interpolate(\n translateX.value,\n [getDrawerTranslationX(false), getDrawerTranslationX(true)],\n [0, 1]\n );\n });\n\n return (\n <DrawerProgressContext.Provider value={progress}>\n <PanGestureHandler\n activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}\n failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}\n hitSlop={hitSlop}\n enabled={drawerType !== 'permanent' && swipeEnabled}\n onGestureEvent={onGestureEvent}\n {...gestureHandlerProps}\n >\n {/* Immediate child of gesture handler needs to be an Animated.View */}\n <Animated.View\n style={[\n styles.main,\n {\n flexDirection:\n drawerType === 'permanent' && !isRight ? 'row-reverse' : 'row',\n },\n ]}\n >\n <Animated.View style={[styles.content, contentAnimatedStyle]}>\n <View\n accessibilityElementsHidden={isOpen && drawerType !== 'permanent'}\n importantForAccessibility={\n isOpen && drawerType !== 'permanent'\n ? 'no-hide-descendants'\n : 'auto'\n }\n style={styles.content}\n >\n {renderSceneContent()}\n </View>\n {drawerType !== 'permanent' ? (\n <Overlay\n progress={progress}\n onPress={() => toggleDrawer(false)}\n style={overlayStyle}\n />\n ) : null}\n </Animated.View>\n <Animated.View\n accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}\n removeClippedSubviews={Platform.OS !== 'ios'}\n style={[\n styles.container,\n {\n position: drawerType === 'permanent' ? 'relative' : 'absolute',\n zIndex: drawerType === 'back' ? -1 : 0,\n },\n drawerAnimatedStyle,\n drawerStyle as any,\n ]}\n >\n {renderDrawerContent()}\n </Animated.View>\n </Animated.View>\n </PanGestureHandler>\n </DrawerProgressContext.Provider>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n top: 0,\n bottom: 0,\n maxWidth: '100%',\n width: DEFAULT_DRAWER_WIDTH,\n },\n content: {\n flex: 1,\n },\n main: {\n flex: 1,\n ...Platform.select({\n // FIXME: We need to hide `overflowX` on Web so the translated content doesn't show offscreen.\n // But adding `overflowX: 'hidden'` prevents content from collapsing the URL bar.\n web: null,\n default: { overflow: 'hidden' },\n }),\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["Drawer.tsx"],"names":["React","InteractionManager","Keyboard","Platform","StatusBar","StyleSheet","View","PanGestureHandler","State","GestureState","Animated","interpolate","runOnJS","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","DrawerProgressContext","Overlay","SWIPE_DISTANCE_MINIMUM","DEFAULT_DRAWER_WIDTH","minmax","value","start","end","Math","min","max","Drawer","dimensions","drawerPosition","drawerStyle","drawerType","gestureHandlerProps","hideStatusBarOnOpen","keyboardDismissMode","onClose","onOpen","open","overlayStyle","renderDrawerContent","renderSceneContent","statusBarAnimation","swipeDistanceThreshold","swipeEdgeWidth","swipeEnabled","swipeVelocityThreshold","getDrawerWidth","width","flatten","endsWith","percentage","Number","replace","isFinite","drawerWidth","isOpen","isRight","getDrawerTranslationX","useCallback","hideStatusBar","hide","setHidden","useEffect","interactionHandleRef","useRef","startInteraction","current","createInteractionHandle","endInteraction","clearInteractionHandle","hideKeyboard","dismiss","onGestureStart","onGestureEnd","hitSlop","right","undefined","left","touchStartX","touchX","translationX","gestureState","UNDETERMINED","toggleDrawer","velocity","translateX","stiffness","damping","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","onGestureEvent","onStart","event","ctx","startX","state","x","onActive","onEnd","nextOpen","abs","velocityX","touchDistance","ACTIVE","drawerAnimatedStyle","transform","contentAnimatedStyle","progress","styles","main","flexDirection","content","OS","container","position","zIndex","create","top","bottom","maxWidth","flex","select","web","default","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n InteractionManager,\n Keyboard,\n Platform,\n StatusBar,\n StyleSheet,\n View,\n} from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n State as GestureState,\n} from 'react-native-gesture-handler';\nimport Animated, {\n interpolate,\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n} from 'react-native-reanimated';\n\nimport type { DrawerProps } from '../../types';\nimport DrawerProgressContext from '../../utils/DrawerProgressContext';\nimport Overlay from './Overlay';\n\nconst SWIPE_DISTANCE_MINIMUM = 5;\nconst DEFAULT_DRAWER_WIDTH = '80%';\n\nconst minmax = (value: number, start: number, end: number) => {\n 'worklet';\n\n return Math.min(Math.max(value, start), end);\n};\n\nexport default function Drawer({\n dimensions,\n drawerPosition,\n drawerStyle,\n drawerType,\n gestureHandlerProps,\n hideStatusBarOnOpen,\n keyboardDismissMode,\n onClose,\n onOpen,\n open,\n overlayStyle,\n renderDrawerContent,\n renderSceneContent,\n statusBarAnimation,\n swipeDistanceThreshold,\n swipeEdgeWidth,\n swipeEnabled,\n swipeVelocityThreshold,\n}: DrawerProps) {\n const getDrawerWidth = (): number => {\n const { width = DEFAULT_DRAWER_WIDTH } =\n StyleSheet.flatten(drawerStyle) || {};\n\n if (typeof width === 'string' && width.endsWith('%')) {\n // Try to calculate width if a percentage is given\n const percentage = Number(width.replace(/%$/, ''));\n\n if (Number.isFinite(percentage)) {\n return dimensions.width * (percentage / 100);\n }\n }\n\n return typeof width === 'number' ? width : 0;\n };\n\n const drawerWidth = getDrawerWidth();\n\n const isOpen = drawerType === 'permanent' ? true : open;\n const isRight = drawerPosition === 'right';\n\n const getDrawerTranslationX = React.useCallback(\n (open: boolean) => {\n 'worklet';\n\n if (drawerPosition === 'left') {\n return open ? 0 : -drawerWidth;\n }\n\n return open ? 0 : drawerWidth;\n },\n [drawerPosition, drawerWidth]\n );\n\n const hideStatusBar = React.useCallback(\n (hide: boolean) => {\n if (hideStatusBarOnOpen) {\n StatusBar.setHidden(hide, statusBarAnimation);\n }\n },\n [hideStatusBarOnOpen, statusBarAnimation]\n );\n\n React.useEffect(() => {\n hideStatusBar(isOpen);\n\n return () => hideStatusBar(false);\n }, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);\n\n const interactionHandleRef = React.useRef<number | null>(null);\n\n const startInteraction = () => {\n interactionHandleRef.current = InteractionManager.createInteractionHandle();\n };\n\n const endInteraction = () => {\n if (interactionHandleRef.current != null) {\n InteractionManager.clearInteractionHandle(interactionHandleRef.current);\n interactionHandleRef.current = null;\n }\n };\n\n const hideKeyboard = () => {\n if (keyboardDismissMode === 'on-drag') {\n Keyboard.dismiss();\n }\n };\n\n const onGestureStart = () => {\n startInteraction();\n hideKeyboard();\n hideStatusBar(true);\n };\n\n const onGestureEnd = () => {\n endInteraction();\n };\n\n // FIXME: Currently hitSlop is broken when on Android when drawer is on right\n // https://github.com/software-mansion/react-native-gesture-handler/issues/569\n const hitSlop = isRight\n ? // Extend hitSlop to the side of the screen when drawer is closed\n // This lets the user drag the drawer from the side of the screen\n { right: 0, width: isOpen ? undefined : swipeEdgeWidth }\n : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };\n\n const touchStartX = useSharedValue(0);\n const touchX = useSharedValue(0);\n const translationX = useSharedValue(getDrawerTranslationX(open));\n const gestureState = useSharedValue<GestureState>(GestureState.UNDETERMINED);\n\n const toggleDrawer = React.useCallback(\n (open: boolean, velocity?: number) => {\n 'worklet';\n\n const translateX = getDrawerTranslationX(open);\n\n touchStartX.value = 0;\n touchX.value = 0;\n translationX.value = withSpring(\n translateX,\n {\n velocity,\n stiffness: 1000,\n damping: 500,\n mass: 3,\n overshootClamping: true,\n restDisplacementThreshold: 0.01,\n restSpeedThreshold: 0.01,\n },\n () => {\n if (translationX.value === getDrawerTranslationX(true)) {\n runOnJS(onOpen)();\n } else if (translationX.value === getDrawerTranslationX(false)) {\n runOnJS(onClose)();\n }\n }\n );\n },\n [getDrawerTranslationX, onClose, onOpen, touchStartX, touchX, translationX]\n );\n\n React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);\n\n const onGestureEvent = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startX: number }\n >({\n onStart: (event, ctx) => {\n ctx.startX = translationX.value;\n gestureState.value = event.state;\n touchStartX.value = event.x;\n\n runOnJS(onGestureStart)();\n },\n onActive: (event, ctx) => {\n touchX.value = event.x;\n translationX.value = ctx.startX + event.translationX;\n gestureState.value = event.state;\n },\n onEnd: (event) => {\n gestureState.value = event.state;\n\n const nextOpen =\n (Math.abs(event.translationX) > SWIPE_DISTANCE_MINIMUM &&\n Math.abs(event.translationX) > swipeVelocityThreshold) ||\n Math.abs(event.translationX) > swipeDistanceThreshold\n ? drawerPosition === 'left'\n ? // If swiped to right, open the drawer, otherwise close it\n (event.velocityX === 0 ? event.translationX : event.velocityX) > 0\n : // If swiped to left, open the drawer, otherwise close it\n (event.velocityX === 0 ? event.translationX : event.velocityX) < 0\n : open;\n\n toggleDrawer(nextOpen, event.velocityX);\n runOnJS(onGestureEnd)();\n },\n });\n\n const translateX = useDerivedValue(() => {\n // Comment stolen from react-native-gesture-handler/DrawerLayout\n //\n // While closing the drawer when user starts gesture outside of its area (in greyed\n // out part of the window), we want the drawer to follow only once finger reaches the\n // edge of the drawer.\n // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by\n // dots. The touch gesture starts at '*' and moves left, touch path is indicated by\n // an arrow pointing left\n // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|.<-*..| |XXXXXXXX|<--*..| |XXXXX|<-----*..|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|\n // +---------------+ +---------------+ +---------------+ +---------------+\n //\n // For the above to work properly we define animated value that will keep start position\n // of the gesture. Then we use that value to calculate how much we need to subtract from\n // the translationX. If the gesture started on the greyed out area we take the distance from the\n // edge of the drawer to the start position. Otherwise we don't subtract at all and the\n // drawer be pulled back as soon as you start the pan.\n //\n // This is used only when drawerType is \"front\"\n const touchDistance =\n drawerType === 'front' && gestureState.value === GestureState.ACTIVE\n ? minmax(\n drawerPosition === 'left'\n ? touchStartX.value - drawerWidth\n : dimensions.width - drawerWidth - touchStartX.value,\n 0,\n dimensions.width\n )\n : 0;\n\n const translateX =\n drawerPosition === 'left'\n ? minmax(translationX.value + touchDistance, -drawerWidth, 0)\n : minmax(translationX.value - touchDistance, 0, drawerWidth);\n\n return translateX;\n });\n\n const drawerAnimatedStyle = useAnimatedStyle(() => {\n return {\n transform:\n drawerType === 'permanent'\n ? // Reanimated needs the property to be present, but it results in Browser bug\n // https://bugs.chromium.org/p/chromium/issues/detail?id=20574\n []\n : [\n {\n translateX: drawerType === 'back' ? 0 : translateX.value,\n },\n ],\n };\n });\n\n const contentAnimatedStyle = useAnimatedStyle(() => {\n return {\n transform:\n drawerType === 'permanent'\n ? // Reanimated needs the property to be present, but it results in Browser bug\n // https://bugs.chromium.org/p/chromium/issues/detail?id=20574\n []\n : [\n {\n translateX:\n drawerType === 'front'\n ? 0\n : drawerPosition === 'left'\n ? drawerWidth + translateX.value\n : translateX.value - drawerWidth,\n },\n ],\n };\n });\n\n const progress = useDerivedValue(() => {\n return drawerType === 'permanent'\n ? 1\n : interpolate(\n translateX.value,\n [getDrawerTranslationX(false), getDrawerTranslationX(true)],\n [0, 1]\n );\n });\n\n return (\n <DrawerProgressContext.Provider value={progress}>\n <PanGestureHandler\n activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}\n failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}\n hitSlop={hitSlop}\n enabled={drawerType !== 'permanent' && swipeEnabled}\n onGestureEvent={onGestureEvent}\n {...gestureHandlerProps}\n >\n {/* Immediate child of gesture handler needs to be an Animated.View */}\n <Animated.View\n style={[\n styles.main,\n {\n flexDirection:\n drawerType === 'permanent' && !isRight ? 'row-reverse' : 'row',\n },\n ]}\n >\n <Animated.View style={[styles.content, contentAnimatedStyle]}>\n <View\n accessibilityElementsHidden={isOpen && drawerType !== 'permanent'}\n importantForAccessibility={\n isOpen && drawerType !== 'permanent'\n ? 'no-hide-descendants'\n : 'auto'\n }\n style={styles.content}\n >\n {renderSceneContent()}\n </View>\n {drawerType !== 'permanent' ? (\n <Overlay\n progress={progress}\n onPress={() => toggleDrawer(false)}\n style={overlayStyle}\n />\n ) : null}\n </Animated.View>\n <Animated.View\n accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}\n removeClippedSubviews={Platform.OS !== 'ios'}\n style={[\n styles.container,\n {\n position: drawerType === 'permanent' ? 'relative' : 'absolute',\n zIndex: drawerType === 'back' ? -1 : 0,\n },\n drawerAnimatedStyle,\n drawerStyle as any,\n ]}\n >\n {renderDrawerContent()}\n </Animated.View>\n </Animated.View>\n </PanGestureHandler>\n </DrawerProgressContext.Provider>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n top: 0,\n bottom: 0,\n maxWidth: '100%',\n width: DEFAULT_DRAWER_WIDTH,\n },\n content: {\n flex: 1,\n },\n main: {\n flex: 1,\n ...Platform.select({\n // FIXME: We need to hide `overflowX` on Web so the translated content doesn't show offscreen.\n // But adding `overflowX: 'hidden'` prevents content from collapsing the URL bar.\n web: null,\n default: { overflow: 'hidden' },\n }),\n },\n});\n"]}
|
|
@@ -2,26 +2,35 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Platform, Pressable, StyleSheet } from 'react-native';
|
|
5
|
-
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
|
|
5
|
+
import Animated, { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
|
|
6
6
|
const PROGRESS_EPSILON = 0.05;
|
|
7
|
-
const Overlay = /*#__PURE__*/React.forwardRef(function Overlay({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
const Overlay = /*#__PURE__*/React.forwardRef(function Overlay(_ref, ref) {
|
|
8
|
+
let {
|
|
9
|
+
progress,
|
|
10
|
+
onPress,
|
|
11
|
+
style,
|
|
12
|
+
...props
|
|
13
|
+
} = _ref;
|
|
13
14
|
const animatedStyle = useAnimatedStyle(() => {
|
|
14
15
|
return {
|
|
15
16
|
opacity: progress.value,
|
|
16
17
|
// We don't want the user to be able to press through the overlay when drawer is open
|
|
17
|
-
//
|
|
18
|
-
// But we can also send the overlay behind the screen
|
|
18
|
+
// We can send the overlay behind the screen to avoid it
|
|
19
19
|
zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1
|
|
20
20
|
};
|
|
21
21
|
});
|
|
22
|
+
const animatedProps = useAnimatedProps(() => {
|
|
23
|
+
const active = progress.value > PROGRESS_EPSILON;
|
|
24
|
+
return {
|
|
25
|
+
pointerEvents: active ? 'auto' : 'none',
|
|
26
|
+
accessibilityElementsHidden: !active,
|
|
27
|
+
importantForAccessibility: active ? 'auto' : 'no-hide-descendants'
|
|
28
|
+
};
|
|
29
|
+
});
|
|
22
30
|
return /*#__PURE__*/React.createElement(Animated.View, _extends({}, props, {
|
|
23
31
|
ref: ref,
|
|
24
|
-
style: [styles.overlay, overlayStyle, animatedStyle, style]
|
|
32
|
+
style: [styles.overlay, overlayStyle, animatedStyle, style],
|
|
33
|
+
animatedProps: animatedProps
|
|
25
34
|
}), /*#__PURE__*/React.createElement(Pressable, {
|
|
26
35
|
onPress: onPress,
|
|
27
36
|
style: styles.pressable
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Overlay.tsx"],"names":["React","Platform","Pressable","StyleSheet","Animated","useAnimatedStyle","PROGRESS_EPSILON","Overlay","forwardRef","progress","onPress","style","props","
|
|
1
|
+
{"version":3,"sources":["Overlay.tsx"],"names":["React","Platform","Pressable","StyleSheet","Animated","useAnimatedProps","useAnimatedStyle","PROGRESS_EPSILON","Overlay","forwardRef","ref","progress","onPress","style","props","animatedStyle","opacity","value","zIndex","animatedProps","active","pointerEvents","accessibilityElementsHidden","importantForAccessibility","styles","overlay","overlayStyle","pressable","select","web","WebkitTapHighlightColor","default","create","absoluteFillObject","backgroundColor","flex"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,UAA9B,QAAgD,cAAhD;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,gBAFF,QAGO,yBAHP;AAKA,MAAMC,gBAAgB,GAAG,IAAzB;AAOA,MAAMC,OAAO,gBAAGR,KAAK,CAACS,UAAN,CAAiB,SAASD,OAAT,OAE/BE,GAF+B,EAG/B;AAAA,MAFA;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,OAAZ;AAAqBC,IAAAA,KAArB;AAA4B,OAAGC;AAA/B,GAEA;AACA,QAAMC,aAAa,GAAGT,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLU,MAAAA,OAAO,EAAEL,QAAQ,CAACM,KADb;AAEL;AACA;AACAC,MAAAA,MAAM,EAAEP,QAAQ,CAACM,KAAT,GAAiBV,gBAAjB,GAAoC,CAApC,GAAwC,CAAC;AAJ5C,KAAP;AAMD,GAPqC,CAAtC;AASA,QAAMY,aAAa,GAAGd,gBAAgB,CAAC,MAAM;AAC3C,UAAMe,MAAM,GAAGT,QAAQ,CAACM,KAAT,GAAiBV,gBAAhC;AAEA,WAAO;AACLc,MAAAA,aAAa,EAAED,MAAM,GAAG,MAAH,GAAY,MAD5B;AAELE,MAAAA,2BAA2B,EAAE,CAACF,MAFzB;AAGLG,MAAAA,yBAAyB,EAAEH,MAAM,GAAG,MAAH,GAAY;AAHxC,KAAP;AAKD,GARqC,CAAtC;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMN,KADN;AAEE,IAAA,GAAG,EAAEJ,GAFP;AAGE,IAAA,KAAK,EAAE,CAACc,MAAM,CAACC,OAAR,EAAiBC,YAAjB,EAA+BX,aAA/B,EAA8CF,KAA9C,CAHT;AAIE,IAAA,aAAa,EAAEM;AAJjB,mBAME,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAEP,OAApB;AAA6B,IAAA,KAAK,EAAEY,MAAM,CAACG;AAA3C,IANF,CADF;AAUD,CAjCe,CAAhB;AAmCA,MAAMD,YAAY,GAAGzB,QAAQ,CAAC2B,MAAT,CAAwC;AAC3DC,EAAAA,GAAG,EAAE;AACH;AACA;AACAC,IAAAA,uBAAuB,EAAE;AAHtB,GADsD;AAM3DC,EAAAA,OAAO,EAAE;AANkD,CAAxC,CAArB;AASA,MAAMP,MAAM,GAAGrB,UAAU,CAAC6B,MAAX,CAAkB;AAC/BP,EAAAA,OAAO,EAAE,EACP,GAAGtB,UAAU,CAAC8B,kBADP;AAEPC,IAAAA,eAAe,EAAE;AAFV,GADsB;AAK/BP,EAAAA,SAAS,EAAE;AACTQ,IAAAA,IAAI,EAAE;AADG;AALoB,CAAlB,CAAf;AAUA,eAAe3B,OAAf","sourcesContent":["import * as React from 'react';\nimport { Platform, Pressable, StyleSheet } from 'react-native';\nimport Animated, {\n useAnimatedProps,\n useAnimatedStyle,\n} from 'react-native-reanimated';\n\nconst PROGRESS_EPSILON = 0.05;\n\ntype Props = React.ComponentProps<typeof Animated.View> & {\n progress: Animated.SharedValue<number>;\n onPress: () => void;\n};\n\nconst Overlay = React.forwardRef(function Overlay(\n { progress, onPress, style, ...props }: Props,\n ref: React.Ref<Animated.View>\n) {\n const animatedStyle = useAnimatedStyle(() => {\n return {\n opacity: progress.value,\n // We don't want the user to be able to press through the overlay when drawer is open\n // We can send the overlay behind the screen to avoid it\n zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1,\n };\n });\n\n const animatedProps = useAnimatedProps(() => {\n const active = progress.value > PROGRESS_EPSILON;\n\n return {\n pointerEvents: active ? 'auto' : 'none',\n accessibilityElementsHidden: !active,\n importantForAccessibility: active ? 'auto' : 'no-hide-descendants',\n } as const;\n });\n\n return (\n <Animated.View\n {...props}\n ref={ref}\n style={[styles.overlay, overlayStyle, animatedStyle, style]}\n animatedProps={animatedProps}\n >\n <Pressable onPress={onPress} style={styles.pressable} />\n </Animated.View>\n );\n});\n\nconst overlayStyle = Platform.select<Record<string, string>>({\n web: {\n // Disable touch highlight on mobile Safari.\n // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.\n WebkitTapHighlightColor: 'transparent',\n },\n default: {},\n});\n\nconst styles = StyleSheet.create({\n overlay: {\n ...StyleSheet.absoluteFillObject,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n },\n pressable: {\n flex: 1,\n },\n});\n\nexport default Overlay;\n"]}
|
|
@@ -22,4 +22,4 @@ export { default as useDrawerStatus } from './utils/useDrawerStatus';
|
|
|
22
22
|
/**
|
|
23
23
|
* Types
|
|
24
24
|
*/
|
|
25
|
-
export type { DrawerContentComponentProps, DrawerHeaderProps, DrawerNavigationOptions, DrawerNavigationProp, DrawerScreenProps, } from './types';
|
|
25
|
+
export type { DrawerContentComponentProps, DrawerHeaderProps, DrawerNavigationEventMap, DrawerNavigationOptions, DrawerNavigationProp, DrawerScreenProps, } from './types';
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
import { DefaultNavigatorOptions, DrawerNavigationState, DrawerRouterOptions, ParamListBase } from '@react-navigation/native';
|
|
3
3
|
import type { DrawerNavigationConfig, DrawerNavigationEventMap, DrawerNavigationOptions } from '../types';
|
|
4
4
|
declare type Props = DefaultNavigatorOptions<ParamListBase, DrawerNavigationState<ParamListBase>, DrawerNavigationOptions, DrawerNavigationEventMap> & DrawerRouterOptions & DrawerNavigationConfig;
|
|
5
|
-
declare function DrawerNavigator({ initialRouteName, defaultStatus, backBehavior, children, screenListeners, screenOptions,
|
|
5
|
+
declare function DrawerNavigator({ initialRouteName, defaultStatus: customDefaultStatus, backBehavior, children, screenListeners, screenOptions, ...restWithDeprecated }: Props): JSX.Element;
|
|
6
6
|
declare const _default: <ParamList extends ParamListBase>() => import("@react-navigation/native").TypedNavigator<ParamList, DrawerNavigationState<ParamListBase>, DrawerNavigationOptions, DrawerNavigationEventMap, typeof DrawerNavigator>;
|
|
7
7
|
export default _default;
|
|
@@ -89,6 +89,10 @@ export declare type DrawerNavigationOptions = HeaderOptions & {
|
|
|
89
89
|
* Background color for the inactive items in the drawer.
|
|
90
90
|
*/
|
|
91
91
|
drawerInactiveBackgroundColor?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Whether label font should scale to respect Text Size accessibility settings.
|
|
94
|
+
*/
|
|
95
|
+
drawerAllowFontScaling?: boolean;
|
|
92
96
|
/**
|
|
93
97
|
* Style object for the single item, which can contain an icon and/or a label.
|
|
94
98
|
*/
|
|
@@ -201,7 +205,15 @@ export declare type DrawerHeaderProps = {
|
|
|
201
205
|
*/
|
|
202
206
|
navigation: DrawerNavigationProp<ParamListBase>;
|
|
203
207
|
};
|
|
204
|
-
export declare type DrawerNavigationEventMap = {
|
|
208
|
+
export declare type DrawerNavigationEventMap = {
|
|
209
|
+
/**
|
|
210
|
+
* Event which fires on tapping on the item in the drawer menu.
|
|
211
|
+
*/
|
|
212
|
+
drawerItemPress: {
|
|
213
|
+
data: undefined;
|
|
214
|
+
canPreventDefault: true;
|
|
215
|
+
};
|
|
216
|
+
};
|
|
205
217
|
export declare type DrawerNavigationHelpers = NavigationHelpers<ParamListBase, DrawerNavigationEventMap> & DrawerActionHelpers<ParamListBase>;
|
|
206
218
|
export declare type DrawerNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = NavigationProp<ParamList, RouteName, DrawerNavigationState<ParamList>, DrawerNavigationOptions, DrawerNavigationEventMap> & DrawerActionHelpers<ParamList>;
|
|
207
219
|
export declare type DrawerScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { DrawerStatus } from '@react-navigation/native';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
declare const DrawerStatusContext: React.Context<
|
|
3
|
+
declare const DrawerStatusContext: React.Context<DrawerStatus | undefined>;
|
|
3
4
|
export default DrawerStatusContext;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { DrawerNavigationState, ParamListBase } from '@react-navigation/native';
|
|
2
|
-
export default function getDrawerStatusFromState(state: DrawerNavigationState<ParamListBase>):
|
|
1
|
+
import type { DrawerNavigationState, DrawerStatus, ParamListBase } from '@react-navigation/native';
|
|
2
|
+
export default function getDrawerStatusFromState(state: DrawerNavigationState<ParamListBase>): DrawerStatus;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import type { DrawerStatus } from '@react-navigation/native';
|
|
1
2
|
/**
|
|
2
3
|
* Hook to detect if the drawer's status in a parent navigator.
|
|
3
4
|
* Returns 'open' if the drawer is open, 'closed' if the drawer is closed.
|
|
4
5
|
*/
|
|
5
|
-
export default function useDrawerStatus():
|
|
6
|
+
export default function useDrawerStatus(): DrawerStatus;
|
|
@@ -66,6 +66,10 @@ declare type Props = {
|
|
|
66
66
|
* Style object for the wrapper element.
|
|
67
67
|
*/
|
|
68
68
|
style?: StyleProp<ViewStyle>;
|
|
69
|
+
/**
|
|
70
|
+
* Whether label font should scale to respect Text Size accessibility settings.
|
|
71
|
+
*/
|
|
72
|
+
allowFontScaling?: boolean;
|
|
69
73
|
};
|
|
70
74
|
/**
|
|
71
75
|
* A component used to show an action item with an icon and a label in a navigation drawer.
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { DrawerNavigationState, ParamListBase } from '@react-navigation/native';
|
|
2
|
+
import { DrawerNavigationState, DrawerStatus, ParamListBase } from '@react-navigation/native';
|
|
3
3
|
import type { DrawerDescriptorMap, DrawerNavigationConfig, DrawerNavigationHelpers } from '../types';
|
|
4
4
|
declare type Props = DrawerNavigationConfig & {
|
|
5
|
+
defaultStatus: DrawerStatus;
|
|
5
6
|
state: DrawerNavigationState<ParamListBase>;
|
|
6
7
|
navigation: DrawerNavigationHelpers;
|
|
7
8
|
descriptors: DrawerDescriptorMap;
|
|
@@ -8,6 +8,7 @@ declare type Props = {
|
|
|
8
8
|
};
|
|
9
9
|
export declare const MaybeScreenContainer: ({ enabled, ...rest }: ViewProps & {
|
|
10
10
|
enabled: boolean;
|
|
11
|
+
hasTwoStates: boolean;
|
|
11
12
|
children: React.ReactNode;
|
|
12
13
|
}) => JSX.Element;
|
|
13
14
|
export declare function MaybeScreen({ visible, children, ...rest }: Props): JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import Animated from 'react-native-reanimated';
|
|
3
3
|
declare const Overlay: React.ForwardRefExoticComponent<{
|
|
4
|
+
children?: React.ReactNode | Animated.Node<React.ReactNode>;
|
|
4
5
|
hitSlop?: import("react-native").Insets | Animated.Node<import("react-native").Insets | undefined> | undefined;
|
|
5
6
|
onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | Animated.Node<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
|
|
6
7
|
pointerEvents?: "none" | "auto" | "box-none" | "box-only" | Animated.Node<"none" | "auto" | "box-none" | "box-only" | undefined> | undefined;
|
|
@@ -61,6 +62,9 @@ declare const Overlay: React.ForwardRefExoticComponent<{
|
|
|
61
62
|
accessibilityIgnoresInvertColors?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
62
63
|
} & {
|
|
63
64
|
animatedProps?: Partial<Animated.AnimateProps<import("react-native").ViewProps>> | undefined;
|
|
65
|
+
layout?: import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").LayoutAnimationFunction | typeof import("react-native-reanimated").BaseAnimationBuilder | undefined;
|
|
66
|
+
entering?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
|
|
67
|
+
exiting?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
|
|
64
68
|
} & {
|
|
65
69
|
progress: Animated.Node<number>;
|
|
66
70
|
onPress: () => void;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import Animated from 'react-native-reanimated';
|
|
3
3
|
declare const Overlay: React.ForwardRefExoticComponent<{
|
|
4
|
+
children?: React.ReactNode | Animated.Node<React.ReactNode>;
|
|
4
5
|
hitSlop?: import("react-native").Insets | Animated.Node<import("react-native").Insets | undefined> | undefined;
|
|
5
6
|
onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | Animated.Node<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
|
|
6
7
|
pointerEvents?: "none" | "auto" | "box-none" | "box-only" | Animated.Node<"none" | "auto" | "box-none" | "box-only" | undefined> | undefined;
|
|
@@ -61,6 +62,9 @@ declare const Overlay: React.ForwardRefExoticComponent<{
|
|
|
61
62
|
accessibilityIgnoresInvertColors?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
62
63
|
} & {
|
|
63
64
|
animatedProps?: Partial<Animated.AnimateProps<import("react-native").ViewProps>> | undefined;
|
|
65
|
+
layout?: import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").LayoutAnimationFunction | typeof import("react-native-reanimated").BaseAnimationBuilder | undefined;
|
|
66
|
+
entering?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
|
|
67
|
+
exiting?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
|
|
64
68
|
} & {
|
|
65
69
|
progress: Animated.SharedValue<number>;
|
|
66
70
|
onPress: () => void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/drawer",
|
|
3
3
|
"description": "Drawer navigator component with animated transitions and gesturess",
|
|
4
|
-
"version": "6.
|
|
4
|
+
"version": "6.3.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native-component",
|
|
7
7
|
"react-component",
|
|
@@ -41,23 +41,23 @@
|
|
|
41
41
|
"clean": "del lib"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@react-navigation/elements": "^1.1
|
|
44
|
+
"@react-navigation/elements": "^1.3.1",
|
|
45
45
|
"color": "^3.1.3",
|
|
46
46
|
"warn-once": "^0.1.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@react-navigation/native": "^6.0.
|
|
49
|
+
"@react-navigation/native": "^6.0.8",
|
|
50
50
|
"@testing-library/react-native": "^7.2.0",
|
|
51
51
|
"@types/react": "^17.0.9",
|
|
52
52
|
"@types/react-native": "~0.64.9",
|
|
53
53
|
"del-cli": "^3.0.1",
|
|
54
|
-
"react": "
|
|
55
|
-
"react-native": "~0.
|
|
54
|
+
"react": "17.0.1",
|
|
55
|
+
"react-native": "~0.64.3",
|
|
56
56
|
"react-native-builder-bob": "^0.18.1",
|
|
57
|
-
"react-native-gesture-handler": "~
|
|
58
|
-
"react-native-reanimated": "~2.
|
|
59
|
-
"react-native-safe-area-context": "
|
|
60
|
-
"react-native-screens": "~3.
|
|
57
|
+
"react-native-gesture-handler": "~2.2.0",
|
|
58
|
+
"react-native-reanimated": "~2.3.1",
|
|
59
|
+
"react-native-safe-area-context": "3.3.2",
|
|
60
|
+
"react-native-screens": "~3.10.1",
|
|
61
61
|
"typescript": "^4.3.2"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
]
|
|
84
84
|
]
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "4cddbce150413c15db93897c76b813f436f5186d"
|
|
87
87
|
}
|
package/src/index.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
DrawerNavigationState,
|
|
6
6
|
DrawerRouter,
|
|
7
7
|
DrawerRouterOptions,
|
|
8
|
+
DrawerStatus,
|
|
8
9
|
ParamListBase,
|
|
9
10
|
useNavigationBuilder,
|
|
10
11
|
} from '@react-navigation/native';
|
|
@@ -29,19 +30,23 @@ type Props = DefaultNavigatorOptions<
|
|
|
29
30
|
|
|
30
31
|
function DrawerNavigator({
|
|
31
32
|
initialRouteName,
|
|
32
|
-
defaultStatus,
|
|
33
|
+
defaultStatus: customDefaultStatus,
|
|
33
34
|
backBehavior,
|
|
34
35
|
children,
|
|
35
36
|
screenListeners,
|
|
36
37
|
screenOptions,
|
|
37
|
-
|
|
38
|
-
openByDefault,
|
|
39
|
-
// @ts-expect-error: lazy is deprecated
|
|
40
|
-
lazy,
|
|
41
|
-
// @ts-expect-error: drawerContentOptions is deprecated
|
|
42
|
-
drawerContentOptions,
|
|
43
|
-
...rest
|
|
38
|
+
...restWithDeprecated
|
|
44
39
|
}: Props) {
|
|
40
|
+
const {
|
|
41
|
+
// @ts-expect-error: openByDefault is deprecated
|
|
42
|
+
openByDefault,
|
|
43
|
+
// @ts-expect-error: lazy is deprecated
|
|
44
|
+
lazy,
|
|
45
|
+
// @ts-expect-error: drawerContentOptions is deprecated
|
|
46
|
+
drawerContentOptions,
|
|
47
|
+
...rest
|
|
48
|
+
} = restWithDeprecated;
|
|
49
|
+
|
|
45
50
|
let defaultScreenOptions: DrawerNavigationOptions = {};
|
|
46
51
|
|
|
47
52
|
if (drawerContentOptions) {
|
|
@@ -92,6 +97,13 @@ function DrawerNavigator({
|
|
|
92
97
|
);
|
|
93
98
|
}
|
|
94
99
|
|
|
100
|
+
const defaultStatus: DrawerStatus =
|
|
101
|
+
customDefaultStatus !== undefined
|
|
102
|
+
? customDefaultStatus
|
|
103
|
+
: openByDefault
|
|
104
|
+
? 'open'
|
|
105
|
+
: 'closed';
|
|
106
|
+
|
|
95
107
|
const { state, descriptors, navigation, NavigationContent } =
|
|
96
108
|
useNavigationBuilder<
|
|
97
109
|
DrawerNavigationState<ParamListBase>,
|
|
@@ -101,12 +113,7 @@ function DrawerNavigator({
|
|
|
101
113
|
DrawerNavigationEventMap
|
|
102
114
|
>(DrawerRouter, {
|
|
103
115
|
initialRouteName,
|
|
104
|
-
defaultStatus
|
|
105
|
-
defaultStatus !== undefined
|
|
106
|
-
? defaultStatus
|
|
107
|
-
: openByDefault
|
|
108
|
-
? 'open'
|
|
109
|
-
: 'closed',
|
|
116
|
+
defaultStatus,
|
|
110
117
|
backBehavior,
|
|
111
118
|
children,
|
|
112
119
|
screenListeners,
|
|
@@ -118,6 +125,7 @@ function DrawerNavigator({
|
|
|
118
125
|
<NavigationContent>
|
|
119
126
|
<DrawerView
|
|
120
127
|
{...rest}
|
|
128
|
+
defaultStatus={defaultStatus}
|
|
121
129
|
state={state}
|
|
122
130
|
descriptors={descriptors}
|
|
123
131
|
navigation={navigation}
|
package/src/types.tsx
CHANGED
|
@@ -110,6 +110,11 @@ export type DrawerNavigationOptions = HeaderOptions & {
|
|
|
110
110
|
*/
|
|
111
111
|
drawerInactiveBackgroundColor?: string;
|
|
112
112
|
|
|
113
|
+
/**
|
|
114
|
+
* Whether label font should scale to respect Text Size accessibility settings.
|
|
115
|
+
*/
|
|
116
|
+
drawerAllowFontScaling?: boolean;
|
|
117
|
+
|
|
113
118
|
/**
|
|
114
119
|
* Style object for the single item, which can contain an icon and/or a label.
|
|
115
120
|
*/
|
|
@@ -242,7 +247,12 @@ export type DrawerHeaderProps = {
|
|
|
242
247
|
navigation: DrawerNavigationProp<ParamListBase>;
|
|
243
248
|
};
|
|
244
249
|
|
|
245
|
-
export type DrawerNavigationEventMap = {
|
|
250
|
+
export type DrawerNavigationEventMap = {
|
|
251
|
+
/**
|
|
252
|
+
* Event which fires on tapping on the item in the drawer menu.
|
|
253
|
+
*/
|
|
254
|
+
drawerItemPress: { data: undefined; canPreventDefault: true };
|
|
255
|
+
};
|
|
246
256
|
|
|
247
257
|
export type DrawerNavigationHelpers = NavigationHelpers<
|
|
248
258
|
ParamListBase,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import type { DrawerStatus } from '@react-navigation/native';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
|
|
3
|
-
const DrawerStatusContext =
|
|
4
|
-
|
|
4
|
+
const DrawerStatusContext = React.createContext<DrawerStatus | undefined>(
|
|
5
|
+
undefined
|
|
6
|
+
);
|
|
5
7
|
|
|
6
8
|
export default DrawerStatusContext;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type {
|
|
2
2
|
DrawerNavigationState,
|
|
3
|
+
DrawerStatus,
|
|
3
4
|
ParamListBase,
|
|
4
5
|
} from '@react-navigation/native';
|
|
5
6
|
|
|
6
7
|
export default function getDrawerStatusFromState(
|
|
7
8
|
state: DrawerNavigationState<ParamListBase>
|
|
8
|
-
) {
|
|
9
|
+
): DrawerStatus {
|
|
9
10
|
if (state.history == null) {
|
|
10
11
|
throw new Error(
|
|
11
12
|
"Couldn't find the drawer status in the state object. Is it a valid state object of drawer navigator?"
|
|
@@ -13,8 +14,8 @@ export default function getDrawerStatusFromState(
|
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
const entry = state.history.find((it) => it.type === 'drawer') as
|
|
16
|
-
| { type: 'drawer'; status:
|
|
17
|
+
| { type: 'drawer'; status: DrawerStatus }
|
|
17
18
|
| undefined;
|
|
18
19
|
|
|
19
|
-
return entry?.status ?? 'closed';
|
|
20
|
+
return entry?.status ?? state.default ?? 'closed';
|
|
20
21
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { DrawerStatus } from '@react-navigation/native';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
|
|
3
4
|
import DrawerStatusContext from './DrawerStatusContext';
|
|
@@ -6,7 +7,7 @@ import DrawerStatusContext from './DrawerStatusContext';
|
|
|
6
7
|
* Hook to detect if the drawer's status in a parent navigator.
|
|
7
8
|
* Returns 'open' if the drawer is open, 'closed' if the drawer is closed.
|
|
8
9
|
*/
|
|
9
|
-
export default function useDrawerStatus() {
|
|
10
|
+
export default function useDrawerStatus(): DrawerStatus {
|
|
10
11
|
const drawerStatus = React.useContext(DrawerStatusContext);
|
|
11
12
|
|
|
12
13
|
if (drawerStatus === undefined) {
|
package/src/views/DrawerItem.tsx
CHANGED
|
@@ -77,6 +77,10 @@ type Props = {
|
|
|
77
77
|
* Style object for the wrapper element.
|
|
78
78
|
*/
|
|
79
79
|
style?: StyleProp<ViewStyle>;
|
|
80
|
+
/**
|
|
81
|
+
* Whether label font should scale to respect Text Size accessibility settings.
|
|
82
|
+
*/
|
|
83
|
+
allowFontScaling?: boolean;
|
|
80
84
|
};
|
|
81
85
|
|
|
82
86
|
const LinkPressable = ({
|
|
@@ -141,6 +145,7 @@ export default function DrawerItem(props: Props) {
|
|
|
141
145
|
labelStyle,
|
|
142
146
|
to,
|
|
143
147
|
focused = false,
|
|
148
|
+
allowFontScaling,
|
|
144
149
|
activeTintColor = colors.primary,
|
|
145
150
|
inactiveTintColor = Color(colors.text).alpha(0.68).rgb().string(),
|
|
146
151
|
activeBackgroundColor = Color(activeTintColor).alpha(0.12).rgb().string(),
|
|
@@ -186,6 +191,7 @@ export default function DrawerItem(props: Props) {
|
|
|
186
191
|
{typeof label === 'string' ? (
|
|
187
192
|
<Text
|
|
188
193
|
numberOfLines={1}
|
|
194
|
+
allowFontScaling={allowFontScaling}
|
|
189
195
|
style={[
|
|
190
196
|
{
|
|
191
197
|
color,
|
|
@@ -39,12 +39,31 @@ export default function DrawerItemList({
|
|
|
39
39
|
|
|
40
40
|
return state.routes.map((route, i) => {
|
|
41
41
|
const focused = i === state.index;
|
|
42
|
+
|
|
43
|
+
const onPress = () => {
|
|
44
|
+
const event = navigation.emit({
|
|
45
|
+
type: 'drawerItemPress',
|
|
46
|
+
target: route.key,
|
|
47
|
+
canPreventDefault: true,
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
if (!event.defaultPrevented) {
|
|
51
|
+
navigation.dispatch({
|
|
52
|
+
...(focused
|
|
53
|
+
? DrawerActions.closeDrawer()
|
|
54
|
+
: CommonActions.navigate({ name: route.name, merge: true })),
|
|
55
|
+
target: state.key,
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
42
60
|
const {
|
|
43
61
|
title,
|
|
44
62
|
drawerLabel,
|
|
45
63
|
drawerIcon,
|
|
46
64
|
drawerLabelStyle,
|
|
47
65
|
drawerItemStyle,
|
|
66
|
+
drawerAllowFontScaling,
|
|
48
67
|
} = descriptors[route.key].options;
|
|
49
68
|
|
|
50
69
|
return (
|
|
@@ -63,17 +82,11 @@ export default function DrawerItemList({
|
|
|
63
82
|
inactiveTintColor={drawerInactiveTintColor}
|
|
64
83
|
activeBackgroundColor={drawerActiveBackgroundColor}
|
|
65
84
|
inactiveBackgroundColor={drawerInactiveBackgroundColor}
|
|
85
|
+
allowFontScaling={drawerAllowFontScaling}
|
|
66
86
|
labelStyle={drawerLabelStyle}
|
|
67
87
|
style={drawerItemStyle}
|
|
68
88
|
to={buildLink(route.name, route.params)}
|
|
69
|
-
onPress={
|
|
70
|
-
navigation.dispatch({
|
|
71
|
-
...(focused
|
|
72
|
-
? DrawerActions.closeDrawer()
|
|
73
|
-
: CommonActions.navigate({ name: route.name, merge: true })),
|
|
74
|
-
target: state.key,
|
|
75
|
-
});
|
|
76
|
-
}}
|
|
89
|
+
onPress={onPress}
|
|
77
90
|
/>
|
|
78
91
|
);
|
|
79
92
|
}) as React.ReactNode as React.ReactElement;
|