Documentation

Installation

Set up Motionwind v2 beta in Expo or bare React Native.

React Native installation

The CLI creates a typed config and a Babel file when one does not already exist:

npx create-motionwind@2 init --framework=react-native --dry-run
npx create-motionwind@2 init --framework=react-native

Expo

npx expo install react-native-reanimated react-native-gesture-handler
npm install motionwind-react-native@2 nativewind motionwind-core@2

Bare React Native

npm install motionwind-react-native@2 react-native-reanimated react-native-gesture-handler nativewind motionwind-core@2

NativeWind is optional if ordinary styling is supplied through style. The adapter passes non-animation className tokens through unchanged.

Reanimated Babel setup

Runtime class parsing does not remove Reanimated's required build setup. Add the plugin expected by your installed Reanimated version; for the versions supported by v2, the common configuration is:

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

Keep the Reanimated plugin last when other plugins are present, then clear Metro's cache:

npx expo start -c

For bare React Native, use the preset required by that project and reset Metro with npx react-native start --reset-cache.

Add configuration

// motionwind.config.ts
import { defineConfig } from "motionwind-core";

export default defineConfig({
  adapter: "react-native",
  strict: true,
  reducedMotion: "user",
});

import { MotionwindProvider, mw } from "motionwind-react-native";
import config from "./motionwind.config";

export default function App() {
  return (
    <MotionwindProvider config={config}>
      <mw.Pressable
        accessibilityRole="button"
        className="animate-tap:scale-90 animate-duration-150"
      >
        <mw.Text>Press to verify</mw.Text>
      </mw.Pressable>
    </MotionwindProvider>
  );
}

GestureHandlerRootView is not required for Motionwind tap, hover, or focus handlers. Add it only when your application directly uses React Native Gesture Handler—for example, to implement drag, which Motionwind v2 does not consume.

Finish with npx create-motionwind@2 doctor. The Expo starter and CI browser bridge verify mount, tap, focus/hover where available, variants, diagnostics, reduced motion, and the packed production bundle.