dev-plugins
dev-plugins copied to clipboard
expo
Cannot read property 'useState' of null - @dev-plugins/react-navigation, useReactNavigationDevTools
What I did
After installing @dev-plugins/react-navigation in expo project, I added these 2 lines according to documentation:
Result
The app crashes when calling useReactNavigationDevTools
Error stack
Notes
- app was rebuild
- metro has been reset and cache has been clean
- followed this doc https://docs.expo.dev/debugging/devtools-plugins/
- it's mono repo
package.json
{
"name": "XXX",
"main": "index.js",
"version": "1.0.0",
"dependencies": {
"@dev-plugins/react-navigation": "^0.0.6",
"@expo/vector-icons": "^14.0.0",
"@gluestack-style/animation-resolver": "^1.0.4",
"@gluestack-style/react": "^1.0.56",
"@gluestack-ui/config": "^1.1.18",
"@gluestack-ui/themed": "^1.1.26",
"@gorhom/portal": "^1.0.14",
"@react-native-community/hooks": "^3.0.0",
"@react-native-community/netinfo": "11.1.0",
"@react-native-segmented-control/segmented-control": "^2.5.0",
"@react-navigation/native": "^6.0.2",
"@shopify/flash-list": "^1.6.3",
"@tanstack/react-query": "^4.36.1",
"@trpc/client": "^10.45.1",
"@trpc/react-query": "^10.45.1",
"dayjs": "^1.11.10",
"expo": "~50.0.14",
"expo-application": "~5.8.3",
"expo-av": "~13.10.5",
"expo-constants": "~15.4.5",
"expo-dev-client": "~3.3.9",
"expo-device": "~5.9.3",
"expo-font": "~11.10.3",
"expo-linear-gradient": "~12.7.2",
"expo-linking": "~6.2.2",
"expo-local-authentication": "~13.8.0",
"expo-localization": "~14.8.3",
"expo-navigation-bar": "~2.8.1",
"expo-notifications": "~0.27.6",
"expo-router": "~3.4.7",
"expo-secure-store": "~12.8.1",
"expo-sharing": "~11.10.0",
"expo-splash-screen": "~0.26.4",
"expo-status-bar": "~1.11.1",
"expo-system-ui": "~2.9.3",
"expo-updates": "~0.24.11",
"expo-web-browser": "~12.8.2",
"i18next": "^23.10.0",
"lucide-react-native": "^0.379.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.50.1",
"react-i18next": "^14.0.5",
"react-native": "0.73.4",
"react-native-gesture-handler": "~2.14.0",
"react-native-mmkv": "^2.12.1",
"react-native-pager-view": "^6.2.3",
"react-native-reanimated": "~3.6.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-svg": "14.1.0",
"react-native-toast-message": "^2.2.0",
"react-native-web": "~0.19.6",
"react-native-webview": "13.6.4",
"zustand": "4.4.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/runtime": "^7.24.0",
"@react-native/assets-registry": "0.74.0",
"@types/react": "~18.2.45",
"babel-preset-expo": "^10.0.1",
"expo-asset": "~9.0.2",
"jest": "^29.2.1",
"jest-expo": "~50.0.2",
"typescript": "^5.1.3"
},
"private": true
}
Gonna take a shot in the dark and say you have ended up with multiple versions of react installed. What does yarn why react say?
pnpm why react
Legend: production dependency, optional only, dev only
dependencies:
@gluestack-ui/config 1.1.18
└─┬ @gluestack-ui/themed 1.1.26 peer
├─┬ @gluestack-style/legend-motion-animation-driver 1.0.3
│ └─┬ @legendapp/motion 2.3.0 peer
│ ├─┬ @legendapp/tools 2.0.1
│ │ └── react 18.2.0 peer
│ ├─┬ nativewind 2.0.11 peer
│ │ └─┬ use-sync-external-store 1.2.2
│ │ └── react 18.2.0 peer
│ ├── react 18.2.0 peer
│ └─┬ react-native 0.73.4 peer
│ ├── react 18.2.0 peer
│ └─┬ react-shallow-renderer 16.15.0
│ └── react 18.2.0 peer
└─┬ @gluestack-ui/accordion 1.0.4
└─┬ @gluestack-ui/utils 0.1.12
└─┬ @react-native-aria/focus 0.2.9
└─┬ @react-aria/focus 3.16.2
└─┬ @react-aria/interactions 3.21.1
├─┬ @react-aria/ssr 3.9.2
│ └── react 18.2.0 peer
└─┬ @react-aria/utils 3.23.2
├─┬ @react-aria/ssr 3.9.2
│ └── react 18.2.0 peer
├─┬ @react-stately/utils 3.9.1
│ └── react 18.2.0 peer
├─┬ @react-types/shared 3.22.1
│ └── react 18.2.0 peer
└── react 18.2.0 peer
devDependencies:
jest-expo 50.0.2
└─┬ react-test-renderer 18.2.0
├── react 18.2.0 peer
└─┬ react-shallow-renderer 16.15.0
└── react 18.2.0 peer
