0

Background. Trying to make a cross platform react-native-application in a fully managed expo workflow (sdk 47). I am using reanimated v2.11 to animate layout. The animations currently work in ios/android through expo go. But the animations neither work in expo go react-native-web app or a production react-native-web app.

I am getting this warning in the console.log. enter image description here

However according to forums this is a non breaking warning and I should still see animations that are pure javascript. However I do not. The react-native-web pages load but without animations.

I have followed reanimate docs instruction until the section on webpack support, below. enter image description here

I have followed expo docs make webpack.config.js, so I can bundle with a custom wepback module.

This is the point where I'm stuck as I don't know how to synthesize reanimate docs' suggestions for webpack support(pictured above) with what I'm now presented with in webpack.config.js, as pictured below.

my wepback.config.js file

I would be happy with suggestions on either how to make reanimate work in react-native-web or with how to correctly configure my webpack.config.js file to align with reanimates v2's docs.

Below is the example of the animated component that works in ios/android but not in create-native-web. enter image description here

JohnyClash
  • 630
  • 1
  • 5
  • 10

1 Answers1

0

useNativeDriver is a function supported only by ReactNative. Not available on the React Native Web.

If you need to use the same codebase on both the web and native platforms, you can conditionally treat the code by separating the platforms that support "useNativeDriver" from those that do not. For example, the web does not use "useNativeDriver" and can only be enabled on native platforms.

  • Example
const useNativeDriver = Platform.OS === 'ios' || Platform.OS === 'android';

// Animated.timing example
Animated.timing(animatedValue, {
  toValue: 1,
  duration: 300,
  useNativeDriver, // Use native driver only for iOS and Android
}).start();
hong developer
  • 13,291
  • 4
  • 38
  • 68
  • Thanks for the response. I added a photo(bottom of original post) of the animated.component that is not working and the syntax I'm using for reanimate v 2.3.0+ layout transitions. I do not see an option for useNativeDriver. I also think that your solution would remove the warning I receive but would not change current behavior, as its already states in the warning it will default to using pure JavaScript. – JohnyClash Jul 20 '23 at 02:39