alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
1.57k stars 464 forks source link

'Animated' Warnings #292

Open JorgeOrozcoP opened 4 years ago

JorgeOrozcoP commented 4 years ago

I have a running deck swipper on my application, but whenever I manually move the cards, I get the following two warnings:

Animated: 'useNativeDriver' was not specified. This is a required option and must be explicitly set to 'true' or 'false'

and

Animated.event now requires a second argument for options

I managed to hide these warnings using console.disableYellowBox = true; I'm pretty new to RN, and I'm wondering if there is a better solution to this. I am using React Native v6.14.4

Remato commented 4 years ago

just search animated.timing on folder ~\node_modules\native-base\dist\src\basic\ and add manually useNativeDriver: true or false

MayoudP commented 4 years ago

@Remato Can you be more specific please ? Got the same warnings with RN : 0.62 Not a blocking bug tho

Remato commented 4 years ago

@Remato Can you be more specific please ? Got the same warnings with RN : 0.62 Not a blocking bug tho

you have to set this manually for the component that is giving this warning, so...

you have a folder node_modules with yours components right? go to src/node_module/{your_component}

where: your_component is react_native_deck_swipper search for file Swiper.js open it and add this line here: Screenshot from 2020-04-14 16-18-31

Animated.timing(this.state.pan, {
      toValue: {
        x: x * SWIPE_MULTIPLY_FACTOR,
        y: y * SWIPE_MULTIPLY_FACTOR
      },
      duration: this.props.swipeAnimationDuration,
      useNativeDriver: true // Add This line
      ...

you can fix this errors manually for all components adding this line "useNativeDriver: true".

**if a component uses other components internally that have the same problem, you can define all the lines with that line too

dongdyang commented 4 years ago

useNativeDriver: false // Add This line

looks like adding false also works.

Remato commented 4 years ago

useNativeDriver: false // Add This line

looks like adding false also works.

yeah, the warning disappear if you determine any value for this variable

useNativeDriver: true or useNativeDriver: false

works fine, but this defines whether the native drive will be used or not, if your application does not use it, it can be set to false 🙂

adavecohen95 commented 4 years ago

Won't this just come back whenever I refresh my dependencies

mikemajara commented 4 years ago

as @adavecohen95 points out, this will come back if library needs to be updated. Ideally this would require a PR. I'd be happy to do one, but I'd need more insight into this library... @alexbrillant ?

@Remato this solution still does not solve the second problem stated in OP: Animated.event now requires a second argument for options, any thoughts?

@ all - Is there a reason not to useNativeDriver by default?

see also https://github.com/react-native-community/react-native-modal/issues/410

ipuris commented 4 years ago

Hi, I found this thread while googling the exactly same error I experienced in different react-native code, and I think that my experience can be helpful to solve the second problem:

Animated.event now requires a second argument for options

The second error occurs if Animated.event has only one argument as the message says. Animated.event probably requires only one argument in previous version, but it looks like it has changed.

The second argument is specified in https://reactnative.dev/docs/animated#event,

listener: Optional async listener. useNativeDriver: Uses the native driver when true. Default false.

and we have to include useNativeDriver option while listener is optional. So I use the following code:

Animated.event([null, { dy: someValue }], { useNativeDriver: true, }),

which was previously:

Animated.event([null, { dy: someValue }]), // wrong

Maybe somewhere in the react-native-deck-swiper, there is Animated.event() function with a single arguments. I don't know where the right place of source code in this library to fix the problem is, so it may need some time for me to send PR fixing this issue.

Before that, I wrote this comment first because I hope this comment would be helpful for other users.

ipuris commented 4 years ago

Oh, I'm late 🤦 I found that the following PR already fixes the problem that I said.

https://github.com/alexbrillant/react-native-deck-swiper/pull/309/commits/fb9fbd6283f4144889aef8e98f9e765fc74b37de