Reanimate not working with react-native-web. How to synthesize the reanimate Webpack support doc example with expo's webpack.config.js

Question

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.

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.

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.

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.

Answer 1

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();