Merge pull request atlj#2 from atlj/feature/spring-animations

Support for spring animations

Author: Burak Güner

README.md

@@ -7,7 +7,9 @@ A fast bottom modal that works with React Native Reanimated 2!
 ## Prerequisites
 
 This module needs
+
 [React Native Reanimated 2](https://docs.swmansion.com/react-native-reanimated/docs/installation) &
+
 [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) to work
 
 ## 🚀 Installation
@@ -17,45 +19,51 @@ First make sure that you have installed all the prerequisites.
 ### Using npm
 
 ```sh
+
 npm install react-native-lightning-modal
+
 ```
 
 ### Using Yarn
 
 ```sh
+
 yarn add react-native-lightning-modal
+
 ```
 
 ## ⚙️ Usage
 
 ### Using the useBottomModal hook 🪝
 
->This hook declares the ref for you
+> This hook declares the ref for you
 
 ```js
 import React from 'react';
+
 import { View } from 'react-native';
 
 import { useBottomModal, BottomModal } from 'react-native-lightning-modal';
 
 export default function App() {
   const { dismiss, show, modalProps } = useBottomModal();
+
   return (
     <View>
-      <BottomModal  height={500} {...modalProps}>
+      <BottomModal height={500} {...modalProps}>
         {/* Your Content */}
       </BottomModal>
     </View>
   );
 }
 ```
 
->Bottom modal component needs to be below other elements.
+> Bottom modal component needs to be below other elements.
 
 You can then use
 
 ```js
-show()
+show();
 ```
 
 to show the modal
@@ -66,12 +74,14 @@ to show the modal
 
 ```js
 import React from 'react';
+
 import { View } from 'react-native';
 
 import { BottomModal, BottomModalRef } from 'react-native-lightning-modal';
 
 export default function App() {
-  const bottomModalRef = React.useRef<BottomModalRef>(null);
+  const bottomModalRef = React.useRef < BottomModalRef > null;
+
   return (
     <View>
       <BottomModal height={500} ref={bottomModalRef}>
@@ -80,13 +90,12 @@ export default function App() {
     </View>
   );
 }
-
 ```
 
 You can than use
 
 ```js
-bottomModalRef.show()
+bottomModalRef.show();
 ```
 
 to show the modal
@@ -95,13 +104,15 @@ to show the modal
 
 ### PROPS
 
-|Prop name | Description| Type | Required
-| ----------- | ----------- | ----------- | ----------- |
-|height |Height of modal's presented state. This is required for animation to behave correctly | number | ✅ |
-| backdropColor | Basically the color of a fullscreen view displayed below modaL | string | ❌ |
-|style | Style of modal's container | ViewStyle | ❌ |
-| easing | Easing function which modal will be presented. | Animated.EasingFunction | ❌ |
-| duration | Modal animation's duration in milliseconds. | number | ❌ |
+| Prop Name         | Description                                                                           |            Type             | Required |                            Defaults to |
+| ----------------- | ------------------------------------------------------------------------------------- | :-------------------------: | :------: | -------------------------------------: |
+| **height**        | Height of modal's presented state. This is required for animation to behave correctly |          _number_           |    ✅    |                                     ❌ |
+| **backdropColor** | Basically the color of a fullscreen view displayed below modaL                        |          _string_           |    ❌    |                            `undefined` |
+| **style**         | Style of modal's container                                                            |         _ViewStyle_         |    ❌    |                            `undefined` |
+| **animation**     | Animation type to use, can get spring and timing, defaults to timing animation        |   _'spring' \| 'timing'_    |    ❌    |                             `'timing'` |
+| **timingConfig**  | Timing animation's config if animation prop is set to 'timing'                        | _Animated.WithTimingConfig_ |    ❌    | `{duration: 300, easing: Easing.quad}` |
+| **springConfig**  | Spring animation's config if animation prop is set to 'spring'                        | _Animated.WithSpringConfig_ |    ❌    |                            `undefined` |
+| **backdropStyle** | Style of the backdrop component                                                       |         _ViewStyle_         |    ❌    |                            `undefined` |
 
 ## ➕ Contributing
 

package.json

@@ -41,6 +41,13 @@
     "react native bottom modal",
     "react native fast modal",
     "react native performant modal",
+    "react native bottom sheet",
+    "react native animated bottom sheet",
+    "react native animated bottom modal",
+    "react native gesture modal",
+    "react native reanimated gesture modal",
+    "react native easy modal",
+    "react native easy animated modal",
     "react-native-reanimated-2",
     "react native reanimated modal",
     "react native reanimated bottom modal",

src/components/BottomModal.tsx

@@ -15,6 +15,7 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
+  withSpring,
   withTiming,
 } from 'react-native-reanimated';
 import { screen } from '../utils';
@@ -26,7 +27,7 @@ export type BottomModalProps = {
   height: number;
 
   /**
-   * Basically the color of a fullscreen view displayed below modal.
+   * Color of the fullscreen view displayed behind modal.
    * You can also change this by using backdropStyle prop.
    * @example rgba(255,255,255,0.8)
    */
@@ -38,18 +39,24 @@ export type BottomModalProps = {
   style?: ViewStyle;
 
   /**
-   * Easing function which modal will be presented.
-   * Since this also affects the time between user pressing the button and seeing the effect, a faster kind of curve function is recommended.
-   * @default Easing.quad
+   * Type of animation
+   * uses withTiming if set to 'timing'
+   * uses withSpring if set to 'spring'
+   * @default "timing"
+   * @example <<BottomModal animation='timing' timingConfig={{duration: 300, easing: Easing.quad}} height={500} ref={bottomModalRef}>>
    */
-  easing?: Animated.EasingFunction;
+  animation?: 'spring' | 'timing';
 
   /**
-   * Modal animation's duration in milliseconds.
-   * Since this also affects the time between user pressing the button and seeing the effect, a smaler number is recommended.
-   * @default 300
+   * The configuration to use if animation prop is set to 'spring'
    */
-  duration?: number;
+  springConfig?: Animated.WithSpringConfig;
+
+  /**
+   * The configuration to use if animation prop is set to 'timing'
+   * @default {duration: 300, easing: Easing.quad}
+   */
+  timingConfig?: Animated.WithTimingConfig;
 
   /**
    * Style of backdrop component
@@ -79,7 +86,16 @@ const BottomModal = React.forwardRef<
   PropsWithChildren<BottomModalProps>
 >(
   (
-    { height, backdropColor, style, easing, children, duration, backdropStyle },
+    {
+      height,
+      backdropColor,
+      style,
+      children,
+      backdropStyle,
+      animation,
+      springConfig,
+      timingConfig,
+    },
     ref
   ) => {
     const top = useSharedValue(screen.height);
@@ -88,12 +104,13 @@ const BottomModal = React.forwardRef<
     const updateTop = useCallback(
       (value: number) => {
         'worklet';
-        return withTiming(value, {
-          easing,
-          duration,
-        });
+        if (animation === 'spring') {
+          return withSpring(value, springConfig);
+        } else {
+          return withTiming(value, timingConfig);
+        }
       },
-      [easing, duration]
+      [timingConfig, animation, springConfig]
     );
 
     const isActive = useDerivedValue<boolean>(() => {
@@ -179,7 +196,10 @@ const BottomModal = React.forwardRef<
   }
 );
 
-BottomModal.defaultProps = { duration: 300, easing: Easing.quad };
+BottomModal.defaultProps = {
+  timingConfig: { duration: 300, easing: Easing.quad },
+  animation: 'timing',
+};
 
 const styles = StyleSheet.create({
   fullScreen: {