useNativeDriver

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false in ActionSheet (at SignUp_1.tsx:107) in SignUp_Name (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:531) in CardStack (at StackView.tsx:420) in KeyboardManager (at StackView.tsx:418) in Context.Consumer (at StackView.tsx:416) in StackView (at createStackNavigator.tsx:67) in StackNavigator (at navigation/​index.tsx:27) in LoginStackScreen (at SceneView.tsx:98) in SceneView (at useDescriptors.tsx:125) in CardContainer (at CardStack.tsx:531) in CardStack (at StackView.tsx:420) in KeyboardManager (at StackView.tsx:418) in Context.Consumer (at StackView.tsx:416) in StackView (at createStackNavigator.tsx:67) in StackNavigator (at navigation/​index.tsx:184) in MainStackScreen (at navigation/​index.tsx:215) in AppNavigation (at App.tsx:27) in App (at renderApplication.js:45)

react native 0.62

[asasouza]

@pke This is the patch file:

index 7a0fc35..d409f70 100644
--- a/node_modules/react-native-actionsheet/lib/ActionSheetCustom.js
+++ b/node_modules/react-native-actionsheet/lib/ActionSheetCustom.js
@@ -24,8 +24,9 @@ class ActionSheet extends React.Component {
     }
   }
 
   get styles () {
@@ -68,14 +69,16 @@ class ActionSheet extends React.Component {
     Animated.timing(this.state.sheetAnim, {
       toValue: 0,
       duration: 250,
-      easing: Easing.out(Easing.ease)
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
     }).start()
   }
 
   _hideSheet (callback) {
     Animated.timing(this.state.sheetAnim, {
       toValue: this.translateY,
-      duration: 200
+      duration: 200,
+      useNativeDriver: true,
     }).start(callback)
   }

I created it by using the package patch-package, available in npm. All you need to do is install the patch-package in you project, or globally, and add in the postinstall script in your package.json npx patch-package. After this, just edit the ActionSheetCustom.js and run npx patch-package react-native-actionsheet and done, it will create a folder with the package and every npm install execution will trigger the postinstall that applies the changes; Sorry if my explanation is not enough, english is not my primary language. If you still have doubts I strongly recommend the docs from the package;

[aprilmintacpineda]

Yeah, I got this error as well, just use patch-package,

Install

npm i -S patch-package

Then add

"script": {
  // ... other scripts
  "postinstall": "patch-package" // <--- add this line
}

to your package.json.

Edit file

Go to node_modules/react-native-actionsheet/lib/ActionSheetCustom.js

Replace the _hideSheet on like 76 with the following:

_hideSheet (callback) {
  Animated.timing(this.state.sheetAnim, {
    toValue: this.translateY,
    duration: 200,
    useNativeDriver: true
  }).start(callback)
}

also the _showSheet on line 67 with the following:

_showSheet = () => {
  Animated.timing(this.state.sheetAnim, {
    toValue: 0,
    duration: 250,
    easing: Easing.out(Easing.ease),
    useNativeDriver: true
  }).start()
}

Bonus

On render method, on the <Modal> render, change the animationType="none" to animationType="fade", this will gracefully open the modal instead of it popping right away.

patch it up

run npx patch-package

Then you’re all set.