Skip to content
react-native-strx v1.0.0-beta.1

Getting started

Installation

Add STRX and Reanimated 4 to an Expo or bare React Native app.

STRX is a thin layer over Reanimated, so most of the setup is the standard Reanimated setup.

Install the packages

1.0 is in beta

STRX 1.0 is published under the beta tag, so install react-native-strx@beta. A plain npm install react-native-strx still installs 0.1.x until 1.0.0 is released.

Expo

Install STRX with npm, and the Reanimated packages with expo install so their versions match your SDK:

npm install react-native-strx@beta
npx expo install react-native-reanimated react-native-worklets

babel-preset-expo already includes the Worklets Babel plugin, so there is nothing else to configure. Expo Go works as long as your SDK ships Reanimated 4.1 or newer; otherwise use a development build.

Bare React Native

npm install react-native-strx@beta react-native-reanimated react-native-worklets

Then add the Worklets plugin to babel.config.js. It must be the last plugin:

babel.config.jsjs
1module.exports = {2  presets: ["module:@react-native/babel-preset"],3  plugins: [4    // ...other plugins5    "react-native-worklets/plugin",6  ],7};

Install the iOS pods:

npx pod-install

Clear the Metro cache

After installing, or after any Babel change, restart Metro with a clean cache:

npx react-native start --reset-cache
# or, in Expo
npx expo start -c

Peer dependencies

PackageVersionNotes
react
>=19
react-native
>=0.78
New Architecture (Fabric) required by Reanimated 4
react-native-reanimated
>=4.1.0
react-native-worklets
>=0.5.0
Required by Reanimated 4
Reanimated 3

STRX 1.0 only supports Reanimated 4. If your app must stay on Reanimated 3, install react-native-strx@0.1.x.

Installing an unreleased commit

To try a commit from GitHub before it is published:

npm install github:wangjagom/react-native-strx

Verify the setup

Render a STRX component somewhere visible. If it fades in, Reanimated and the Babel plugin are working:

1import { Strx } from "react-native-strx";23export function SetupCheck() {4  return (5    <Strx.View animate="fade-in duration-1000">6      <Strx.Text>STRX is working</Strx.Text>7    </Strx.View>8  );9}

If you see an error about worklets or a missing Babel plugin, check that react-native-worklets/plugin is the last Babel plugin and restart Metro with --reset-cache.

Optional: editor extension

Install STRX Animation IntelliSense for token autocomplete, hover docs and typo fixes inside animate="".

Edit this page on GitHub

Esc