chore: updated props naming (#89)

* chore: updated current props

* chore: updated examples

Author: gorhom

example/src/components/handle/Handle.tsx

@@ -8,36 +8,36 @@ interface HandleProps extends BottomSheetHandleProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
+const Handle: React.FC<HandleProps> = ({ style, animatedIndex }) => {
   //#region animations
   const borderTopRadius = useMemo(
     () =>
-      interpolate(animatedPositionIndex, {
+      interpolate(animatedIndex, {
         inputRange: [1, 2],
         outputRange: [20, 0],
         extrapolate: Extrapolate.CLAMP,
       }),
-    [animatedPositionIndex]
+    [animatedIndex]
   );
   const indicatorTransformOriginY = useMemo(
     () =>
-      interpolate(animatedPositionIndex, {
+      interpolate(animatedIndex, {
         inputRange: [0, 1, 2],
         outputRange: [-1, 0, 1],
         extrapolate: Extrapolate.CLAMP,
       }),
-    [animatedPositionIndex]
+    [animatedIndex]
   );
   const leftIndicatorRotate = useMemo(
     () =>
-      interpolate(animatedPositionIndex, {
+      interpolate(animatedIndex, {
         inputRange: [0, 1, 2],
         outputRange: [toRad(-30), 0, toRad(30)],
         extrapolate: Extrapolate.CLAMP,
       }),
-    [animatedPositionIndex]
+    [animatedIndex]
   );
-  const rightIndicatorRotate = interpolate(animatedPositionIndex, {
+  const rightIndicatorRotate = interpolate(animatedIndex, {
     inputRange: [0, 1, 2],
     outputRange: [toRad(30), 0, toRad(-30)],
     extrapolate: Extrapolate.CLAMP,

example/src/screens/advanced/CustomHandleExample.tsx

@@ -69,8 +69,8 @@ const CustomHandleExample = () => {
       />
       <BottomSheet
         ref={bottomSheetRef}
+        index={1}
         snapPoints={snapPoints}
-        initialSnapIndex={1}
         handleComponent={Handle}
       >
         <ContactList type="View" count={3} header={renderHeader} />

example/src/screens/advanced/DynamicSnapPointExample.tsx

@@ -79,8 +79,8 @@ const DynamicSnapPointExample = () => {
       />
       <BottomSheet
         ref={bottomSheetRef}
+        index={1}
         snapPoints={snapPoints}
-        initialSnapIndex={1}
         animateOnMount={true}
         animationEasing={Easing.out(Easing.quad)}
         animationDuration={250}

example/src/screens/advanced/MapExample.tsx

@@ -45,7 +45,7 @@ const MapExample = () => {
   );
   const animatedPosition = useValue<number>(0);
   const animatedModalPosition = useValue<number>(0);
-  const animatedPositionIndex = useValue<number>(0);
+  const animatedIndex = useValue<number>(0);
   const animatedOverlayOpacity = useMemo(
     () =>
       interpolate(animatedPosition, {
@@ -87,7 +87,7 @@ const MapExample = () => {
       present(
         <LocationDetails onClose={handleCloseLocationDetails} {...item} />,
         {
-          initialSnapIndex: 1,
+          index: 1,
           snapPoints,
           topInset: topSafeArea,
           animatedPosition: animatedModalPosition,
@@ -115,7 +115,7 @@ const MapExample = () => {
     () => [
       styles.contentContainerStyle,
       {
-        opacity: interpolate(animatedPositionIndex, {
+        opacity: interpolate(animatedIndex, {
           inputRange: [0, 1],
           outputRange: [0, 1],
           extrapolate: Extrapolate.CLAMP,
@@ -168,16 +168,16 @@ const MapExample = () => {
       />
       <BottomSheet
         ref={bottomSheetRef}
+        index={1}
         snapPoints={snapPoints}
-        initialSnapIndex={1}
         topInset={topSafeArea}
         animatedPosition={animatedPosition}
-        animatedPositionIndex={animatedPositionIndex}
+        animatedIndex={animatedIndex}
         animationDuration={500}
         animationEasing={Easing.out(Easing.exp)}
+        onChange={handleSheetChanges}
         handleComponent={SearchHandle}
         backgroundComponent={BlurredBackground}
-        onChange={handleSheetChanges}
       >
         <BottomSheetScrollView
           keyboardDismissMode="on-drag"

example/src/screens/advanced/NavigatorExample.tsx

@@ -127,8 +127,8 @@ const NavigatorExample = () => {
       />
       <BottomSheet
         ref={bottomSheetRef}
+        index={1}
         snapPoints={snapPoints}
-        initialSnapIndex={1}
         onChange={handleSheetChange}
       >
         <Navigator />

example/src/screens/advanced/OverlayExample.tsx

@@ -12,13 +12,13 @@ const OverlayExample = () => {
 
   // variables
   const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-  const animatedPositionIndex = useValue<number>(0);
+  const animatedIndex = useValue<number>(0);
 
   // styles
   const shadowOverlayStyle = useMemo(
     () => ({
       ...styles.shadowOverlay,
-      opacity: interpolate(animatedPositionIndex, {
+      opacity: interpolate(animatedIndex, {
         inputRange: [0, 2],
         outputRange: [0, 1],
         extrapolate: Extrapolate.CLAMP,
@@ -89,9 +89,9 @@ const OverlayExample = () => {
       <Animated.View pointerEvents="none" style={shadowOverlayStyle} />
       <BottomSheet
         ref={bottomSheetRef}
+        index={1}
         snapPoints={snapPoints}
-        initialSnapIndex={1}
-        animatedPositionIndex={animatedPositionIndex}
+        animatedIndex={animatedIndex}
         onChange={handleSheetChanges}
       >
         <ContactList type="View" count={3} header={renderHeader} />

example/src/screens/modal/StackExample.tsx

@@ -35,8 +35,8 @@ const StackExample = () => {
   }, [dismissB]);
   const handlePresentCPress = useCallback(() => {
     presentC(<ContactListContainer title="Modal C" type="SectionList" />, {
+      index: 1,
       snapPoints: ['25%', '50%'],
-      initialSnapIndex: 1,
       animationDuration: 250,
       dismissOnScrollDown: false,
     });

example/src/screens/static/BasicExample.tsx

@@ -63,8 +63,8 @@ const BasicExample = () => {
       <ReText text={concat('Position from bottom: ', position)} />
       <BottomSheet
         ref={bottomSheetRef}
+        index={1}
         snapPoints={snapPoints}
-        initialSnapIndex={1}
         topInset={topSafeArea}
         animatedPosition={position}
         onChange={handleSheetChanges}

example/src/screens/static/BasicExamples.tsx

@@ -109,8 +109,8 @@ const createExampleScreen = ({ type, count = 20 }: ExampleScreenProps) =>
         />
         <BottomSheet
           ref={bottomSheetRef}
+          index={1}
           snapPoints={snapPoints}
-          initialSnapIndex={1}
           animateOnMount={true}
           enableContentPanningGesture={enableContentPanningGesture}
           enableHandlePanningGesture={enableHandlePanningGesture}

src/components/bottomSheet/BottomSheet.tsx

@@ -74,11 +74,11 @@ Animated.addWhitelistedUIProps({
 const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
   (
     {
-      // animations
+      // animations configurations
       animationDuration = DEFAULT_ANIMATION_DURATION,
       animationEasing = DEFAULT_ANIMATION_EASING,
       // configurations
-      initialSnapIndex = 0,
+      index: initialSnapIndex = 0,
       snapPoints: _snapPoints,
       handleHeight: _handleHeight,
       topInset = 0,
@@ -90,8 +90,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       containerTapGestureRef,
       containerTapGestureState,
       // animated nodes callback
-      animatedPosition: _animatedPosition,
-      animatedPositionIndex: _animatedPositionIndex,
+      animatedPosition: _animatedPositionCallbackNode,
+      animatedIndex: _animatedIndexCallbackNode,
       // callbacks
       onChange: _onChange,
       // components
@@ -219,7 +219,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       initialPosition,
     });
 
-    const animatedPositionIndex = useMemo(
+    // animated values
+    const animatedIndex = useMemo(
       () =>
         interpolate(position, {
           inputRange: snapPoints.slice().reverse(),
@@ -231,6 +232,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }),
       [position, snapPoints]
     );
+
+    const animatedPosition = useMemo(
+      () => abs(sub(containerHeight, position)),
+      [containerHeight, position]
+    );
+
     /**
      * Scrollable animated props.
      */
@@ -453,18 +460,25 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const renderBackground = useCallback(
       () =>
         BackgroundComponent ? (
-          <BackgroundComponent pointerEvents="none" />
+          <BackgroundComponent
+            pointerEvents="none"
+            animatedIndex={animatedIndex}
+            animatedPosition={animatedPosition}
+          />
         ) : null,
-      [BackgroundComponent]
+      [BackgroundComponent, animatedIndex, animatedPosition]
     );
     const renderHandle = useCallback(
       () =>
         HandleComponent === null ? null : HandleComponent === undefined ? (
           <DefaultHandle />
         ) : (
-          <HandleComponent animatedPositionIndex={animatedPositionIndex} />
+          <HandleComponent
+            animatedIndex={animatedIndex}
+            animatedPosition={animatedPosition}
+          />
         ),
-      [HandleComponent, animatedPositionIndex]
+      [HandleComponent, animatedIndex, animatedPosition]
     );
     return (
       <>
@@ -491,15 +505,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           </BottomSheetProvider>
         </Animated.View>
 
-        {_animatedPosition && (
+        {_animatedPositionCallbackNode && (
           <Animated.Code
-            exec={set(_animatedPosition, abs(sub(containerHeight, position)))}
+            exec={set(_animatedPositionCallbackNode, animatedPosition)}
           />
         )}
 
-        {_animatedPositionIndex && (
+        {_animatedIndexCallbackNode && (
           <Animated.Code
-            exec={set(_animatedPositionIndex, animatedPositionIndex)}
+            exec={set(_animatedIndexCallbackNode, animatedIndex)}
           />
         )}
         {/* <Animated.View pointerEvents="none" style={styles.debug}>