New
Introducing React Doctor for Enterprise

react-doctor/rn-no-legacy-shadow-styles

Use `boxShadow` for cross-platform shadows on the new architecture instead of platform-specific shadow properties

  • 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.

Verify the style object — inline style={{...}}, an entry inside a style={[...]} array, or a value passed to StyleSheet.create({...}) — sets shadowColor, shadowOffset, shadowOpacity, shadowRadius, or elevation. False positive on legacy-architecture apps where boxShadow isn't supported yet; the platform-specific props remain the only option there.

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace with the cross-platform boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.15)" (CSS-style syntax that works on both iOS and Android under the New Architecture). Use filter: "drop-shadow(...)" for shadows that need to follow alpha or irregular shapes. Requires RN 0.76+ with the New Architecture. See https://reactnative.dev/docs/view-style-props#boxshadow

More React Native rules from the rules reference:

  • react-doctor/rn-no-non-native-navigator: Use `@react-navigation/native-stack` (or `native-tabs` in v7+) for platform-native transitions and gestures
  • react-doctor/rn-no-panresponder: Replace PanResponder with react-native-gesture-handler's Gesture.Pan(), which runs gesture math on the native UI thread instead of the JS thread.
  • react-doctor/rn-no-raw-text: Wrap text in a `<Text>` component: `<Text>{value}</Text>` — raw strings outside `<Text>` crash on React Native
  • react-doctor/rn-no-renderitem-key: Remove the no-op `key` from the JSX row that renderItem returns and set `keyExtractor` (or `item.key`) on the list instead.
  • react-doctor/rn-no-scroll-state: Track scroll position with a Reanimated shared value (`useAnimatedScrollHandler`) or a ref — `setState` on every scroll event causes re-render storms