fix: core uses nativeDriver, exposes props for Animated.Value only

docs/PROPSMETHODS.md

@@ -32,7 +32,7 @@ A number to define the modal's total height.
 
 ### `modalTopOffset`
 
-A number to define the modal's top offset
+A number to define the modal's top offset.
 
 | Type     | Required |
 | -------- | -------- |
@@ -178,23 +178,23 @@ See [`react-native` documentation](https://facebook.github.io/react-native/docs/
 
 ### `panGestureEnabled`
 
-Using this prop will enable/disable pan gesture
+Using this prop will enable/disable pan gesture.
 
 | Type     | Required | Default  |
 | -------- | -------- | -------- |
 | bool     | No       | `true`   |
 
 ### `panGestureAnimatedValue`
 
-Animated.Value of the modal position between 0 and 1
+Animated.Value of the modal position between 0 and 1.
 
 | Type               | Required |
 | ------------------ | -------- |
 | Animated.Value     | No       |
 
 ### `closeOnOverlayTap`
 
-Using this prop will enable/disable overlay tap gesture
+Using this prop will enable/disable overlay tap gesture.
 
 | Type     | Required | Default  |
 | -------- | -------- | -------- |

src/index.tsx

@@ -39,6 +39,7 @@ const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent(KeyboardAv
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
 const GestureHandlerWrapper = GestureHandlerRootView ?? View;
+const USE_NATIVE_DRIVER = true;
 const ACTIVATED = 20;
 const PAN_DURATION = 150;
 
@@ -320,7 +321,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
         toValue: alwaysOpen && dest === 'default' ? 0 : 1,
         duration: timing.duration,
         easing: Easing.ease,
-        useNativeDriver,
+        useNativeDriver: USE_NATIVE_DRIVER,
       }),
 
       panGestureAnimatedValue
@@ -335,13 +336,13 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
         ? Animated.spring(this.translateY, {
             ...getSpringConfig(spring),
             toValue,
-            useNativeDriver,
+            useNativeDriver: USE_NATIVE_DRIVER,
           })
         : Animated.timing(this.translateY, {
             toValue,
             duration: timing.duration,
             easing: timing.easing,
-            useNativeDriver,
+            useNativeDriver: USE_NATIVE_DRIVER,
           }),
     ]).start(() => {
       if (onOpened) {
@@ -380,7 +381,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
         toValue: 0,
         duration: timing.duration,
         easing: Easing.ease,
-        useNativeDriver,
+        useNativeDriver: USE_NATIVE_DRIVER,
       }),
 
       panGestureAnimatedValue
@@ -395,13 +396,13 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
         ? Animated.spring(this.translateY, {
             ...getSpringConfig(spring),
             toValue,
-            useNativeDriver,
+            useNativeDriver: USE_NATIVE_DRIVER,
           })
         : Animated.timing(this.translateY, {
             duration: timing.duration,
             easing: Easing.out(Easing.ease),
             toValue,
-            useNativeDriver,
+            useNativeDriver: USE_NATIVE_DRIVER,
           }),
     ]).start(() => {
       if (onClosed) {
@@ -537,7 +538,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
           toValue: Number(destSnapPoint <= 0),
           duration: timing.duration,
           easing: Easing.ease,
-          useNativeDriver,
+          useNativeDriver: USE_NATIVE_DRIVER,
         }).start();
       }
 
@@ -546,7 +547,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
         friction: 12,
         velocity: velocityY,
         toValue: destSnapPoint,
