react-doctor/rn-prefer-reanimated

Use `import Animated from 'react-native-reanimated'` — animations run on the UI thread instead of the JS thread

• Category: React Native
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: react-native
• Enabled when: framework=react-native and capabilities=react-native

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

The rule fires on import { Animated } from "react-native" — specifically a named ImportSpecifier whose imported name is Animated. Namespace imports and default imports are not flagged. False positive: a single trivial fade/opacity tween where pulling in reanimated, its babel plugin, and the worklet runtime is overkill.

Fix prompt

Use this once validation confirms the diagnostic is real.

Install react-native-reanimated, add react-native-reanimated/plugin to babel.config.js, then switch to import Animated, { useSharedValue, withTiming, useAnimatedStyle } from "react-native-reanimated". Replace Animated.Value with useSharedValue, Animated.timing with withTiming, and apply styles via useAnimatedStyle so animations run on the UI thread. See https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/

Related rules

More React Native rules from the rules reference:

• react-doctor/rn-pressable-shared-value-mutation: Wrap in <GestureDetector gesture={Gesture.Tap()...}> so the press animation runs on the UI thread instead of bouncing across the JS bridge
• react-doctor/rn-scrollview-dynamic-padding: Use `contentInset={{ bottom: dynamicValue }}` — the OS applies it as an offset without reflowing the scroll content
• react-doctor/rn-scrollview-flex-in-content-container: Replace `flex: <positive number>` on contentContainerStyle with `flexGrow: 1`
• react-doctor/rn-style-prefer-boxshadow: Use the cross-platform CSS `boxShadow` string (RN v7+): `boxShadow: "0 2px 8px rgba(0,0,0,0.1)"` instead of platform-specific shadow*/elevation keys
• react-doctor/expo-no-non-inlined-env: Use static dotted access: process.env.EXPO_PUBLIC_NAME (computed/destructured reads aren't inlined and are undefined at runtime)