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.
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.
See Reanimated issue #1804 for more info on this problem. It should be solved once
react-native-web merges #1939. Once that's merged, you'll need to install the new version of RNW (
Another solution is to use
timing transitions instead of the default
You can configure your animation settings using the
transition prop of any Moti component.