New
Introducing React Doctor for Enterprise
Menu
What Is React Doctor?
Quickstart
CLI to CI
How to Fix Issues
GitHub Actions Setup
Updating CI
Other CI Providers
Migrating to CI v2
Config Files
ESLint & oxlint Plugins
Add Custom Rules
CLI Reference
GitHub Action Reference
Node.js API
Changelog
Modified MIT License
Terms of Service
Privacy Policy
Data Use
Security
Support
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

  • 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 an ImportDeclaration whose source string is exactly "@react-navigation/stack" or "@react-navigation/drawer". Confirm the import is one of those two packages and not the already-native variant. True positive in almost every case. False positive: a deliberate web fallback layer where the JS stack covers something native-stack does not.

Fix prompt

Use this once validation confirms the diagnostic is real.

Rename the import source: "@react-navigation/stack" becomes "@react-navigation/native-stack" and "@react-navigation/drawer" becomes "@react-navigation/native-drawer" (v7+). The screen-options API is mostly identical, but native-stack drops JS-only options like cardStyleInterpolator and headerStyleInterpolator, so swap them for the supported native equivalents. See https://reactnavigation.org/docs/native-stack-navigator/

More React Native rules from the rules reference:

  • 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
  • react-doctor/rn-no-scrollview-mapped-list: Use FlashList, LegendList, or FlatList — `<ScrollView>{items.map(...)}</ScrollView>` mounts every row in memory