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
- 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 shadowColor, shadowOffset, shadowOpacity, shadowRadius, or elevation Properties inside a JSX style or *Style inline ObjectExpression, or inside any object value passed to StyleSheet.create({...}). False positive: the project targets React Native earlier than 0.76 — boxShadow shipped in RN 0.76 (the New Architecture release) and is only fully supported from that version onward.
Fix prompt
Use this once validation confirms the diagnostic is real.
Collapse the platform-specific keys into a single boxShadow string of the form "offset-x offset-y blur spread color" (e.g. "0 2px 8px rgba(0, 0, 0, 0.1)"); multiple comma-separated shadows and the inset keyword are supported. Verify the project is on RN 0.76 or newer before deleting the iOS shadow* and Android elevation fallback. See https://reactnative.dev/docs/view-style-props#boxshadow
Related rules
More React Native rules from the rules reference:
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)react-doctor/rn-animate-layout-property: Animate `transform: [{ translateX/Y }, { scale }]` and `opacity` instead of layout props — layout runs on the JS thread; transform/opacity run on the GPU compositorreact-doctor/rn-animation-reaction-as-derived: Replace useAnimatedReaction with `useDerivedValue(() => ..., [deps])` — shorter, native dependency tracking, no side-effect implicationreact-doctor/rn-bottom-sheet-prefer-native: Use `<Modal presentationStyle="formSheet">` (RN v7+) for native gesture handling and snap pointsreact-doctor/rn-detox-missing-await: Prepend await to the Detox action, waitFor chain, or expect(element(...)) assertion: await element(by.id('submit')).tap()