Moti works on all platforms, including web. Make sure you've installed
react-native-web and done anything you need to get that working.
The following applies to React Native Web apps that do not use Next.js.
Since Moti uses Reanimated 2, we need its Babel plugin to be applied to Moti. Since Expo Web doesn't transpile modules by default, we'll need to tell it to transpile Moti.
@expo/webpack-config to your
Next, create a custom
webpack.config.js in the root of your Expo app, and paste the contents below:
Your app will now run with Expo Web!
type: 'spring' for animations.
However, Reanimated 2's spring animations are currently glitchy on web.
react-native-webbetween versions (
0.15.6) for a temporary patch and the default
type: springwill work on web.
- Alternatively if you want to use springs, I recommend setting
overshootClamping: false. This seems to solve it on web:
Thanks to pranshuchittora for discovering this workaround.
- Another solution is to use
timingtransitions instead of the default
You can configure your animation settings using the
transition prop of any Moti component.