diff --git a/example/index.ts b/example/index.ts index fa9ef267f..d3c277a28 100644 --- a/example/index.ts +++ b/example/index.ts @@ -1,9 +1,12 @@ import 'react-native-gesture-handler'; -import { AppRegistry } from 'react-native'; + import { enableScreens } from 'react-native-screens'; +enableScreens(true); + +import { AppRegistry, LogBox } from 'react-native'; import App from './src/App'; import { name as appName } from './app.json'; -enableScreens(true); +LogBox.ignoreLogs(['react-native-maps']); AppRegistry.registerComponent(appName, () => App); diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index b45769367..1e633c507 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -304,7 +304,7 @@ PODS: - React-jsi (= 0.63.4) - RNCMaskedView (0.1.10): - React - - RNGestureHandler (1.9.0): + - RNGestureHandler (1.10.1): - React-Core - RNReanimated (1.13.2): - React-Core @@ -494,7 +494,7 @@ SPEC CHECKSUMS: React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f - RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b + RNGestureHandler: 5e58135436aacc1c5d29b75547d3d2b9430d052c RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad RNScreens: 2ad555d4d9fa10b91bb765ca07fe9b29d59573f0 Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6 @@ -502,4 +502,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 2267d8962573316d00ae86f0e09e0dab238ae5b5 -COCOAPODS: 1.9.3 +COCOAPODS: 1.10.1 diff --git a/example/package.json b/example/package.json index 356e53105..94f9c50b3 100644 --- a/example/package.json +++ b/example/package.json @@ -19,7 +19,7 @@ "lodash.isequal": "^4.5.0", "react": "16.13.1", "react-native": "0.63.4", - "react-native-gesture-handler": "^1.9.0", + "react-native-gesture-handler": "^1.10.1", "react-native-maps": "^0.27.1", "react-native-reanimated": "^1.13.2", "react-native-redash": "^14.2.4", diff --git a/example/src/screens/advanced/MapExample.tsx b/example/src/screens/advanced/MapExample.tsx index 994871602..43fa358e1 100644 --- a/example/src/screens/advanced/MapExample.tsx +++ b/example/src/screens/advanced/MapExample.tsx @@ -47,7 +47,7 @@ const MapExample = () => { const data = useMemo(() => createLocationListMockData(15), []); const poiListSnapPoints = useMemo( () => [ - SEARCH_HANDLE_HEIGHT, + bottomSafeArea, LOCATION_DETAILS_HEIGHT + bottomSafeArea, SCREEN_HEIGHT, ], @@ -160,6 +160,7 @@ const MapExample = () => { index={1} snapPoints={poiListSnapPoints} topInset={topSafeArea} + handleHeight={SEARCH_HANDLE_HEIGHT} animatedPosition={animatedPosition} animatedIndex={animatedIndex} dismissOnPanDown={false} @@ -199,7 +200,6 @@ const MapExample = () => { const styles = StyleSheet.create({ container: { flex: 1, - padding: 24, }, mapContainer: { ...StyleSheet.absoluteFillObject, diff --git a/example/src/screens/modal/SimpleExample.tsx b/example/src/screens/modal/SimpleExample.tsx index 66fe9412d..27dd1cef6 100644 --- a/example/src/screens/modal/SimpleExample.tsx +++ b/example/src/screens/modal/SimpleExample.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useRef } from 'react'; +import React, { useCallback, useMemo, useRef } from 'react'; import { View, StyleSheet } from 'react-native'; import { BottomSheetModal } from '@gorhom/bottom-sheet'; import Button from '../../components/button'; @@ -8,6 +8,9 @@ import withModalProvider from '../withModalProvider'; const SimpleExample = () => { const bottomSheetRef = useRef(null); + // variables + const snapPoints = useMemo(() => ['25%', '50%'], []); + // callbacks const handleChange = useCallback((index: number) => { // eslint-disable-next-line no-console @@ -55,7 +58,7 @@ const SimpleExample = () => { /> ( const snapPoints = useNormalizedSnapPoints( _providedSnapPoints, - topInset + bottomInset, safeContainerHeight, safeHandleHeight ); @@ -199,9 +198,9 @@ const BottomSheetComponent = forwardRef( const initialPosition = useMemo(() => { return currentIndexRef.current < 0 || animateOnMount - ? safeContainerHeight - topInset + ? safeContainerHeight : snapPoints[currentIndexRef.current]; - }, [snapPoints, animateOnMount, safeContainerHeight, topInset]); + }, [snapPoints, animateOnMount, safeContainerHeight]); //#endregion //#region gestures @@ -452,20 +451,14 @@ const BottomSheetComponent = forwardRef( { translateY: cond( animatedIsLayoutReady, - sub(position, bottomInset), + position, safeContainerHeight ), }, ], }, ], - [ - safeContainerHeight, - _providedStyle, - position, - animatedIsLayoutReady, - bottomInset, - ] + [safeContainerHeight, _providedStyle, position, animatedIsLayoutReady] ); const contentContainerStyle = useMemo( () => ({ diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index acc77e69c..9191ddd3d 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -32,6 +32,8 @@ const BottomSheetModalComponent = forwardRef< index: _providedIndex = 0, snapPoints: _providedSnapPoints, onChange: _providedOnChange, + topInset = 0, + bottomInset = 0, // components children, @@ -71,6 +73,10 @@ const BottomSheetModalComponent = forwardRef< dismissOnPanDown ? [0, ..._providedSnapPoints] : _providedSnapPoints, [_providedSnapPoints, dismissOnPanDown] ); + const safeContainerHeight = useMemo( + () => containerHeight - topInset - bottomInset, + [containerHeight, topInset, bottomInset] + ); //#endregion //#region callbacks @@ -215,7 +221,9 @@ const BottomSheetModalComponent = forwardRef< index={index} snapPoints={snapPoints} animateOnMount={true} - containerHeight={containerHeight} + topInset={topInset} + bottomInset={bottomInset} + containerHeight={safeContainerHeight} onChange={handleOnChange} children={children} /> diff --git a/src/hooks/useNormalizedSnapPoints.ts b/src/hooks/useNormalizedSnapPoints.ts index 3f2746328..46c95284c 100644 --- a/src/hooks/useNormalizedSnapPoints.ts +++ b/src/hooks/useNormalizedSnapPoints.ts @@ -3,15 +3,13 @@ import { normalizeSnapPoints } from '../utilities'; export const useNormalizedSnapPoints = ( snapPoints: Array, - verticalInset: number, containerHeight: number = 0, handleHeight: number = 0 ) => useMemo(() => { const normalizedSnapPoints = normalizeSnapPoints( snapPoints, - containerHeight, - verticalInset + containerHeight ); return normalizedSnapPoints.map(normalizedSnapPoint => { /** @@ -21,9 +19,6 @@ export const useNormalizedSnapPoints = ( if (normalizedSnapPoint === 0 && handleHeight !== 0) { normalizedSnapPoint = normalizedSnapPoint - handleHeight; } - return Math.max( - containerHeight - normalizedSnapPoint - handleHeight, - verticalInset - ); + return Math.max(containerHeight - normalizedSnapPoint - handleHeight, 0); }); - }, [snapPoints, verticalInset, containerHeight, handleHeight]); + }, [snapPoints, containerHeight, handleHeight]); diff --git a/src/utilities/normalizeSnapPoints.ts b/src/utilities/normalizeSnapPoints.ts index 081077c9e..9fff11744 100644 --- a/src/utilities/normalizeSnapPoints.ts +++ b/src/utilities/normalizeSnapPoints.ts @@ -5,13 +5,11 @@ import { validateSnapPoint } from './validateSnapPoint'; */ export const normalizeSnapPoints = ( snapPoints: Array, - containerHeight: number, - verticalInset: number + containerHeight: number ) => snapPoints.map(snapPoint => { validateSnapPoint(snapPoint); return typeof snapPoint === 'number' ? snapPoint - : (Number(snapPoint.split('%')[0]) * (containerHeight - verticalInset)) / - 100; + : (Number(snapPoint.split('%')[0]) * containerHeight) / 100; });