added reproducer for backdrop flickering

schiller-manuel · May 10, 2021 · 86b628e · 86b628e
1 parent b5a6c65
commit 86b628e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/example/src/screens/modal/DynamicSnapPointExample.tsx b/example/src/screens/modal/DynamicSnapPointExample.tsx
@@ -1,6 +1,10 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Button from '../../components/button';
 import withModalProvider from '../withModalProvider';
@@ -63,7 +67,12 @@ const DynamicSnapPointExample = () => {
     <View style={styles.container}>
       <Button label="Present" onPress={handlePresentPress} />
       <Button label="Dismiss" onPress={handleDismissPress} />
-      <BottomSheetModal ref={bottomSheetRef} index={0} snapPoints={snapPoints}>
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        index={0}
+        snapPoints={snapPoints}
+        backdropComponent={BottomSheetBackdrop}
+      >
         <BottomSheetView
           style={contentContainerStyle}
           onLayout={handleOnLayout}

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -69,6 +69,7 @@ import {
 import type { ScrollableRef, BottomSheetMethods } from '../../types';
 import type { BottomSheetProps } from './types';
 import { styles } from './styles';
+import BottomSheetDebugView from '../bottomSheetDebugView';
 
 Animated.addWhitelistedUIProps({
   decelerationRate: true,
@@ -864,6 +865,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     useAnimatedReaction(
       () => animatedIndex.value,
       value => {
+        console.log('animatedIndex', animatedIndex.value)
         if (_providedAnimatedIndex) {
           _providedAnimatedIndex.value = value;
         }
@@ -968,7 +970,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               />
             </BottomSheetInternalProvider>
           </Animated.View>
-          {/* <BottomSheetDebugView
+          <BottomSheetDebugView
             values={{
               animatedIndex,
               animatedPosition,
@@ -980,7 +982,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               scrollableState,
               isExtendedByKeyboard,
             }}
-          /> */}
+          />
         </BottomSheetContainer>
       </BottomSheetProvider>
     );