Skip to content

Commit 7ffeb8d

Browse files
committed
Update troubleshooting docs
1 parent 3d4f6a7 commit 7ffeb8d

File tree

3 files changed

+48
-10
lines changed

3 files changed

+48
-10
lines changed

website/versioned_docs/version-4.x/troubleshooting.md

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ original_id: troubleshooting
77

88
This section attempts to outline issues that can happen during setup and may not be related to React Navigation itself. Also see [common mistakes](common-mistakes.md).
99

10+
Before troubleshooting an issue, make sure that you have upgraded to **the latest available versions** of the packages. You can install the latest versions by installing the packages again (e.g. `npm install package-name`).
11+
1012
## I'm getting an error "Unable to resolve module" after updating to the latest version
1113

1214
This might happen for 2 reasons:
@@ -25,7 +27,7 @@ expo start -c
2527
If you're not using Expo, run:
2628

2729
```sh
28-
react-native start --reset-cache
30+
npx react-native start --reset-cache
2931
```
3032

3133
If the module points to an npm package (i.e. the name of the module doesn't with `./`), then it's probably due to a missing peer dependency. To fix this, install the dependency in your project:
@@ -62,7 +64,45 @@ This and some similar errors might occur if you didn't link the [`react-native-g
6264

6365
Now rebuild the app and test on your device or simulator.
6466

65-
## I linked RNGestureHandler library but gestures won't work on Android
67+
## I'm getting an error "TypeError: Cannot read property 'bind' of undefined" or "TypeError: propListener.apply is not a function"
68+
69+
This error can often happen if you have a Babel plugin that compiles the code in a non-spec compliant way. For example:
70+
71+
```sh
72+
["@babel/plugin-proposal-class-properties", { "loose": true}]
73+
```
74+
75+
The above compiles class properties in `loose` mode, which is not spec compliant. To prevent such issues, avoid using any additional Babel plugins or presets which change the way Metro compiles code by default. Your `babel.config.js` should look like this:
76+
77+
```js
78+
module.exports = {
79+
presets: ['module:metro-react-native-babel-preset'],
80+
};
81+
```
82+
83+
Or if you're using Expo:
84+
85+
```js
86+
module.exports = {
87+
presets: ['babel-preset-expo'],
88+
};
89+
```
90+
91+
If you have additional options configured here, try removing them to see if it fixes the issue. After changing config, always clear the cache.
92+
93+
If you're using Expo, run:
94+
95+
```sh
96+
expo start -c
97+
```
98+
99+
If you're not using Expo, run:
100+
101+
```sh
102+
npx react-native start --reset-cache
103+
```
104+
105+
## I linked `react-native-gesture-handler` library but gestures won't work on Android
66106
67107
This might happen if you didn't update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it uses the root view wrapper provided by this library.
68108

website/versioned_docs/version-5.x/hello-react-navigation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ Sometimes we might want to pass additional props to a screen. We can do that wit
134134
</Stack.Screen>
135135
```
136136

137-
> Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to prevent avoid performance issues.
137+
> Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues.
138138
139139
## What's next?
140140

website/versioned_docs/version-5.x/troubleshooting.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ original_id: troubleshooting
77

88
This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation. These issues may or may not be related to React Navigation itself.
99

10+
Before troubleshooting an issue, make sure that you have upgraded to **the latest available versions** of the packages. You can install the latest versions by installing the packages again (e.g. `npm install package-name`).
11+
1012
## I'm getting an error "Unable to resolve module" after updating to the latest version
1113

1214
This might happen for 2 reasons:
@@ -67,17 +69,13 @@ react-native unlink react-native-gesture-handler
6769
If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
6870

6971
```sh
70-
cd ios; pod install; cd ..
72+
cd ios
73+
pod install
74+
cd ..
7175
```
7276

7377
Now rebuild the app and test on your device or simulator.
7478

75-
## I linked RNGestureHandler library but gestures won't work on Android
76-
77-
This might happen if you didn't update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it uses the root view wrapper provided by this library.
78-
79-
Check how to do it [here](https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html).
80-
8179
## Pressing buttons don't do anything
8280

8381
Make sure you're not connected to Chrome Debugger. When connected to Chrome Debugger, you might encounter various issues related to timing, such as button presses and animations not working correctly.

0 commit comments

Comments
 (0)