fix: initial mounting flicker (#115)

* chore: updated hooks dependencies for some variables * chore: updated initial opacity control to be in native thread * chore: rename internal components * chore: updated examples
gorhom · Dec 15, 2020 · 113da47 · 113da47
1 parent fe2d385
commit 113da47
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 29 deletions.
diff --git a/example/src/components/appearanceProvider/AppearanceProvider.tsx b/example/src/components/appearanceProvider/AppearanceProvider.tsx
@@ -34,8 +34,7 @@ const AppearanceProvider = ({ children }: AppearanceProviderProps) => {
     return () => {
       Appearance.removeChangeListener(handleAppearanceChange);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [handleAppearanceChange]);
   return (
     <AppearanceContext.Provider value={contextValue}>
       {children}

diff --git a/example/src/components/weather/Weather.tsx b/example/src/components/weather/Weather.tsx
@@ -42,8 +42,7 @@ const Weather = ({ animatedPosition, snapPoints }: WeatherProps) => {
         },
       ],
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [snapPoints, appearance]
+    [appearance, animatedPosition, snapPoints]
   );
   return (
     <Animated.View style={containerStyle}>

diff --git a/example/src/screens/advanced/MapExample.tsx b/example/src/screens/advanced/MapExample.tsx
@@ -185,7 +185,6 @@ const MapExample = () => {
         topInset={topSafeArea}
         animatedPosition={animatedModalPosition}
         handleComponent={LocationDetailsHandle}
-        backdropComponent={renderBackdrop}
         backgroundComponent={BlurredBackground}
       >
         <LocationDetails

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -44,6 +44,7 @@ import {
   useScrollable,
   useNormalizedSnapPoints,
   usePropsValidator,
+  useReactiveValue,
 } from '../../hooks';
 import {
   BottomSheetInternalProvider,
@@ -154,6 +155,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [containerHeight, handleHeight]
     );
+    const animatedIsLayoutReady = useReactiveValue(isLayoutCalculated ? 1 : 0);
+
     //#endregion
 
     //#region variables
@@ -233,10 +236,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       handlePanGestureTranslationY,
       handlePanGestureVelocityY,
       scrollableContentOffsetY,
+      animatedIsLayoutReady,
       snapPoints,
       initialPosition,
       currentIndexRef,
-      isLayoutCalculated,
       onAnimate: handleOnAnimate,
     });
 
@@ -406,12 +409,18 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const containerStyle = useMemo<Animated.AnimateStyle<ViewStyle>>(
       () => ({
         ...styles.container,
-        opacity: isLayoutCalculated ? 1 : 0,
+        opacity: animatedIsLayoutReady,
         transform: [
-          { translateY: isLayoutCalculated ? position : safeContainerHeight },
+          {
+            translateY: cond(
+              animatedIsLayoutReady,
+              position,
+              safeContainerHeight
+            ),
+          },
         ],
       }),
-      [safeContainerHeight, position, isLayoutCalculated]
+      [safeContainerHeight, position, animatedIsLayoutReady]
     );
     const contentContainerStyle = useMemo(
       () => ({

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -129,7 +129,7 @@ export interface BottomSheetAnimationConfigs {
 export interface BottomSheetTransitionConfig
   extends Required<BottomSheetAnimationConfigs>,
     Pick<BottomSheetProps, 'onAnimate'> {
-  isLayoutCalculated: boolean;
+  animatedIsLayoutReady: Animated.Value<number>;
 
   contentPanGestureState: Animated.Value<State>;
   contentPanGestureTranslationY: Animated.Value<number>;

diff --git a/src/components/bottomSheet/useTransition.ts b/src/components/bottomSheet/useTransition.ts
@@ -27,7 +27,7 @@ import { useReactiveValue, useReactiveValues } from '../../hooks';
 import type { BottomSheetTransitionConfig } from './types';
 
 export const useTransition = ({
-  isLayoutCalculated,
+  animatedIsLayoutReady,
   animationDuration,
   animationEasing,
   contentPanGestureState,
@@ -42,7 +42,6 @@ export const useTransition = ({
   initialPosition,
   onAnimate,
 }: BottomSheetTransitionConfig) => {
-  const isReady = useReactiveValue(isLayoutCalculated ? 1 : 0);
   const currentGesture = useValue<GESTURE>(GESTURE.UNDETERMINED);
   const currentPosition = useReactiveValue(initialPosition);
   const snapPoints = useReactiveValues(_snapPoints);
@@ -154,7 +153,7 @@ export const useTransition = ({
     () =>
       block([
         cond(
-          eq(isReady, 1),
+          animatedIsLayoutReady,
           [
             // debug('current gesture', currentGesture),
             /**
@@ -309,7 +308,7 @@ export const useTransition = ({
         ),
       ]),
     [
-      isReady,
+      animatedIsLayoutReady,
       animationState,
       clock,
       config,

diff --git a/...ottomSheetDraggableView/DraggableView.tsx → ...raggableView/BottomSheetDraggableView.tsx b/...ottomSheetDraggableView/DraggableView.tsx → ...raggableView/BottomSheetDraggableView.tsx
@@ -65,8 +65,15 @@ const BottomSheetDraggableViewComponent = ({
               },
             },
           ]),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [gestureType]
+    [
+      gestureType,
+      contentPanGestureState,
+      contentPanGestureTranslationY,
+      contentPanGestureVelocityY,
+      handlePanGestureState,
+      handlePanGestureTranslationY,
+      handlePanGestureVelocityY,
+    ]
   );
 
   // effects

diff --git a/src/components/bottomSheetDraggableView/index.ts b/src/components/bottomSheetDraggableView/index.ts
@@ -1 +1 @@
-export { default } from './DraggableView';
+export { default } from './BottomSheetDraggableView';
diff --git a/src/components/view/View.tsx b/src/components/view/View.tsx
@@ -27,8 +27,7 @@ const BottomSheetViewComponent = ({
   // callback
   const handleSettingScrollable = useCallback(() => {
     scrollableContentOffsetY.setValue(0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [scrollableContentOffsetY]);
 
   // effects
   useFocusHook(handleSettingScrollable);

diff --git a/src/hooks/useBottomSheet.ts b/src/hooks/useBottomSheet.ts
@@ -1,6 +1,4 @@
 import { useContext } from 'react';
 import { BottomSheetContext } from '../contexts/external';
 
-export const useBottomSheet = () => {
-  return useContext(BottomSheetContext);
-};
+export const useBottomSheet = () => useContext(BottomSheetContext);
diff --git a/src/hooks/useBottomSheetInternal.ts b/src/hooks/useBottomSheetInternal.ts
@@ -1,6 +1,5 @@
 import { useContext } from 'react';
 import { BottomSheetInternalContext } from '../contexts/internal';
 
-export const useBottomSheetInternal = () => {
-  return useContext(BottomSheetInternalContext);
-};
+export const useBottomSheetInternal = () =>
+  useContext(BottomSheetInternalContext);
diff --git a/src/hooks/useScrollableInternal.ts b/src/hooks/useScrollableInternal.ts
@@ -28,8 +28,7 @@ export const useScrollableInternal = (type: ScrollableType) => {
           },
         },
       ]),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [scrollableContentOffsetY]
   );
   const handleSettingScrollable = useCallback(() => {
     _scrollableContentOffsetY.setValue(scrollableContentOffsetYRef.current);
@@ -50,8 +49,7 @@ export const useScrollableInternal = (type: ScrollableType) => {
     return () => {
       removeScrollableRef(scrollableRef);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [type, _scrollableContentOffsetY, removeScrollableRef, setScrollableRef]);
 
   // effects
   useCode(