feat: use native driver for animation

example/ios/Podfile

@@ -18,10 +18,10 @@ target 'example' do
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
   # you should disable these next few lines.
-  use_flipper!
-  post_install do |installer|
-    flipper_post_install(installer)
-  end
+#  use_flipper!
+#  post_install do |installer|
+#    flipper_post_install(installer)
+#  end
 end
 
 target 'example-tvOS' do

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-awesome-modal",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A flexible and reusable modal.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/awesome-modal.tsx

@@ -80,7 +80,7 @@ export class AwesomeModal extends React.Component<IProps, IState> {
     this.state = {
       modalHeight: 0,
       opacityAnimation: new Animated.Value(0),
-      translateYAnimation: new Animated.Value(DEVICE_HEIGHT * -1.5),
+      translateYAnimation: new Animated.Value(DEVICE_HEIGHT * 1.5),
       modalYPosition: props.modalBottomMargin ?? 0 + yPositionBottomMargin,
       deviceHeight: DEVICE_HEIGHT,
       overlayIsVisible: true,
@@ -91,9 +91,8 @@ export class AwesomeModal extends React.Component<IProps, IState> {
     this.onTouchOutside = this.onTouchOutside.bind(this)
     this.close = this.close.bind(this)
     this.onModalHeightChange = this.onModalHeightChange.bind(this)
-    this.onSafeAreaInsetsForRootViewChange = this.onSafeAreaInsetsForRootViewChange.bind(
-      this
-    )
+    this.onSafeAreaInsetsForRootViewChange =
+      this.onSafeAreaInsetsForRootViewChange.bind(this)
   }
 
   async componentDidMount() {
@@ -169,9 +168,9 @@ export class AwesomeModal extends React.Component<IProps, IState> {
         useNativeDriver: true,
       }),
       Animated.timing(translateYAnimation, {
-        toValue: this.state.deviceHeight * -1.5,
+        toValue: this.state.deviceHeight * 1.5,
         duration: 250,
-        useNativeDriver: false,
+        useNativeDriver: true,
       }),
     ]).start(() => {
       this.setState(() => {
@@ -194,12 +193,7 @@ export class AwesomeModal extends React.Component<IProps, IState> {
    * the application.
    */
   onModalHeightChange() {
-    const {
-      modalHeight,
-      opacityAnimation,
-      translateYAnimation,
-      modalYPosition,
-    } = this.state
+    const { modalHeight, opacityAnimation, translateYAnimation } = this.state
 
     if (modalHeight !== 0) {
       Animated.parallel([
@@ -211,8 +205,8 @@ export class AwesomeModal extends React.Component<IProps, IState> {
         Animated.spring(translateYAnimation, {
           toValue: this.props.isCentered
             ? (DEVICE_HEIGHT - modalHeight) / 2
-            : modalYPosition,
-          useNativeDriver: false,
+            : DEVICE_HEIGHT - modalHeight,
+          useNativeDriver: true,
         }),
       ]).start()
     }
@@ -345,7 +339,11 @@ export class AwesomeModal extends React.Component<IProps, IState> {
             })
           }}
           style={[
-            { bottom: this.state.translateYAnimation as any },
+            {
+              transform: [
+                { translateY: this.state.translateYAnimation as any },
+              ],
+            },
             defaultModalContainerStyle,
             modalContainerStyle,
           ]}