-        useNativeDriver,
+        useNativeDriver: USE_NATIVE_DRIVER,
       }).start();
 
       if (this.beginScrollYValue === 0) {
@@ -616,7 +617,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
   };
 
   private onGestureEvent = Animated.event([{ nativeEvent: { translationY: this.dragY } }], {
-    useNativeDriver: this.props.useNativeDriver,
+    useNativeDriver: USE_NATIVE_DRIVER,
     listener: ({ nativeEvent: { translationY } }: PanGestureHandlerStateChangeEvent) => {
       const { panGestureAnimatedValue } = this.props;
       const offset = 200;
@@ -711,7 +712,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
       bounces: enableBounces,
       onScrollBeginDrag: Animated.event(
         [{ nativeEvent: { contentOffset: { y: this.beginScrollY } } }],
-        { useNativeDriver: false },
+        { useNativeDriver: USE_NATIVE_DRIVER },
       ),
       scrollEventThrottle: 16,
       onLayout: this.onContentViewLayout,
@@ -874,14 +875,13 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
   };
 
   private renderReactModal = (child: React.ReactNode): React.ReactNode => {
-    const { useNativeDriver } = this.props;
     const { isVisible } = this.state;
 
     return (
       <Modal
         supportedOrientations={['landscape', 'portrait', 'portrait-upside-down']}
         onRequestClose={this.onBackPress}
-        hardwareAccelerated={useNativeDriver}
+        hardwareAccelerated={USE_NATIVE_DRIVER}
         visible={isVisible}
         transparent
       >

src/options.ts

@@ -51,17 +51,17 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
   snapPoint?: number;
 
   /**
-   * A number to define the modal's total height
+   * A number to define the modal's total height.
    */
   modalHeight?: number;
 
   /**
-   * A number to define the modal's top offset
+   * A number to define the modal's top offset.
    */
   modalTopOffset?: number;
 
   /**
-   * Using this props will show the modal all the time, and the number represents how expanded the modal has to be
+   * Using this props will show the modal all the time, and the number represents how expanded the modal has to be.
    */
   alwaysOpen?: number;
 
@@ -72,7 +72,7 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
   handlePosition: 'outside' | 'inside';
 
   /**
-   * A number to define the elevation of the modal on Android. Useful if you have other elements of your app using other values of elevation. (Android specific)
+   * A number to define the elevation of the modal on Android. Useful if you have other elements of your app using other values of elevation (Android specific).
    */
   modalElevation?: number;
 
@@ -89,20 +89,16 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
   /**
    * Define the style of the overlay.
    */
-  overlayStyle?:
-    | ViewStyle
-    | ViewStyle[]
-    | RegisteredStyle<ViewStyle>
-    | RegisteredStyle<ViewStyle[]>;
+  overlayStyle?: TStyle;
 
   /**
-   * Use the native thread to execute the animations.
+   * Define if the Animated.Value uses the native thread to execute the animations.
    * @default true
    */
   useNativeDriver: boolean;
 
   /**
-   * Object to change the open animations
+   * Object to change the open animations.
    * @default
    * {
    * timing: { duration: 280 },
@@ -112,7 +108,7 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
   openAnimationConfig?: IConfigProps;
 
   /**
-   * Object to change the close animations
+   * Object to change the close animations.
    * @default
    * {
    * timing: { duration: 280 },
@@ -158,24 +154,24 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
   keyboardAvoidingBehavior?: 'height' | 'position' | 'padding';
 
   /**
-   * KeyboardAvoidingView.keyboardVerticalOffset
+   * Define an offset to the KeyboardAvoidingView component wrapping the scrollview.
    * @default 0
    */
   keyboardAvoidingOffset?: number;
 
   /**
-   * Using this prop will enable/disable pan gesture
+   * Using this prop will enable/disable pan gesture.
    * @default true
    */
   panGestureEnabled?: boolean;
 
   /**
-   * Animated.Value of the modal position between 0 and 1
+   * Animated.Value of the modal position between 0 and 1.
    */
   panGestureAnimatedValue?: Animated.Value;
 
   /**
-   * Using this prop will enable/disable overlay tap gesture
+   * Using this prop will enable/disable overlay tap gesture.
    * @default true
    */
   closeOnOverlayTap?: boolean;
@@ -258,7 +254,7 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
   /**
    * Callback function which determines if the modal has reached the top
    * i.e. completely opened to modal/screen height, or is at the initial
-   * point (snapPoint or alwaysOpened height)
+   * point (snapPoint or alwaysOpened height).
    */
   onPositionChange?: (position: 'top' | 'initial') => void;
 
@@ -305,12 +301,12 @@ export interface IState {
   contentHeight: number;
 
   /**
-   * When we scroll to the bottom of the ContentView we want the bounce animation but when we reach the top again, we want it disabled. (iOS specific)
+   * When we scroll to the bottom of the ContentView we want the bounce animation but when we reach the top again, we want it disabled (iOS specific).
    */
   enableBounces: boolean;
 
   /**
-   * Disable scroll if disableScrollIfPossible is true or if we are the initial position of the snapPoint or alwaysOpen modals
+   * Disable scroll if disableScrollIfPossible is true or if we are the initial position of the snapPoint or alwaysOpen modals.
    */
   disableScroll: boolean | undefined;