You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: versioned_docs/version-6.x/drawer-layout.md
+18-5
Original file line number
Diff line number
Diff line change
@@ -38,12 +38,25 @@ Then, you need to install and configure the libraries that are required by the d
38
38
39
39
The Drawer supports both Reanimated 1 and the latest version of Reanimated. If you want to use the latest version of Reanimated, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
40
40
41
-
2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
41
+
2. To finalize the installation of `react-native-gesture-handler`, we need to conditionally import it. To do this, create 2 files:
42
42
43
-
```js
43
+
```js title="gesture-handler.native.js"
44
+
// Only import react-native-gesture-handler on native platforms
44
45
import'react-native-gesture-handler';
45
46
```
46
47
48
+
```js title="gesture-handler.js"
49
+
// Don't import react-native-gesture-handler on web
50
+
```
51
+
52
+
Now, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
53
+
54
+
```js
55
+
import'./gesture-handler';
56
+
```
57
+
58
+
Since the drawer layout doesn't use `react-native-gesture-handler` on the web, this avoids unnecessarily increasing the bundle size.
59
+
47
60
:::warning
48
61
49
62
If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
@@ -52,9 +65,9 @@ Then, you need to install and configure the libraries that are required by the d
52
65
53
66
3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
54
67
55
-
```bash
56
-
npx pod-install ios
57
-
```
68
+
```bash
69
+
npx pod-install ios
70
+
```
58
71
59
72
We're done! Now you can build and run the app on your device/simulator.
Copy file name to clipboardExpand all lines: versioned_docs/version-6.x/drawer-navigator.md
+18-5
Original file line number
Diff line number
Diff line change
@@ -38,12 +38,25 @@ Then, you need to install and configure the libraries that are required by the d
38
38
39
39
The Drawer supports both Reanimated 1 and the latest version of Reanimated. If you want to use the latest version of Reanimated, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
40
40
41
-
2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
41
+
2. To finalize the installation of `react-native-gesture-handler`, we need to conditionally import it. To do this, create 2 files:
42
42
43
-
```js
43
+
```js title="gesture-handler.native.js"
44
+
// Only import react-native-gesture-handler on native platforms
44
45
import'react-native-gesture-handler';
45
46
```
46
47
48
+
```js title="gesture-handler.js"
49
+
// Don't import react-native-gesture-handler on web
50
+
```
51
+
52
+
Now, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
53
+
54
+
```js
55
+
import'./gesture-handler';
56
+
```
57
+
58
+
Since the drawer navigator doesn't use `react-native-gesture-handler` on the web, this avoids unnecessarily increasing the bundle size.
59
+
47
60
:::warning
48
61
49
62
If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
@@ -52,9 +65,9 @@ Then, you need to install and configure the libraries that are required by the d
52
65
53
66
3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
Copy file name to clipboardExpand all lines: versioned_docs/version-6.x/stack-navigator.md
+18-5
Original file line number
Diff line number
Diff line change
@@ -38,12 +38,25 @@ Then, you need to install and configure the libraries that are required by the s
38
38
npm install react-native-gesture-handler
39
39
```
40
40
41
-
2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
41
+
2. To finalize the installation of `react-native-gesture-handler`, we need to conditionally import it. To do this, create 2 files:
42
42
43
-
```js
43
+
```js title="gesture-handler.native.js"
44
+
// Only import react-native-gesture-handler on native platforms
44
45
import'react-native-gesture-handler';
45
46
```
46
47
48
+
```js title="gesture-handler.js"
49
+
// Don't import react-native-gesture-handler on web
50
+
```
51
+
52
+
Now, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
53
+
54
+
```js
55
+
import'./gesture-handler';
56
+
```
57
+
58
+
Since the stack navigator doesn't use `react-native-gesture-handler` on the web, this avoids unnecessarily increasing the bundle size.
59
+
47
60
:::warning
48
61
49
62
If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
@@ -66,9 +79,9 @@ Then, you need to install and configure the libraries that are required by the s
66
79
67
80
4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/drawer-layout.md
+18-5
Original file line number
Diff line number
Diff line change
@@ -38,12 +38,25 @@ Then, you need to install and configure the libraries that are required by the d
38
38
39
39
2. Configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
40
40
41
-
3. To finalize the installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
41
+
3. To finalize the installation of `react-native-gesture-handler`, we need to conditionally import it. To do this, create 2 files:
42
42
43
-
```js
43
+
```js title="gesture-handler.native.js"
44
+
// Only import react-native-gesture-handler on native platforms
44
45
import'react-native-gesture-handler';
45
46
```
46
47
48
+
```js title="gesture-handler.js"
49
+
// Don't import react-native-gesture-handler on web
50
+
```
51
+
52
+
Now, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
53
+
54
+
```js
55
+
import'./gesture-handler';
56
+
```
57
+
58
+
Since the drawer layout doesn't use `react-native-gesture-handler` on the web, this avoids unnecessarily increasing the bundle size.
59
+
47
60
:::warning
48
61
49
62
If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
@@ -52,9 +65,9 @@ Then, you need to install and configure the libraries that are required by the d
52
65
53
66
4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
54
67
55
-
```bash
56
-
npx pod-install ios
57
-
```
68
+
```bash
69
+
npx pod-install ios
70
+
```
58
71
59
72
We're done! Now you can build and run the app on your device/simulator.
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/drawer-navigator.md
+18-5
Original file line number
Diff line number
Diff line change
@@ -38,12 +38,25 @@ Then, you need to install and configure the libraries that are required by the d
38
38
39
39
2. Configure the Reanimated Babel Plugin in your project following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
40
40
41
-
3. To finalize the installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
41
+
3. To finalize the installation of `react-native-gesture-handler`, we need to conditionally import it. To do this, create 2 files:
42
42
43
-
```js
43
+
```js title="gesture-handler.native.js"
44
+
// Only import react-native-gesture-handler on native platforms
44
45
import'react-native-gesture-handler';
45
46
```
46
47
48
+
```js title="gesture-handler.js"
49
+
// Don't import react-native-gesture-handler on web
50
+
```
51
+
52
+
Now, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
53
+
54
+
```js
55
+
import'./gesture-handler';
56
+
```
57
+
58
+
Since the drawer navigator doesn't use `react-native-gesture-handler` on the web, this avoids unnecessarily increasing the bundle size.
59
+
47
60
:::warning
48
61
49
62
If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
@@ -52,9 +65,9 @@ Then, you need to install and configure the libraries that are required by the d
52
65
53
66
4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/stack-navigator.md
+18-5
Original file line number
Diff line number
Diff line change
@@ -42,12 +42,25 @@ Then, you need to install and configure the libraries that are required by the s
42
42
npm install react-native-gesture-handler
43
43
```
44
44
45
-
2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
45
+
2. To finalize the installation of `react-native-gesture-handler`, we need to conditionally import it. To do this, create 2 files:
46
46
47
-
```js
47
+
```js title="gesture-handler.native.js"
48
+
// Only import react-native-gesture-handler on native platforms
48
49
import'react-native-gesture-handler';
49
50
```
50
51
52
+
```js title="gesture-handler.js"
53
+
// Don't import react-native-gesture-handler on web
54
+
```
55
+
56
+
Now, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
57
+
58
+
```js
59
+
import'./gesture-handler';
60
+
```
61
+
62
+
Since the stack navigator doesn't use `react-native-gesture-handler` on the web, this avoids unnecessarily increasing the bundle size.
63
+
51
64
:::warning
52
65
53
66
If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
@@ -70,9 +83,9 @@ Then, you need to install and configure the libraries that are required by the s
70
83
71
84
4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
0 commit comments