useNativeDriver

[sachithamh]

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]

+1 same problem...

[silviaportelaf]

same problem here

[tuxlan]

also same problem here :/

[asasouza]

For those with this problem the resolution is simple, edit the functions _showSheet and _hideSheet, that use Animated API, in ActionSheetCustom.js to include the option useNativeDriver: true. A simple workaround to persist this change in future npm install executions is use patch-package.

[pke]

@asasouza you don't happen to have the patch file to use? ;) How do you usually create those patch files?

[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;

[pke]

Thanks, explanation is fine @asasouza! And thanks for the patch file. Next time I'll try it myself.

There should be a way to attach such path files as temp fixes to issues here in GH :)

[pke]

@asasouza any idea how we could use https://patch-diff.githubusercontent.com/raw/beefe/react-native-actionsheet/pull/88.patch for patch-package? It says "unrecognised patch file" when I drop it into the patches folder.

[litinskii]

Same problem

[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.

[alessiocancian]

I released the fix to npm, read #131