*/}
+
Date: Thu, 12 Sep 2024 09:27:52 +0200
Subject: [PATCH 07/38] fix(Android): Request layout manually for CustomToolbar
below Android API 29 (#2332)
## Description
On Android API 29, while using `windowSoftInputMode` with `adjustPan`
option, requestLayout is not being called while subviews are being
added. That's because while ScreenStackHeaderConfig adds view to the
toolbar, onMeasure is being called and even if we're calling
`requestLayout` on parent, Android is returning from requesting the
layout, as there's somehow ongoing layout. This is not the case for
Android API 30 and higher.
The solution is to request another layout via ReactChoreographer (same
as in ScreenContainer) to call our own layout callback on the next
frame.
## Changes
- Request layout via ReactChoreographer on `requestLayout` call in
CustomToolbar class
## Screenshots / GIFs
## Test code and steps to reproduce
Use `Test2332.tsx` test case to check whether this PR works properly.
## Checklist
- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes
---------
Co-authored-by: Kacper Kafara
---
.../com/swmansion/rnscreens/CustomToolbar.kt | 41 ++++++++-
apps/src/tests/Test2332.tsx | 86 +++++++++++++++++++
apps/src/tests/index.ts | 2 +-
3 files changed, 127 insertions(+), 2 deletions(-)
create mode 100644 apps/src/tests/Test2332.tsx
diff --git a/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt b/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
index 7168a4c6fd..0682ebc063 100644
--- a/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
@@ -2,11 +2,50 @@ package com.swmansion.rnscreens
import android.annotation.SuppressLint
import android.content.Context
+import android.os.Build
import androidx.appcompat.widget.Toolbar
+import com.facebook.react.modules.core.ChoreographerCompat
+import com.facebook.react.modules.core.ReactChoreographer
// This class is used to store config closer to search bar
@SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
open class CustomToolbar(
context: Context,
val config: ScreenStackHeaderConfig,
-) : Toolbar(context)
+) : Toolbar(context) {
+ private var isLayoutEnqueued = false
+ private val layoutCallback: ChoreographerCompat.FrameCallback =
+ object : ChoreographerCompat.FrameCallback() {
+ override fun doFrame(frameTimeNanos: Long) {
+ isLayoutEnqueued = false
+ measure(
+ MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+ MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+ )
+ layout(left, top, right, bottom)
+ }
+ }
+
+ override fun requestLayout() {
+ super.requestLayout()
+ if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.Q) {
+ // Below Android API 29, layout is not being requested when subviews are being added to the layout,
+ // leading to having their subviews in position 0,0 of the toolbar (as Android don't calculate
+ // the position of each subview, even if Yoga has correctly set their width and height).
+ // This is mostly the issue, when windowSoftInputMode is set to adjustPan in AndroidManifest.
+ // Thus, we're manually calling the layout **after** the current layout.
+ @Suppress("SENSELESS_COMPARISON") // mLayoutCallback can be null here since this method can be called in init
+ if (!isLayoutEnqueued && layoutCallback != null) {
+ isLayoutEnqueued = true
+ // we use NATIVE_ANIMATED_MODULE choreographer queue because it allows us to catch the current
+ // looper loop instead of enqueueing the update in the next loop causing a one frame delay.
+ ReactChoreographer
+ .getInstance()
+ .postFrameCallback(
+ ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE,
+ layoutCallback,
+ )
+ }
+ }
+ }
+}
diff --git a/apps/src/tests/Test2332.tsx b/apps/src/tests/Test2332.tsx
new file mode 100644
index 0000000000..9728439194
--- /dev/null
+++ b/apps/src/tests/Test2332.tsx
@@ -0,0 +1,86 @@
+/**
+ *
+ * IMPORTANT! READ BEFORE TESTING!
+ * Remember to switch windowSoftInputMode to `adjustPan` in AndroidManifest.xml file.
+ *
+ */
+
+import React, { useLayoutEffect } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useNavigation } from '@react-navigation/native';
+import { Button, Text, TextInput, View } from 'react-native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { HeaderButton } from '@react-navigation/elements';
+type RootStackNavigatorParamsList = {
+ Home: undefined;
+ Details: undefined;
+};
+const Stack = createNativeStackNavigator();
+const HomeScreen = () => {
+ const navigation =
+ useNavigation>();
+ const onHandlePress = () => {
+ navigation.navigate('Details');
+ };
+ return (
+
+ HomeScreen
+
+
+
+
+ );
+};
+const DetailsScreen = () => {
+ const [text, setText] = React.useState('');
+ const navigation =
+ useNavigation>();
+ useLayoutEffect(() => {
+ navigation.setOptions({
+ headerTitle: 'Detail Screen',
+ headerRight: () => {
+ if (text.length === 0) {
+ return null;
+ }
+ return (
+
+ X
+
+ );
+ },
+ });
+ }, [navigation, text]);
+ const onHandlePress = () => {
+ navigation.goBack();
+ };
+
+ return (
+
+ RegisterScreen
+
+ {
+ setText(text);
+ }}
+ />
+
+
+
+
+ );
+};
+function App() {
+ return (
+
+
+
+
+ );
+}
+export default App;
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index 1b7139c0ca..ae3cf766df 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -111,6 +111,6 @@ export { default as Test2235 } from './Test2235';
export { default as Test2252 } from './Test2252';
export { default as Test2271 } from './Test2271';
export { default as Test2282 } from './Test2282';
+export { default as Test2232 } from './Test2332';
export { default as TestScreenAnimation } from './TestScreenAnimation';
export { default as TestHeader } from './TestHeader';
-
From 61ef1865c19a1eef005120001cbba9e72db388dc Mon Sep 17 00:00:00 2001
From: Maksymilian Galas
Date: Thu, 12 Sep 2024 13:52:45 +0200
Subject: [PATCH 08/38] fix(iOS): modal not presenting when deep in stack
(#2335)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## Description
When 3 screens with a ‘modal’ presentation mode are stacked, navigating
to a screen outside of the current stack is not functioning correctly.
## Changes
Removed dismissing logic for `lastModalVc`.
## Screenshots / GIFs
### Before
https://github.com/user-attachments/assets/d4991253-52f1-4f35-8698-242d98b218d1
### After
https://github.com/user-attachments/assets/571ebd45-7319-4225-ab5b-4f68027f4f09
## Test code and steps to reproduce
`TestModalNavigation` was added to tests.
## Checklist
- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes
Co-authored-by: Kacper Kafara
---
apps/src/tests/TestModalNavigation.tsx | 116 +++++++++++++++++++++++++
apps/src/tests/index.ts | 1 +
ios/RNSScreenStack.mm | 7 --
3 files changed, 117 insertions(+), 7 deletions(-)
create mode 100644 apps/src/tests/TestModalNavigation.tsx
diff --git a/apps/src/tests/TestModalNavigation.tsx b/apps/src/tests/TestModalNavigation.tsx
new file mode 100644
index 0000000000..51af89f0d3
--- /dev/null
+++ b/apps/src/tests/TestModalNavigation.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
+
+type StackParamList = {
+ Home: undefined;
+ NestedStack: undefined;
+ MainStackScreen: undefined;
+ Screen1: undefined;
+ Screen2: undefined;
+ Screen3: undefined;
+};
+
+function HomeScreen({
+ navigation,
+}: NativeStackScreenProps) {
+ return (
+
+ Home Screen
+
+ );
+}
+
+function MainStackScreen() {
+ return (
+
+ Main stack screen
+
+ );
+}
+
+function Screen1({
+ navigation,
+}: NativeStackScreenProps) {
+ return (
+
+ Screen 1
+
+ );
+};
+
+function Screen2({
+ navigation,
+}: NativeStackScreenProps) {
+ return (
+
+ Screen 2
+
+ );
+};
+
+function Screen3({
+ navigation,
+}: NativeStackScreenProps) {
+ return (
+
+ Screen 3
+
+ );
+};
+
+const Stack = createNativeStackNavigator();
+const NestedStack = createNativeStackNavigator();
+
+function RootStack() {
+ return (
+
+
+ );
+}
+
+function NestedStackScreen() {
+ return (
+
+
+ );
+}
+
+export default function App() {
+ return (
+
+
+ );
+}
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index ae3cf766df..7b6fe91b30 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -114,3 +114,4 @@ export { default as Test2282 } from './Test2282';
export { default as Test2232 } from './Test2332';
export { default as TestScreenAnimation } from './TestScreenAnimation';
export { default as TestHeader } from './TestHeader';
+export { default as TestModalNavigation } from './TestModalNavigation';
diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 50e7cc0fe1..14d1872b50 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -513,13 +513,6 @@ - (void)setModalViewControllers:(NSArray *)controllers
[changeRootController dismissViewControllerAnimated:shouldAnimate completion:finish];
return;
}
-
- UIViewController *lastModalVc = [self lastFromPresentedViewControllerChainStartingFrom:firstModalToBeDismissed];
-
- if (lastModalVc != firstModalToBeDismissed) {
- [lastModalVc dismissViewControllerAnimated:shouldAnimate completion:finish];
- return;
- }
}
// changeRootController does not have presentedViewController but it does not mean that no modals are in presentation;
From 52e9a825f9226b9f14a19fa77325fd8c8de9f3a9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 25 Sep 2024 10:27:48 +0200
Subject: [PATCH 09/38] chore(deps): bump express from 4.19.2 to 4.21.0 in
/docs (#2348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Bumps [express](https://github.com/expressjs/express) from 4.19.2 to
4.21.0.
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/software-mansion/react-native-screens/network/alerts).
Signed-off-by: dependabot[bot]
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
docs/yarn.lock | 97 +++++++++++++++++++++++++++-----------------------
1 file changed, 52 insertions(+), 45 deletions(-)
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 63b02bdec4..c6be251c77 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -4122,9 +4122,9 @@ __metadata:
languageName: node
linkType: hard
-"body-parser@npm:1.20.2":
- version: 1.20.2
- resolution: "body-parser@npm:1.20.2"
+"body-parser@npm:1.20.3":
+ version: 1.20.3
+ resolution: "body-parser@npm:1.20.3"
dependencies:
bytes: "npm:3.1.2"
content-type: "npm:~1.0.5"
@@ -4134,11 +4134,11 @@ __metadata:
http-errors: "npm:2.0.0"
iconv-lite: "npm:0.4.24"
on-finished: "npm:2.4.1"
- qs: "npm:6.11.0"
+ qs: "npm:6.13.0"
raw-body: "npm:2.5.2"
type-is: "npm:~1.6.18"
unpipe: "npm:1.0.0"
- checksum: 10c0/06f1438fff388a2e2354c96aa3ea8147b79bfcb1262dfcc2aae68ec13723d01d5781680657b74e9f83c808266d5baf52804032fbde2b7382b89bd8cdb273ace9
+ checksum: 10c0/0a9a93b7518f222885498dcecaad528cf010dd109b071bf471c93def4bfe30958b83e03496eb9c1ad4896db543d999bb62be1a3087294162a88cfa1b42c16310
languageName: node
linkType: hard
@@ -5486,6 +5486,13 @@ __metadata:
languageName: node
linkType: hard
+"encodeurl@npm:~2.0.0":
+ version: 2.0.0
+ resolution: "encodeurl@npm:2.0.0"
+ checksum: 10c0/5d317306acb13e6590e28e27924c754163946a2480de11865c991a3a7eed4315cd3fba378b543ca145829569eefe9b899f3d84bb09870f675ae60bc924b01ceb
+ languageName: node
+ linkType: hard
+
"encoding@npm:^0.1.13":
version: 0.1.13
resolution: "encoding@npm:0.1.13"
@@ -5722,41 +5729,41 @@ __metadata:
linkType: hard
"express@npm:^4.17.3":
- version: 4.19.2
- resolution: "express@npm:4.19.2"
+ version: 4.21.0
+ resolution: "express@npm:4.21.0"
dependencies:
accepts: "npm:~1.3.8"
array-flatten: "npm:1.1.1"
- body-parser: "npm:1.20.2"
+ body-parser: "npm:1.20.3"
content-disposition: "npm:0.5.4"
content-type: "npm:~1.0.4"
cookie: "npm:0.6.0"
cookie-signature: "npm:1.0.6"
debug: "npm:2.6.9"
depd: "npm:2.0.0"
- encodeurl: "npm:~1.0.2"
+ encodeurl: "npm:~2.0.0"
escape-html: "npm:~1.0.3"
etag: "npm:~1.8.1"
- finalhandler: "npm:1.2.0"
+ finalhandler: "npm:1.3.1"
fresh: "npm:0.5.2"
http-errors: "npm:2.0.0"
- merge-descriptors: "npm:1.0.1"
+ merge-descriptors: "npm:1.0.3"
methods: "npm:~1.1.2"
on-finished: "npm:2.4.1"
parseurl: "npm:~1.3.3"
- path-to-regexp: "npm:0.1.7"
+ path-to-regexp: "npm:0.1.10"
proxy-addr: "npm:~2.0.7"
- qs: "npm:6.11.0"
+ qs: "npm:6.13.0"
range-parser: "npm:~1.2.1"
safe-buffer: "npm:5.2.1"
- send: "npm:0.18.0"
- serve-static: "npm:1.15.0"
+ send: "npm:0.19.0"
+ serve-static: "npm:1.16.2"
setprototypeof: "npm:1.2.0"
statuses: "npm:2.0.1"
type-is: "npm:~1.6.18"
utils-merge: "npm:1.0.1"
vary: "npm:~1.1.2"
- checksum: 10c0/e82e2662ea9971c1407aea9fc3c16d6b963e55e3830cd0ef5e00b533feda8b770af4e3be630488ef8a752d7c75c4fcefb15892868eeaafe7353cb9e3e269fdcb
+ checksum: 10c0/4cf7ca328f3fdeb720f30ccb2ea7708bfa7d345f9cc460b64a82bf1b2c91e5b5852ba15a9a11b2a165d6089acf83457fc477dc904d59cd71ed34c7a91762c6cc
languageName: node
linkType: hard
@@ -5898,18 +5905,18 @@ __metadata:
languageName: node
linkType: hard
-"finalhandler@npm:1.2.0":
- version: 1.2.0
- resolution: "finalhandler@npm:1.2.0"
+"finalhandler@npm:1.3.1":
+ version: 1.3.1
+ resolution: "finalhandler@npm:1.3.1"
dependencies:
debug: "npm:2.6.9"
- encodeurl: "npm:~1.0.2"
+ encodeurl: "npm:~2.0.0"
escape-html: "npm:~1.0.3"
on-finished: "npm:2.4.1"
parseurl: "npm:~1.3.3"
statuses: "npm:2.0.1"
unpipe: "npm:~1.0.0"
- checksum: 10c0/64b7e5ff2ad1fcb14931cd012651631b721ce657da24aedb5650ddde9378bf8e95daa451da43398123f5de161a81e79ff5affe4f9f2a6d2df4a813d6d3e254b7
+ checksum: 10c0/d38035831865a49b5610206a3a9a9aae4e8523cbbcd01175d0480ffbf1278c47f11d89be3ca7f617ae6d94f29cf797546a4619cd84dd109009ef33f12f69019f
languageName: node
linkType: hard
@@ -7698,10 +7705,10 @@ __metadata:
languageName: node
linkType: hard
-"merge-descriptors@npm:1.0.1":
- version: 1.0.1
- resolution: "merge-descriptors@npm:1.0.1"
- checksum: 10c0/b67d07bd44cfc45cebdec349bb6e1f7b077ee2fd5beb15d1f7af073849208cb6f144fe403e29a36571baf3f4e86469ac39acf13c318381e958e186b2766f54ec
+"merge-descriptors@npm:1.0.3":
+ version: 1.0.3
+ resolution: "merge-descriptors@npm:1.0.3"
+ checksum: 10c0/866b7094afd9293b5ea5dcd82d71f80e51514bed33b4c4e9f516795dc366612a4cbb4dc94356e943a8a6914889a914530badff27f397191b9b75cda20b6bae93
languageName: node
linkType: hard
@@ -8460,10 +8467,10 @@ __metadata:
languageName: node
linkType: hard
-"path-to-regexp@npm:0.1.7":
- version: 0.1.7
- resolution: "path-to-regexp@npm:0.1.7"
- checksum: 10c0/50a1ddb1af41a9e68bd67ca8e331a705899d16fb720a1ea3a41e310480948387daf603abb14d7b0826c58f10146d49050a1291ba6a82b78a382d1c02c0b8f905
+"path-to-regexp@npm:0.1.10":
+ version: 0.1.10
+ resolution: "path-to-regexp@npm:0.1.10"
+ checksum: 10c0/34196775b9113ca6df88e94c8d83ba82c0e1a2063dd33bfe2803a980da8d49b91db8104f49d5191b44ea780d46b8670ce2b7f4a5e349b0c48c6779b653f1afe4
languageName: node
linkType: hard
@@ -9136,12 +9143,12 @@ __metadata:
languageName: node
linkType: hard
-"qs@npm:6.11.0":
- version: 6.11.0
- resolution: "qs@npm:6.11.0"
+"qs@npm:6.13.0":
+ version: 6.13.0
+ resolution: "qs@npm:6.13.0"
dependencies:
- side-channel: "npm:^1.0.4"
- checksum: 10c0/4e4875e4d7c7c31c233d07a448e7e4650f456178b9dd3766b7cfa13158fdb24ecb8c4f059fa91e820dc6ab9f2d243721d071c9c0378892dcdad86e9e9a27c68f
+ side-channel: "npm:^1.0.6"
+ checksum: 10c0/62372cdeec24dc83a9fb240b7533c0fdcf0c5f7e0b83343edd7310f0ab4c8205a5e7c56406531f2e47e1b4878a3821d652be4192c841de5b032ca83619d8f860
languageName: node
linkType: hard
@@ -9960,9 +9967,9 @@ __metadata:
languageName: node
linkType: hard
-"send@npm:0.18.0":
- version: 0.18.0
- resolution: "send@npm:0.18.0"
+"send@npm:0.19.0":
+ version: 0.19.0
+ resolution: "send@npm:0.19.0"
dependencies:
debug: "npm:2.6.9"
depd: "npm:2.0.0"
@@ -9977,7 +9984,7 @@ __metadata:
on-finished: "npm:2.4.1"
range-parser: "npm:~1.2.1"
statuses: "npm:2.0.1"
- checksum: 10c0/0eb134d6a51fc13bbcb976a1f4214ea1e33f242fae046efc311e80aff66c7a43603e26a79d9d06670283a13000e51be6e0a2cb80ff0942eaf9f1cd30b7ae736a
+ checksum: 10c0/ea3f8a67a8f0be3d6bf9080f0baed6d2c51d11d4f7b4470de96a5029c598a7011c497511ccc28968b70ef05508675cebff27da9151dd2ceadd60be4e6cf845e3
languageName: node
linkType: hard
@@ -10021,15 +10028,15 @@ __metadata:
languageName: node
linkType: hard
-"serve-static@npm:1.15.0":
- version: 1.15.0
- resolution: "serve-static@npm:1.15.0"
+"serve-static@npm:1.16.2":
+ version: 1.16.2
+ resolution: "serve-static@npm:1.16.2"
dependencies:
- encodeurl: "npm:~1.0.2"
+ encodeurl: "npm:~2.0.0"
escape-html: "npm:~1.0.3"
parseurl: "npm:~1.3.3"
- send: "npm:0.18.0"
- checksum: 10c0/fa9f0e21a540a28f301258dfe1e57bb4f81cd460d28f0e973860477dd4acef946a1f41748b5bd41c73b621bea2029569c935faa38578fd34cd42a9b4947088ba
+ send: "npm:0.19.0"
+ checksum: 10c0/528fff6f5e12d0c5a391229ad893910709bc51b5705962b09404a1d813857578149b8815f35d3ee5752f44cd378d0f31669d4b1d7e2d11f41e08283d5134bd1f
languageName: node
linkType: hard
@@ -10120,7 +10127,7 @@ __metadata:
languageName: node
linkType: hard
-"side-channel@npm:^1.0.4":
+"side-channel@npm:^1.0.6":
version: 1.0.6
resolution: "side-channel@npm:1.0.6"
dependencies:
From d01f9604ded46204ea48f74fd1b69f2fde6c8ff7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 25 Sep 2024 10:29:18 +0200
Subject: [PATCH 10/38] chore(deps): bump serve-static from 1.15.0 to 1.16.2 in
/Example (#2343)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
[//]: # (dependabot-start)
⚠️ **Dependabot is rebasing this PR** ⚠️
Rebasing might not happen immediately, so don't worry if this takes some
time.
Note: if you make any changes to this PR yourself, they will take
precedence over the rebase.
---
[//]: # (dependabot-end)
Bumps [serve-static](https://github.com/expressjs/serve-static) from
1.15.0 to 1.16.2.
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/software-mansion/react-native-screens/network/alerts).
Signed-off-by: dependabot[bot]
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
Example/yarn.lock | 25 ++++++++++++++++---------
1 file changed, 16 insertions(+), 9 deletions(-)
diff --git a/Example/yarn.lock b/Example/yarn.lock
index eb58dfbda5..e20b7d37b2 100644
--- a/Example/yarn.lock
+++ b/Example/yarn.lock
@@ -5505,6 +5505,13 @@ __metadata:
languageName: node
linkType: hard
+"encodeurl@npm:~2.0.0":
+ version: 2.0.0
+ resolution: "encodeurl@npm:2.0.0"
+ checksum: 10c0/5d317306acb13e6590e28e27924c754163946a2480de11865c991a3a7eed4315cd3fba378b543ca145829569eefe9b899f3d84bb09870f675ae60bc924b01ceb
+ languageName: node
+ linkType: hard
+
"encoding@npm:^0.1.13":
version: 0.1.13
resolution: "encoding@npm:0.1.13"
@@ -10963,9 +10970,9 @@ __metadata:
languageName: node
linkType: hard
-"send@npm:0.18.0":
- version: 0.18.0
- resolution: "send@npm:0.18.0"
+"send@npm:0.19.0":
+ version: 0.19.0
+ resolution: "send@npm:0.19.0"
dependencies:
debug: "npm:2.6.9"
depd: "npm:2.0.0"
@@ -10980,7 +10987,7 @@ __metadata:
on-finished: "npm:2.4.1"
range-parser: "npm:~1.2.1"
statuses: "npm:2.0.1"
- checksum: 10c0/0eb134d6a51fc13bbcb976a1f4214ea1e33f242fae046efc311e80aff66c7a43603e26a79d9d06670283a13000e51be6e0a2cb80ff0942eaf9f1cd30b7ae736a
+ checksum: 10c0/ea3f8a67a8f0be3d6bf9080f0baed6d2c51d11d4f7b4470de96a5029c598a7011c497511ccc28968b70ef05508675cebff27da9151dd2ceadd60be4e6cf845e3
languageName: node
linkType: hard
@@ -11001,14 +11008,14 @@ __metadata:
linkType: hard
"serve-static@npm:^1.13.1":
- version: 1.15.0
- resolution: "serve-static@npm:1.15.0"
+ version: 1.16.2
+ resolution: "serve-static@npm:1.16.2"
dependencies:
- encodeurl: "npm:~1.0.2"
+ encodeurl: "npm:~2.0.0"
escape-html: "npm:~1.0.3"
parseurl: "npm:~1.3.3"
- send: "npm:0.18.0"
- checksum: 10c0/fa9f0e21a540a28f301258dfe1e57bb4f81cd460d28f0e973860477dd4acef946a1f41748b5bd41c73b621bea2029569c935faa38578fd34cd42a9b4947088ba
+ send: "npm:0.19.0"
+ checksum: 10c0/528fff6f5e12d0c5a391229ad893910709bc51b5705962b09404a1d813857578149b8815f35d3ee5752f44cd378d0f31669d4b1d7e2d11f41e08283d5134bd1f
languageName: node
linkType: hard
From f80281bf6785aea0c65ec12832d187ff582e3790 Mon Sep 17 00:00:00 2001
From: Christoph Pader
Date: Wed, 25 Sep 2024 10:31:22 +0200
Subject: [PATCH 11/38] feat(Android): add ios like `ios_from_left` slide
animation (#2328)
## Description
This PR is based on
https://github.com/software-mansion/react-native-screens/pull/1945 and
implements the `ios` animation in the reverse direction (slide in from
left to right, slide out from right to left)
## Changes
## Test code and steps to reproduce
## Checklist
- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Updated documentation:
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [x] Ensured that CI passes
---
.../src/main/java/com/swmansion/rnscreens/Screen.kt | 2 ++
.../main/java/com/swmansion/rnscreens/ScreenStack.kt | 12 +++++++++---
.../com/swmansion/rnscreens/ScreenViewManager.kt | 2 ++
.../base/anim/rns_ios_from_left_background_close.xml | 5 +++++
...ios.xml => rns_ios_from_left_background_open.xml} | 2 +-
.../base/anim/rns_ios_from_left_foreground_close.xml | 6 ++++++
.../base/anim/rns_ios_from_left_foreground_open.xml | 6 ++++++
...s.xml => rns_ios_from_right_background_close.xml} | 0
.../base/anim/rns_ios_from_right_background_open.xml | 5 +++++
...s.xml => rns_ios_from_right_foreground_close.xml} | 0
...os.xml => rns_ios_from_right_foreground_open.xml} | 0
apps/src/screens/Animations.tsx | 2 ++
apps/src/screens/Events.tsx | 2 ++
guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 4 +++-
ios/RNSConvert.mm | 5 ++++-
ios/RNSScreen.mm | 2 ++
native-stack/README.md | 4 +++-
src/fabric/ScreenNativeComponent.ts | 4 +++-
src/native-stack/types.tsx | 4 +++-
src/types.tsx | 8 ++++++--
windows/RNScreens/Screen.h | 4 +++-
21 files changed, 67 insertions(+), 12 deletions(-)
create mode 100644 android/src/main/res/base/anim/rns_ios_from_left_background_close.xml
rename android/src/main/res/base/anim/{rns_slide_out_to_left_ios.xml => rns_ios_from_left_background_open.xml} (86%)
create mode 100644 android/src/main/res/base/anim/rns_ios_from_left_foreground_close.xml
create mode 100644 android/src/main/res/base/anim/rns_ios_from_left_foreground_open.xml
rename android/src/main/res/base/anim/{rns_slide_in_from_left_ios.xml => rns_ios_from_right_background_close.xml} (100%)
create mode 100644 android/src/main/res/base/anim/rns_ios_from_right_background_open.xml
rename android/src/main/res/base/anim/{rns_slide_out_to_right_ios.xml => rns_ios_from_right_foreground_close.xml} (100%)
rename android/src/main/res/base/anim/{rns_slide_in_from_right_ios.xml => rns_ios_from_right_foreground_open.xml} (100%)
diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
index 4ae30f5538..a6cb8c7501 100644
--- a/android/src/main/java/com/swmansion/rnscreens/Screen.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
@@ -436,6 +436,8 @@ class Screen(
SLIDE_FROM_LEFT,
FADE_FROM_BOTTOM,
IOS,
+ IOS_FROM_RIGHT,
+ IOS_FROM_LEFT,
}
enum class ReplaceAnimation {
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
index 27624fdf70..b700bffffd 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
@@ -182,7 +182,9 @@ class ScreenStack(
R.anim.rns_no_animation_medium,
)
StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_fade_from_bottom, R.anim.rns_no_animation_350)
- StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_right_ios, R.anim.rns_slide_out_to_left_ios)
+ StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)
+ StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)
+ StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_foreground_open, R.anim.rns_ios_from_left_background_open)
}
} else {
when (stackAnimation) {
@@ -220,7 +222,9 @@ class ScreenStack(
R.anim.rns_slide_out_to_bottom,
)
StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_no_animation_250, R.anim.rns_fade_to_bottom)
- StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_left_ios, R.anim.rns_slide_out_to_right_ios)
+ StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_close, R.anim.rns_ios_from_right_background_close)
+ StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_background_close, R.anim.rns_ios_from_right_foreground_close)
+ StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_background_close, R.anim.rns_ios_from_left_foreground_close)
}
}
}
@@ -413,6 +417,8 @@ class ScreenStack(
Build.VERSION.SDK_INT >= 33 ||
fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM ||
fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM ||
- fragmentWrapper.screen.stackAnimation === StackAnimation.IOS
+ fragmentWrapper.screen.stackAnimation === StackAnimation.IOS ||
+ fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_RIGHT ||
+ fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_LEFT
}
}
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
index 9f0f0ab94c..de5be092b5 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
@@ -143,6 +143,8 @@ open class ScreenViewManager :
"slide_from_bottom" -> Screen.StackAnimation.SLIDE_FROM_BOTTOM
"fade_from_bottom" -> Screen.StackAnimation.FADE_FROM_BOTTOM
"ios" -> Screen.StackAnimation.IOS
+ "ios_from_right" -> Screen.StackAnimation.IOS_FROM_RIGHT
+ "ios_from_left" -> Screen.StackAnimation.IOS_FROM_LEFT
else -> throw JSApplicationIllegalArgumentException("Unknown animation type $animation")
}
}
diff --git a/android/src/main/res/base/anim/rns_ios_from_left_background_close.xml b/android/src/main/res/base/anim/rns_ios_from_left_background_close.xml
new file mode 100644
index 0000000000..5d75e0b6b9
--- /dev/null
+++ b/android/src/main/res/base/anim/rns_ios_from_left_background_close.xml
@@ -0,0 +1,5 @@
+
+
Date: Wed, 25 Sep 2024 16:56:50 +0200
Subject: [PATCH 13/38] feat: add basic React Server Component support (#2170)
## Description
Add basic support for React Server Components support.
Related PRs for more context:
- https://github.com/necolas/react-native-web/pull/2678
- https://github.com/th3rdwave/react-native-safe-area-context/pull/502
- https://github.com/software-mansion/react-native-svg/pull/2287
## Changes
- Added basic React Server Component support
## Test code and steps to reproduce
- It's kinda hard to test this E2E. I wrote a small jest runner in
jest-expo which executes in RSC mode, but it requires React 19 to work.
Here's where I tested this patch https://github.com/expo/expo/pull/29404
- It will likely break between now and the full release, but this should
at least reduce the number of patches required to work on Expo Router
support.
- There's pretty good compilation on web:
```
2:I["../../node_modules/react-native-web/dist/exports/View/index.js",[],""]
3:I["../../node_modules/react-native-web/dist/exports/Image/index.js",[],""]
1:{"name":"ScreenStackHeaderBackButtonImage","env":"Server","owner":null}
0:D"$1"
0:["$","$L2",null,{"children":["$","$L3",null,{"resizeMode":"center","fadeDuration":0},"$1"]},"$1"]
```
- And more opaque compilation on native platforms:
```
1:I["../../node_modules/react-native-screens/src/components/ScreenStackHeaderConfig.tsx",[],"ScreenStackHeaderBackButtonImage"]
0:["$","$L1",null,{},null]
```
## Checklist
- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Updated documentation:
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes
---
src/TransitionProgressContext.tsx | 2 ++
src/components/Screen.tsx | 2 ++
src/components/Screen.web.tsx | 3 +++
src/components/ScreenContainer.tsx | 2 ++
src/components/ScreenStack.tsx | 2 ++
src/components/ScreenStackHeaderConfig.tsx | 2 ++
src/components/SearchBar.tsx | 2 ++
src/core.ts | 2 ++
src/fabric/FullWindowOverlayNativeComponent.ts | 2 ++
src/fabric/ModalScreenNativeComponent.ts | 2 ++
src/fabric/NativeScreensModule.ts | 2 ++
src/fabric/ScreenContainerNativeComponent.ts | 2 ++
src/fabric/ScreenNativeComponent.ts | 2 ++
src/fabric/ScreenNavigationContainerNativeComponent.ts | 2 ++
src/fabric/ScreenStackHeaderConfigNativeComponent.ts | 2 ++
src/fabric/ScreenStackHeaderSubviewNativeComponent.ts | 2 ++
src/fabric/ScreenStackNativeComponent.ts | 2 ++
src/fabric/SearchBarNativeComponent.ts | 2 ++
src/native-stack/contexts/GHContext.tsx | 2 ++
19 files changed, 39 insertions(+)
diff --git a/src/TransitionProgressContext.tsx b/src/TransitionProgressContext.tsx
index 30cfd6a94f..6382473fbc 100644
--- a/src/TransitionProgressContext.tsx
+++ b/src/TransitionProgressContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import * as React from 'react';
import { Animated } from 'react-native';
diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
index 122a9042b2..b553763834 100644
--- a/src/components/Screen.tsx
+++ b/src/components/Screen.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import React from 'react';
import { Animated, View, Platform } from 'react-native';
diff --git a/src/components/Screen.web.tsx b/src/components/Screen.web.tsx
index c624a49eaf..183b6f8512 100644
--- a/src/components/Screen.web.tsx
+++ b/src/components/Screen.web.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { ScreenProps } from 'react-native-screens';
import { Animated, View } from 'react-native';
import React from 'react';
@@ -8,6 +10,7 @@ export const InnerScreen = View;
// We're using class component here because of the error from reanimated:
// createAnimatedComponent` does not support stateless functional components; use a class component instead.
+// NOTE: React Server Components do not support class components.
export class NativeScreen extends React.Component {
render(): JSX.Element {
let {
diff --git a/src/components/ScreenContainer.tsx b/src/components/ScreenContainer.tsx
index 1a968b2e8a..65c907a1f6 100644
--- a/src/components/ScreenContainer.tsx
+++ b/src/components/ScreenContainer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { Platform, View } from 'react-native';
import React from 'react';
import { ScreenContainerProps } from 'react-native-screens';
diff --git a/src/components/ScreenStack.tsx b/src/components/ScreenStack.tsx
index 46043b6359..310b6a6938 100644
--- a/src/components/ScreenStack.tsx
+++ b/src/components/ScreenStack.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import React from 'react';
import { ScreenStackProps, freezeEnabled } from 'react-native-screens';
import DelayedFreeze from './helpers/DelayedFreeze';
diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
index e65799092b..f3339fa5bd 100644
--- a/src/components/ScreenStackHeaderConfig.tsx
+++ b/src/components/ScreenStackHeaderConfig.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import React from 'react';
import {
HeaderSubviewTypes,
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 981f67dc00..0874531679 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import React from 'react';
import {
isSearchBarAvailableForCurrentPlatform,
diff --git a/src/core.ts b/src/core.ts
index 7a5f3971bc..0a28fdf9e7 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -1,3 +1,5 @@
+'use client';
+
import { Platform, UIManager } from 'react-native';
// const that tells if the library should use new implementation, will be undefined for older versions
diff --git a/src/fabric/FullWindowOverlayNativeComponent.ts b/src/fabric/FullWindowOverlayNativeComponent.ts
index 9d1c662e16..dcbd10d259 100644
--- a/src/fabric/FullWindowOverlayNativeComponent.ts
+++ b/src/fabric/FullWindowOverlayNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts
index ab8a5e889d..979dddeeeb 100644
--- a/src/fabric/ModalScreenNativeComponent.ts
+++ b/src/fabric/ModalScreenNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue } from 'react-native';
import type {
diff --git a/src/fabric/NativeScreensModule.ts b/src/fabric/NativeScreensModule.ts
index 23c2bc767c..bc334ff35f 100644
--- a/src/fabric/NativeScreensModule.ts
+++ b/src/fabric/NativeScreensModule.ts
@@ -1,3 +1,5 @@
+'use client';
+
/* eslint-disable @typescript-eslint/ban-types */
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
diff --git a/src/fabric/ScreenContainerNativeComponent.ts b/src/fabric/ScreenContainerNativeComponent.ts
index 290375c6d5..b8f0c7b250 100644
--- a/src/fabric/ScreenContainerNativeComponent.ts
+++ b/src/fabric/ScreenContainerNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts
index d552cd6bb4..bf7242cfd5 100644
--- a/src/fabric/ScreenNativeComponent.ts
+++ b/src/fabric/ScreenNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue } from 'react-native';
import type {
diff --git a/src/fabric/ScreenNavigationContainerNativeComponent.ts b/src/fabric/ScreenNavigationContainerNativeComponent.ts
index 89fb72f164..906ae64047 100644
--- a/src/fabric/ScreenNavigationContainerNativeComponent.ts
+++ b/src/fabric/ScreenNavigationContainerNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
diff --git a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
index de0574aa1b..9bf6634e24 100644
--- a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
+++ b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue } from 'react-native';
import type {
diff --git a/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts b/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
index 625e578459..189702dc13 100644
--- a/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
+++ b/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
diff --git a/src/fabric/ScreenStackNativeComponent.ts b/src/fabric/ScreenStackNativeComponent.ts
index fbf56654ec..3400cfe099 100644
--- a/src/fabric/ScreenStackNativeComponent.ts
+++ b/src/fabric/ScreenStackNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts
index c10dc70e44..467442aa2a 100644
--- a/src/fabric/SearchBarNativeComponent.ts
+++ b/src/fabric/SearchBarNativeComponent.ts
@@ -1,3 +1,5 @@
+'use client';
+
/* eslint-disable */
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue, HostComponent } from 'react-native';
diff --git a/src/native-stack/contexts/GHContext.tsx b/src/native-stack/contexts/GHContext.tsx
index 6b8b29096b..3e2a5cdd07 100644
--- a/src/native-stack/contexts/GHContext.tsx
+++ b/src/native-stack/contexts/GHContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import React, { PropsWithChildren } from 'react';
import { GestureProviderProps } from '../types';
From 408112ab8d3b48e0e22cea0efee4955d1f7700e5 Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Wed, 25 Sep 2024 18:05:41 +0200
Subject: [PATCH 14/38] feat: add monorepo support for Android builds (#2352)
## Description
Based on:
https://github.com/software-mansion/react-native-screens/pull/2337 by
@morganick.
Please see the original PR and its description for details.
See:
https://github.com/software-mansion/react-native-screens/pull/2337#pullrequestreview-2328416182
for discussion why new PR has been created.
## Changes
- **Using node resolver to find react native package for better monorepo
support**
- **Using rootDir instead of projectDir**
- **Change the order of path lookup**
## Test code and steps to reproduce
I've tested it using our both example apps and additionally I've created
fresh RN app
and tested the Android build there.
## Checklist
- [x] Ensured that CI passes
---------
Co-authored-by: Nick Morgan
---
android/build.gradle | 20 ++++++++++++++++++--
1 file changed, 18 insertions(+), 2 deletions(-)
diff --git a/android/build.gradle b/android/build.gradle
index 03f63baafc..81c29a720a 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -152,10 +152,26 @@ android {
repositories {
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
- // Matches the RN Hello World template
+
+ // First look for the standard location of react-native, as in RN Hello World template
// https://github.com/facebook/react-native/blob/1e8f3b11027fe0a7514b4fc97d0798d3c64bc895/local-cli/templates/HelloWorld/android/build.gradle#L21
- url "$projectDir/../node_modules/react-native/android"
+ // TODO(kkafar): Note, that in latest template app https://github.com/react-native-community/template/blob/0f4745b7a9d84232aeedec2def8d75ab9b050d11/template/android/build.gradle
+ // this is not specified at all.
+ File standardRnAndroidDirLocation = file("$rootDir/../node_modules/react-native/android")
+ if (standardRnAndroidDirLocation.exists()) {
+ url standardRnAndroidDirLocation
+ } else {
+ // We're in non standard setup - try to use node resolver to locate the react-native package.
+ File reactNativePackage = file(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim())
+ def rnAndroidDirLocation = "$reactNativePackage.parentFile/android"
+ if (reactNativePackage.exists()) {
+ url rnAndroidDirLocation
+ } else {
+ println "[RNScreens] Failed to resolve react-native directory. Attempted locations: ${standardRnAndroidDirLocation}, ${rnAndroidDirLocation}"
+ }
+ }
}
+
mavenCentral()
mavenLocal()
google()
From 82d4a04d8b0059eee27d87db596b8564ab956301 Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Wed, 25 Sep 2024 18:59:33 +0200
Subject: [PATCH 15/38] chore(deps): aggregate updates from dependabot (#2354)
## Description
Aggregating dependabot updates
* #2321
* #2322
* #2323
## Checklist
- [x] Ensured that CI passes
---------
Signed-off-by: dependabot[bot]
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
FabricExample/Gemfile.lock | 2 +-
FabricExample/yarn.lock | 20 +++++--------------
docs/yarn.lock | 41 ++++++++++----------------------------
3 files changed, 16 insertions(+), 47 deletions(-)
diff --git a/FabricExample/Gemfile.lock b/FabricExample/Gemfile.lock
index a7f485ef2c..c3dd70283f 100644
--- a/FabricExample/Gemfile.lock
+++ b/FabricExample/Gemfile.lock
@@ -75,7 +75,7 @@ GEM
netrc (0.11.0)
nkf (0.2.0)
public_suffix (4.0.7)
- rexml (3.3.3)
+ rexml (3.3.6)
strscan
ruby-macho (2.5.1)
strscan (3.1.0)
diff --git a/FabricExample/yarn.lock b/FabricExample/yarn.lock
index e7402b0c20..c073d5d916 100644
--- a/FabricExample/yarn.lock
+++ b/FabricExample/yarn.lock
@@ -3879,7 +3879,7 @@ __metadata:
languageName: node
linkType: hard
-"braces@npm:^3.0.2, braces@npm:^3.0.3":
+"braces@npm:^3.0.3":
version: 3.0.3
resolution: "braces@npm:3.0.3"
dependencies:
@@ -7550,23 +7550,13 @@ __metadata:
languageName: node
linkType: hard
-"micromatch@npm:^4.0.2":
- version: 4.0.7
- resolution: "micromatch@npm:4.0.7"
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4":
+ version: 4.0.8
+ resolution: "micromatch@npm:4.0.8"
dependencies:
braces: "npm:^3.0.3"
picomatch: "npm:^2.3.1"
- checksum: 10c0/58fa99bc5265edec206e9163a1d2cec5fabc46a5b473c45f4a700adce88c2520456ae35f2b301e4410fb3afb27e9521fb2813f6fc96be0a48a89430e0916a772
- languageName: node
- linkType: hard
-
-"micromatch@npm:^4.0.4":
- version: 4.0.5
- resolution: "micromatch@npm:4.0.5"
- dependencies:
- braces: "npm:^3.0.2"
- picomatch: "npm:^2.3.1"
- checksum: 10c0/3d6505b20f9fa804af5d8c596cb1c5e475b9b0cd05f652c5b56141cf941bd72adaeb7a436fda344235cef93a7f29b7472efc779fcdb83b478eab0867b95cdeff
+ checksum: 10c0/166fa6eb926b9553f32ef81f5f531d27b4ce7da60e5baf8c021d043b27a388fb95e46a8038d5045877881e673f8134122b59624d5cecbd16eb50a42e7a6b5ca8
languageName: node
linkType: hard
diff --git a/docs/yarn.lock b/docs/yarn.lock
index c6be251c77..9d69743b77 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -3162,27 +3162,7 @@ __metadata:
languageName: node
linkType: hard
-"@types/eslint-scope@npm:^3.7.3":
- version: 3.7.7
- resolution: "@types/eslint-scope@npm:3.7.7"
- dependencies:
- "@types/eslint": "npm:*"
- "@types/estree": "npm:*"
- checksum: 10c0/a0ecbdf2f03912679440550817ff77ef39a30fa8bfdacaf6372b88b1f931828aec392f52283240f0d648cf3055c5ddc564544a626bcf245f3d09fcb099ebe3cc
- languageName: node
- linkType: hard
-
-"@types/eslint@npm:*":
- version: 8.56.10
- resolution: "@types/eslint@npm:8.56.10"
- dependencies:
- "@types/estree": "npm:*"
- "@types/json-schema": "npm:*"
- checksum: 10c0/674349d6c342c3864d70f4d5a9965f96fb253801532752c8c500ad6a1c2e8b219e01ccff5dc8791dcb58b5483012c495708bb9f3ff929f5c9322b3da126c15d3
- languageName: node
- linkType: hard
-
-"@types/estree@npm:*, @types/estree@npm:^1.0.5":
+"@types/estree@npm:^1.0.5":
version: 1.0.5
resolution: "@types/estree@npm:1.0.5"
checksum: 10c0/b3b0e334288ddb407c7b3357ca67dbee75ee22db242ca7c56fe27db4e1a31989cb8af48a84dd401deb787fe10cc6b2ab1ee82dc4783be87ededbe3d53c79c70d
@@ -3277,7 +3257,7 @@ __metadata:
languageName: node
linkType: hard
-"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
version: 7.0.15
resolution: "@types/json-schema@npm:7.0.15"
checksum: 10c0/a996a745e6c5d60292f36731dd41341339d4eeed8180bb09226e5c8d23759067692b1d88e5d91d72ee83dfc00d3aca8e7bd43ea120516c17922cbcb7c3e252db
@@ -5511,13 +5491,13 @@ __metadata:
languageName: node
linkType: hard
-"enhanced-resolve@npm:^5.17.0":
- version: 5.17.0
- resolution: "enhanced-resolve@npm:5.17.0"
+"enhanced-resolve@npm:^5.17.1":
+ version: 5.17.1
+ resolution: "enhanced-resolve@npm:5.17.1"
dependencies:
graceful-fs: "npm:^4.2.4"
tapable: "npm:^2.2.0"
- checksum: 10c0/90065e58e4fd08e77ba47f827eaa17d60c335e01e4859f6e644bb3b8d0e32b203d33894aee92adfa5121fa262f912b48bdf0d0475e98b4a0a1132eea1169ad37
+ checksum: 10c0/81a0515675eca17efdba2cf5bad87abc91a528fc1191aad50e275e74f045b41506167d420099022da7181c8d787170ea41e4a11a0b10b7a16f6237daecb15370
languageName: node
linkType: hard
@@ -11294,10 +11274,9 @@ __metadata:
linkType: hard
"webpack@npm:^5.73.0":
- version: 5.92.1
- resolution: "webpack@npm:5.92.1"
+ version: 5.94.0
+ resolution: "webpack@npm:5.94.0"
dependencies:
- "@types/eslint-scope": "npm:^3.7.3"
"@types/estree": "npm:^1.0.5"
"@webassemblyjs/ast": "npm:^1.12.1"
"@webassemblyjs/wasm-edit": "npm:^1.12.1"
@@ -11306,7 +11285,7 @@ __metadata:
acorn-import-attributes: "npm:^1.9.5"
browserslist: "npm:^4.21.10"
chrome-trace-event: "npm:^1.0.2"
- enhanced-resolve: "npm:^5.17.0"
+ enhanced-resolve: "npm:^5.17.1"
es-module-lexer: "npm:^1.2.1"
eslint-scope: "npm:5.1.1"
events: "npm:^3.2.0"
@@ -11326,7 +11305,7 @@ __metadata:
optional: true
bin:
webpack: bin/webpack.js
- checksum: 10c0/43ca7c76b9c1005bd85f05303d048f918bac10276a209e3ef5e359353fbfef4e5fcee876265e6bc305bf5ef326576e02df63bc7e5af878fb7f06d7e1795b811a
+ checksum: 10c0/b4d1b751f634079bd177a89eef84d80fa5bb8d6fc15d72ab40fc2b9ca5167a79b56585e1a849e9e27e259803ee5c4365cb719e54af70a43c06358ec268ff4ebf
languageName: node
linkType: hard
From 53695c36b37d9b31f2450fe33ee7f5df07387b64 Mon Sep 17 00:00:00 2001
From: Adrian Ryt <72470330+adrianryt@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:30:55 +0200
Subject: [PATCH 16/38] fix!: always set Zindex to undefined for InnerScreen
(#2351)
## Description
Together with @kkafar we noticed that when switching back between
BottomTabsView (A -> B -> A) , React is calling removeScreenAt and
addScreen for tab we are leaving - in the same transaction! Because of
that and asynchronous nature of react-native-screens, error described in
#2345 exist. We also noticed that this weir behaviour is related to
setting ZIndex in InnerScreen.
Fixes #2345
Test 2232 was failing due to change in headerBackTitleVisible property.
> [!Caution]
@kkafar:
Note that this change might be potentially breaking since we're
effectively removing possibility of managing `Screen` components through
"z indices", breaking public API.
@kkafar:
The error mechanism is as follows:
1. `zIndex` being set causes RN diffing mechanism to include two
mutations on the same view in the same transaction - effectively
detaching and attaching it,
2. Thus when we navigate from tab B to A, react first detaches B from
screen container and in the same transaction it attaches it again -
however at the moment of reattach react expects B to be detached. This
is not case due to the fact, that we don't execute updates
synchronously, but rather we just schedule them in another block on UI
thread;
3. React asserts the invariant from point 2., and when we violate it,
its internal state gets corrupted later leading to crash.
We detected that getting rid of setting `zIndex` on screens prevents the
two consecutive operations on the same screen to appear, thus
effectively solving the problem.
Note, however, that we still won't support such cases with multiple
mount/unmount mutations related to the same component in single
transaction.
## Changes
- For every InnerScreen created we set/override ZIndex style to
undefined.
- Use headerBackButtonDisplayMode instead of headerBackTitleVisible.
## Test code and steps to reproduce
## Checklist
- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Updated documentation:
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes
---------
Co-authored-by: Kacper Kafara
---
apps/src/tests/Test2232.tsx | 2 +-
src/components/Screen.tsx | 6 ++++++
2 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/apps/src/tests/Test2232.tsx b/apps/src/tests/Test2232.tsx
index 7cc4d2020d..4ad2eaf79a 100644
--- a/apps/src/tests/Test2232.tsx
+++ b/apps/src/tests/Test2232.tsx
@@ -35,7 +35,7 @@ const App = () => (
component={SettingsScreen}
options={{
headerTintColor: 'hotpink',
- headerBackTitleVisible: false,
+ headerBackButtonDisplayMode: 'minimal',
headerTitle: () => (
(
isNativeStack,
gestureResponseDistance,
onGestureCancel,
+ style,
...props
} = rest;
@@ -127,6 +128,11 @@ export const InnerScreen = React.forwardRef(
Date: Fri, 27 Sep 2024 16:11:25 +0200
Subject: [PATCH 17/38] fix(iOS): right header incorrect position (#2316)
## Description
This PR fixes the incorrect position of the custom header items when
updating more than one option at the same time. The proposed solution
let us remove the previous fix for a similar problem:
https://github.com/software-mansion/react-native-screens/pull/2248 which
only fixed the issue on fabric.
Fixes #432, #2231.
## Changes
- forced re-layout of the navigation controller when subviews are
updated
- removed previous fix
- updated `Test432` repro
## Test code and steps to reproduce
- use `Test432` and `Test2231` to test this fix on both architectures.
## Checklist
- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
---
apps/src/tests/Test432.tsx | 28 ++++++++++++++++++++++------
ios/RNSScreenStackHeaderConfig.mm | 3 +++
ios/RNSScreenStackHeaderSubview.mm | 3 ---
3 files changed, 25 insertions(+), 9 deletions(-)
diff --git a/apps/src/tests/Test432.tsx b/apps/src/tests/Test432.tsx
index 5a0843dbc0..8274bfd299 100644
--- a/apps/src/tests/Test432.tsx
+++ b/apps/src/tests/Test432.tsx
@@ -13,18 +13,34 @@ type RootStackParamList = {
};
type RootStackScreenProps =
NativeStackScreenProps;
+
const HomeScreen = ({ navigation }: RootStackScreenProps<'Home'>) => {
- const showSettings = useCallback(() => {
- navigation.navigate('Settings');
- }, [navigation]);
+ const [x, setX] = React.useState(false);
+ React.useEffect(() => {
+ navigation.setOptions({
+ headerBackVisible: !x,
+ headerRight: x
+ ? () => (
+
-
+
);
};
-const SettingsScreen = ({ navigation }: RootStackScreenProps<'Settings'>) => {
+const SettingsScreen = () => {
return (
Settings
@@ -47,7 +63,7 @@ const RootNavigator = () => {
[navigation],
);
return (
-
+
Date: Mon, 30 Sep 2024 08:29:40 +0200
Subject: [PATCH 18/38] feat: add compat mode for previously removed formSheet
prop values (#2356)
## Description
This PR intends to add support for previously removed
`sheetAllowedDetents` and `sheetLargestUndimmedDetent` props values:
`medium`, `large` and `all`.
With addition of custom detents for iOS I've changed the API of
NativeScreen component to receive `number[]` as the detent list and
removed the old options. This removal was unnecessary. I've restored
these options on the `Screen` component abstraction layer, where old
options are translated to the new API w/o need for additional support in
downstream packages such as react-navigation.
Corresponding PR in `react-navigation`:
* https://github.com/react-navigation/react-navigation/pull/12032
## Changes
* updated the types,
* added "translation layer" in InnerScreen.
## Test code and steps to reproduce
Test1649 is great for testing all sheet related props.
## Checklist
- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Updated documentation:
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [x] Ensured that CI passes
---
guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 30 +++++++-----
native-stack/README.md | 21 ++++++++-
react-navigation | 2 +-
src/components/Screen.tsx | 55 +++++++++++++++++++++-
src/native-stack/types.tsx | 2 +-
src/native-stack/views/NativeStackView.tsx | 13 ++---
src/types.tsx | 27 +++++++++--
7 files changed, 124 insertions(+), 26 deletions(-)
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index 0f0a72d4b1..4689105491 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -150,17 +150,23 @@ Sets the current screen's available orientations and forces rotation if current
Defaults to `default` on iOS.
-### `sheetAllowedDetents` (iOS only)
+### `sheetAllowedDetents`
Describes heights where a sheet can rest.
-Works only when `stackPresentation` is set to `formSheet`.
+Works only when `presentation` is set to `formSheet`.
Heights should be described as fraction (a number from `[0, 1]` interval) of screen height / maximum detent height.
-There is also possibility to specify `[-1]` literal array with single element, which intets to set the sheet height
+There is also possibility to specify `fitToContents` literal, which intents to set the sheet height
to the height of its contents.
Please note that the array **must** be sorted in ascending order.
+There are also legacy & **deprecated** options available:
+
+* `medium` - corresponds to `[0.5]` detent value, around half of the screen height,
+* `large` - corresponds to `[1.0]` detent value, maximum height,
+* `all` - corresponds to `[0.5, 1.0]` value, the name is deceiving due to compatibility reasons.
+
Defaults to `[1.0]` literal.
### `sheetExpandsWhenScrolledToEdge` (iOS only)
@@ -170,7 +176,7 @@ Works only when `stackPresentation` is set to `formSheet`.
Defaults to `true`.
-### `sheetCornerRadius (iOS only)
+### `sheetCornerRadius`
The corner radius that the sheet will try to render with.
Works only when `stackPresentation` is set to `formSheet`.
@@ -188,15 +194,15 @@ Defaults to `false`.
### `sheetLargestUndimmedDetent` (iOS only)
The largest sheet detent for which a view underneath won't be dimmed.
-Works only when `stackPresentation` is set to `formSheet`.
+Works only when `presentation` is set to `formSheet`.
-If this prop is set to:
+This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
+there won't be a dimming view beneath the sheet.
-- `large` - the view underneath won't be dimmed at any detent level
-- `medium` - the view underneath will be dimmed only when detent level is `large`
-- `all` - the view underneath will be dimmed for any detent level
+There also legacy & **deprecated** prop values available, which work in tandem with
+corresponding legacy proop values for `sheetAllowedDetents` prop.
-Defaults to `all`.
+Defaults to `-1`, indicating that the dimming view should be always present.
### `stackAnimation`
@@ -365,7 +371,7 @@ function Home() {
}
```
-### unstable_footerComponent
+### unstable_sheetFooter (Android only)
Footer component that can be used alongside form sheet stack presentation style.
@@ -375,6 +381,8 @@ to implement such layout with JS-only code.
Please note that this prop is marked as unstable and might be subject of breaking changes,
even removal.
+Currently supported on Android only.
+
## ``
diff --git a/native-stack/README.md b/native-stack/README.md
index d0a6563da2..9c8f6429d0 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -247,14 +247,28 @@ Defaults to `pop`.
Describes heights where a sheet can rest.
Works only when `stackPresentation` is set to `formSheet`.
-Heights should be described as fraction (a number from [0, 1] interval) of screen height / maximum detent height.
-There is also possibility to specify `fitToContents` literal, which intents to set the sheet height
+Heights should be described as fraction (a number from `[0, 1]` interval) of screen height / maximum detent height.
+There is also possibility to specify `[-1]` literal array with single element, which intets to set the sheet height
to the height of its contents.
Please note that the array **must** be sorted in ascending order.
+There are also legacy & **deprecated** options available:
+
+* 'medium' - corresponds to `[0.5]` detent value, around half of the screen height,
+* 'large' - corresponds to `[1.0]` detent value, maximum height,
+* 'all' - corresponds to `[0.5, 1.0]` value, the name is deceiving due to compatibility reasons.
+
Defaults to `[1.0]` literal.
+#### `sheetElevation` (Android only)
+
+Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
+
+Not dynamic - changing it after the component is rendered won't have an effect.
+
+Defaults to `24`.
+
#### `sheetExpandsWhenScrolledToEdge` (iOS only)
Whether the sheet should expand to larger detent when scrolling.
@@ -290,6 +304,9 @@ Works only when `stackPresentation` is set to `formSheet`.
This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
there won't be a dimming view beneath the sheet.
+There also legacy & **deprecated** prop values available, which work in tandem with
+corresponding legacy prop values for `sheetAllowedDetents` prop.
+
Defaults to `-1`, indicating that the dimming view should be always present.
#### `stackAnimation`
diff --git a/react-navigation b/react-navigation
index 248fcf7d32..c7cbe96430 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit 248fcf7d328b7a813106f5306a78ffd7eef5bcb3
+Subproject commit c7cbe9643091a9a91dbed6b18fd579166d34107a
diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
index dec294fa2d..aa1c1440d0 100644
--- a/src/components/Screen.tsx
+++ b/src/components/Screen.tsx
@@ -43,6 +43,50 @@ interface ViewConfig extends View {
};
}
+// This value must be kept in sync with native side.
+const SHEET_FIT_TO_CONTENTS = [-1];
+const SHEET_COMPAT_LARGE = [1.0];
+const SHEET_COMPAT_MEDIUM = [0.5];
+const SHEET_COMPAT_ALL = [0.5, 1.0];
+
+// These exist to transform old 'legacy' values used by the formsheet API to the new API shape.
+// We can get rid of it, once we get rid of support for legacy values: 'large', 'medium', 'all'.
+function resolveSheetAllowedDetents(
+ allowedDetentsCompat: ScreenProps['sheetAllowedDetents'],
+): number[] {
+ if (Array.isArray(allowedDetentsCompat)) {
+ return allowedDetentsCompat;
+ } else if (allowedDetentsCompat === 'fitToContents') {
+ return SHEET_FIT_TO_CONTENTS;
+ } else if (allowedDetentsCompat === 'large') {
+ return SHEET_COMPAT_LARGE;
+ } else if (allowedDetentsCompat === 'medium') {
+ return SHEET_COMPAT_MEDIUM;
+ } else if (allowedDetentsCompat === 'all') {
+ return SHEET_COMPAT_ALL;
+ } else {
+ // Safe default, only large detent is allowed.
+ return [1.0];
+ }
+}
+
+function resolveSheetLargestUndimmedDetent(
+ lud: ScreenProps['sheetLargestUndimmedDetent'],
+): number {
+ if (typeof lud === 'number') {
+ return lud;
+ } else if (lud === 'large') {
+ return 1;
+ } else if (lud === 'medium') {
+ return 0;
+ } else if (lud === 'all') {
+ return -1;
+ } else {
+ // Safe default, every detent is dimmed
+ return -1;
+ }
+}
+
export const InnerScreen = React.forwardRef(
function InnerScreen(props, ref) {
const innerRef = React.useRef(null);
@@ -66,6 +110,7 @@ export const InnerScreen = React.forwardRef(
// To maintain default behavior of formSheet stack presentation style and to have reasonable
// defaults for new medium-detent iOS API we need to set defaults here
const {
+ // formSheet presentation related props
sheetAllowedDetents = [1.0],
sheetLargestUndimmedDetent = -1,
sheetGrabberVisible = false,
@@ -73,10 +118,16 @@ export const InnerScreen = React.forwardRef(
sheetExpandsWhenScrolledToEdge = true,
sheetElevation = 24,
sheetInitialDetent = 0,
+
+ // Other
stackPresentation,
} = rest;
if (enabled && isNativePlatformSupported) {
+ const resolvedSheetAllowedDetents =
+ resolveSheetAllowedDetents(sheetAllowedDetents);
+ const resolvedSheetLargestUndimmedDetent =
+ resolveSheetLargestUndimmedDetent(sheetLargestUndimmedDetent);
// Due to how Yoga resolves layout, we need to have different components for modal nad non-modal screens
const AnimatedScreen =
Platform.OS === 'android' ||
@@ -134,8 +185,8 @@ export const InnerScreen = React.forwardRef(
// Detailed information can be found here https://github.com/software-mansion/react-native-screens/pull/2351
style={[style, { zIndex: undefined }]}
activityState={activityState}
- sheetAllowedDetents={sheetAllowedDetents}
- sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+ sheetAllowedDetents={resolvedSheetAllowedDetents}
+ sheetLargestUndimmedDetent={resolvedSheetLargestUndimmedDetent}
sheetElevation={sheetElevation}
sheetGrabberVisible={sheetGrabberVisible}
sheetCornerRadius={sheetCornerRadius}
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index fadde7ee47..12ff6f82a3 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -517,7 +517,7 @@ export type NativeStackNavigationOptions = {
*
* @platform android
*/
- unstable_footerComponent?: React.ReactNode;
+ unstable_sheetFooter?: () => React.ReactNode;
};
export type NativeStackNavigatorProps =
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index 0f4717121a..dec52bb618 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -215,7 +215,7 @@ const RouteView = ({
swipeDirection = 'horizontal',
transitionDuration,
freezeOnBlur,
- unstable_footerComponent = null,
+ unstable_sheetFooter = null,
} = options;
let {
@@ -229,9 +229,10 @@ const RouteView = ({
} = options;
// We only want to allow backgroundColor for now
- unstable_screenStyle = unstable_screenStyle
- ? { backgroundColor: unstable_screenStyle.backgroundColor }
- : null;
+ unstable_screenStyle =
+ stackPresentation === 'formSheet' && unstable_screenStyle
+ ? { backgroundColor: unstable_screenStyle.backgroundColor }
+ : null;
if (sheetAllowedDetents === 'fitToContents') {
sheetAllowedDetents = [-1];
@@ -450,8 +451,8 @@ const RouteView = ({
route={route}
headerShown={isHeaderInPush}
/>
- {unstable_footerComponent && (
- {unstable_footerComponent}
+ {stackPresentation === 'formSheet' && unstable_sheetFooter && (
+ {unstable_sheetFooter()}
)}
diff --git a/src/types.tsx b/src/types.tsx
index 1ccd801e66..ceb580ccb7 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -104,7 +104,6 @@ export interface ScreenProps extends ViewProps {
active?: 0 | 1 | Animated.AnimatedInterpolation;
activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation;
children?: React.ReactNode;
- unstable_footer?: React.ReactNode;
/**
* Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`.
*
@@ -299,9 +298,15 @@ export interface ScreenProps extends ViewProps {
*
* Please note that the array **must** be sorted in ascending order.
*
+ * There are also legacy & **deprecated** options available:
+ *
+ * * 'medium' - corresponds to `[0.5]` detent value, around half of the screen height,
+ * * 'large' - corresponds to `[1.0]` detent value, maximum height,
+ * * 'all' - corresponds to `[0.5, 1.0]` value, the name is deceiving due to compatibility reasons.
+ *
* Defaults to `[1.0]` literal.
*/
- sheetAllowedDetents?: number[];
+ sheetAllowedDetents?: number[] | 'fitToContents' | 'medium' | 'large' | 'all';
/**
* Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
*
@@ -346,9 +351,12 @@ export interface ScreenProps extends ViewProps {
* This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
* there won't be a dimming view beneath the sheet.
*
+ * There also legacy & **deprecated** prop values available, which work in tandem with
+ * corresponding legacy prop values for `sheetAllowedDetents` prop.
+ *
* Defaults to `-1`, indicating that the dimming view should be always present.
*/
- sheetLargestUndimmedDetent?: number;
+ sheetLargestUndimmedDetent?: number | 'medium' | 'large' | 'all';
/**
* Index of the detent the sheet should expand to after being opened.
* Works only when `stackPresentation` is set to `formSheet`.
@@ -426,6 +434,19 @@ export interface ScreenProps extends ViewProps {
* @platform ios
*/
transitionDuration?: number;
+ /**
+ * Footer component that can be used alongside formSheet stack presentation style.
+ *
+ * This option is provided, because due to implementation details it might be problematic
+ * to implement such layout with JS-only code.
+ *
+ * Please note that this prop is marked as unstable and might be subject of breaking changes,
+ * including removal, in particular when we find solution that will make implementing it with JS
+ * straightforward.
+ *
+ * @platform android
+ */
+ unstable_sheetFooter?: () => React.ReactNode;
}
export interface ScreenContainerProps extends ViewProps {
From 261b7ddb50dd7ee96797e4e989692c8884bc456c Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Mon, 30 Sep 2024 11:41:32 +0200
Subject: [PATCH 19/38] feat: expose `none` & `largest` values for
`sheetLargestUndimmedDetent` prop (#2359)
## Description
I'm exposing two new options for `sheetLargestUndimmedDetent` prop:
* `none` - denoting that dimming view will be always present,
* `largest` - denoting that dimming view will never be present.
Previously to achieve the effect of `none` you had to either rely on
default or pass `-1` raw value.
Similarly achieving the effect of `largest` required user to set a
numeric value and update it everytime new detent was added / removed.
> [!note]
~~As I wrote this description, new idea popped out - instead of exposing
numeric constant just add some string options, as with
`sheetAllowedDetents` (it is an array or some predefined string
constants).
> What would be the API though? `sheetLargestUndimmedDetent: 'none'`?
What's the wording here?~~
>
> *Done! ^^^*
`react-navigation` PR:
* https://github.com/react-navigation/react-navigation/pull/12032
## Changes
Replaced raw `-1` with constants `none` and `largest`.
## Test code and steps to reproduce
`Test1649`
## Checklist
- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Updated documentation:
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [x] Ensured that CI passes
---
apps/src/tests/Test1649/state.tsx | 2 +-
guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 15 ++++++++++-----
native-stack/README.md | 9 +++++++--
react-navigation | 2 +-
src/components/Screen.tsx | 19 ++++++++++++++-----
src/index.tsx | 12 ++++++------
src/native-stack/types.tsx | 10 +++++++++-
src/native-stack/views/NativeStackView.tsx | 2 +-
src/types.tsx | 17 ++++++++++++++---
9 files changed, 63 insertions(+), 25 deletions(-)
diff --git a/apps/src/tests/Test1649/state.tsx b/apps/src/tests/Test1649/state.tsx
index fe5aec1169..5e9af4294d 100644
--- a/apps/src/tests/Test1649/state.tsx
+++ b/apps/src/tests/Test1649/state.tsx
@@ -6,7 +6,7 @@ export const sheetInitialOptions: SheetOptions = {
sheetAllowedDetents: [0.4, 0.6, 0.9],
// sheetAllowedDetents: [0.6],
// sheetAllowedDetents: 'fitToContents',
- sheetLargestUndimmedDetent: 2,
+ sheetLargestUndimmedDetent: 'none',
sheetGrabberVisible: false,
sheetCornerRadius: 24,
sheetExpandsWhenScrolledToEdge: true,
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index 4689105491..2ed6bcf9ef 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -191,18 +191,23 @@ Boolean indicating whether the sheet shows a grabber at the top.
Works only when `stackPresentation` is set to `formSheet`.
Defaults to `false`.
-### `sheetLargestUndimmedDetent` (iOS only)
+### `sheetLargestUndimmedDetent`
The largest sheet detent for which a view underneath won't be dimmed.
-Works only when `presentation` is set to `formSheet`.
+Works only when `stackPresentation` is set to `formSheet`.
This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
there won't be a dimming view beneath the sheet.
-There also legacy & **deprecated** prop values available, which work in tandem with
-corresponding legacy proop values for `sheetAllowedDetents` prop.
+Additionaly there are following options available:
+
+* `none` - there will be dimming view for all detents levels,
+* `largest` - there won't be a dimming view for any detent level.
+
+There also legacy & **deprecated** prop values available: `medium`, `large` (don't confuse with `largest`), `all`, which work in tandem with
+corresponding legacy prop values for `sheetAllowedDetents` prop.
-Defaults to `-1`, indicating that the dimming view should be always present.
+Defaults to `none`, indicating that the dimming view should be always present.
### `stackAnimation`
diff --git a/native-stack/README.md b/native-stack/README.md
index 9c8f6429d0..c6649591e6 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -304,10 +304,15 @@ Works only when `stackPresentation` is set to `formSheet`.
This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
there won't be a dimming view beneath the sheet.
-There also legacy & **deprecated** prop values available, which work in tandem with
+Additionaly there are following options available:
+
+* `none` - there will be dimming view for all detents levels,
+* `largest` - there won't be a dimming view for any detent level.
+
+There also legacy & **deprecated** prop values available: `medium`, `large` (don't confuse with `largest`), `all`, which work in tandem with
corresponding legacy prop values for `sheetAllowedDetents` prop.
-Defaults to `-1`, indicating that the dimming view should be always present.
+Defaults to `none`, indicating that the dimming view should be always present.
#### `stackAnimation`
diff --git a/react-navigation b/react-navigation
index c7cbe96430..782248d992 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit c7cbe9643091a9a91dbed6b18fd579166d34107a
+Subproject commit 782248d9922c9e71ba65ea1d93b09abd6f84fe5c
diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
index aa1c1440d0..ab2bfaf1a6 100644
--- a/src/components/Screen.tsx
+++ b/src/components/Screen.tsx
@@ -49,6 +49,9 @@ const SHEET_COMPAT_LARGE = [1.0];
const SHEET_COMPAT_MEDIUM = [0.5];
const SHEET_COMPAT_ALL = [0.5, 1.0];
+const SHEET_DIMMED_ALWAYS = -1;
+// const SHEET_DIMMED_NEVER = 9999;
+
// These exist to transform old 'legacy' values used by the formsheet API to the new API shape.
// We can get rid of it, once we get rid of support for legacy values: 'large', 'medium', 'all'.
function resolveSheetAllowedDetents(
@@ -72,18 +75,21 @@ function resolveSheetAllowedDetents(
function resolveSheetLargestUndimmedDetent(
lud: ScreenProps['sheetLargestUndimmedDetent'],
+ largestDetentIndex: number,
): number {
if (typeof lud === 'number') {
return lud;
+ } else if (lud === 'largest') {
+ return largestDetentIndex;
+ } else if (lud === 'none' || lud === 'all') {
+ return SHEET_DIMMED_ALWAYS;
} else if (lud === 'large') {
return 1;
} else if (lud === 'medium') {
return 0;
- } else if (lud === 'all') {
- return -1;
} else {
// Safe default, every detent is dimmed
- return -1;
+ return SHEET_DIMMED_ALWAYS;
}
}
@@ -112,7 +118,7 @@ export const InnerScreen = React.forwardRef(
const {
// formSheet presentation related props
sheetAllowedDetents = [1.0],
- sheetLargestUndimmedDetent = -1,
+ sheetLargestUndimmedDetent = SHEET_DIMMED_ALWAYS,
sheetGrabberVisible = false,
sheetCornerRadius = -1.0,
sheetExpandsWhenScrolledToEdge = true,
@@ -127,7 +133,10 @@ export const InnerScreen = React.forwardRef(
const resolvedSheetAllowedDetents =
resolveSheetAllowedDetents(sheetAllowedDetents);
const resolvedSheetLargestUndimmedDetent =
- resolveSheetLargestUndimmedDetent(sheetLargestUndimmedDetent);
+ resolveSheetLargestUndimmedDetent(
+ sheetLargestUndimmedDetent,
+ resolvedSheetAllowedDetents.length - 1,
+ );
// Due to how Yoga resolves layout, we need to have different components for modal nad non-modal screens
const AnimatedScreen =
Platform.OS === 'android' ||
diff --git a/src/index.tsx b/src/index.tsx
index 0e2a7dc5bb..b344112232 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
export * from './types';
-/*
+/**
* Core
*/
export {
@@ -11,7 +11,7 @@ export {
shouldUseActivityState,
} from './core';
-/*
+/**
* RNS Components
*/
export {
@@ -57,17 +57,17 @@ export {
NativeScreenContentWrapper,
} from './components/ScreenContentWrapper';
-/*
+/**
* Modules
*/
export { default as NativeScreensModule } from './fabric/NativeScreensModule';
-/*
+/**
* Contexts
*/
export { GHContext } from './native-stack/contexts/GHContext';
-/*
+/**
* Utils
*/
export {
@@ -76,7 +76,7 @@ export {
executeNativeBackPress,
} from './utils';
-/*
+/**
* Hooks
*/
export { default as useTransitionProgress } from './useTransitionProgress';
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index 12ff6f82a3..4c3f342625 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -426,7 +426,15 @@ export type NativeStackNavigationOptions = {
* This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
* there won't be a dimming view beneath the sheet.
*
- * Defaults to `-1`, indicating that the dimming view should be always present.
+ * Additionaly there are following options available:
+ *
+ * * `none` - there will be dimming view for all detents levels,
+ * * `largest` - there won't be a dimming view for any detent level.
+ *
+ * There also legacy & **deprecated** prop values available: `medium`, `large` (don't confuse with `largest`), `all`, which work in tandem with
+ * corresponding legacy prop values for `sheetAllowedDetents` prop.
+ *
+ * Defaults to `none`, indicating that the dimming view should be always present.
*/
sheetLargestUndimmedDetent?: ScreenProps['sheetLargestUndimmedDetent'];
/**
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index dec52bb618..9f00561282 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -195,7 +195,7 @@ const RouteView = ({
headerShown,
hideKeyboardOnSwipe,
homeIndicatorHidden,
- sheetLargestUndimmedDetent = -1,
+ sheetLargestUndimmedDetent = 'none',
sheetGrabberVisible = false,
sheetCornerRadius = -1.0,
sheetElevation = 24,
diff --git a/src/types.tsx b/src/types.tsx
index ceb580ccb7..5c11e9556b 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -351,12 +351,23 @@ export interface ScreenProps extends ViewProps {
* This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
* there won't be a dimming view beneath the sheet.
*
- * There also legacy & **deprecated** prop values available, which work in tandem with
+ * Additionaly there are following options available:
+ *
+ * * `none` - there will be dimming view for all detents levels,
+ * * `largest` - there won't be a dimming view for any detent level.
+ *
+ * There also legacy & **deprecated** prop values available: `medium`, `large` (don't confuse with `largest`), `all`, which work in tandem with
* corresponding legacy prop values for `sheetAllowedDetents` prop.
*
- * Defaults to `-1`, indicating that the dimming view should be always present.
+ * Defaults to `none`, indicating that the dimming view should be always present.
*/
- sheetLargestUndimmedDetent?: number | 'medium' | 'large' | 'all';
+ sheetLargestUndimmedDetent?:
+ | number
+ | 'none'
+ | 'largest'
+ | 'medium'
+ | 'large'
+ | 'all';
/**
* Index of the detent the sheet should expand to after being opened.
* Works only when `stackPresentation` is set to `formSheet`.
From 8fc934f88ef99ca303fc52cfc0d5569a9b6cb112 Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Tue, 1 Oct 2024 12:24:54 +0200
Subject: [PATCH 20/38] Release 4.0.0-beta.1
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 2ab746c8a8..deff3c6de3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-screens",
- "version": "4.0.0-beta.0",
+ "version": "4.0.0-beta.1",
"description": "Native navigation primitives for your React Native app.",
"scripts": {
"submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",
From 108d85dd7f8de143dfe02f5029770e65b551ec95 Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Tue, 1 Oct 2024 16:40:00 +0200
Subject: [PATCH 21/38] feat: add stub implementations for
`ScreenContentWrapper` for web (#2368)
## Description
Missing stubs for web.
## Changes
See the changes, no additional description is needed.
## Checklist
- [-] Ensured that CI passes
---
src/components/ScreenContentWrapper.web.tsx | 4 ++++
1 file changed, 4 insertions(+)
create mode 100644 src/components/ScreenContentWrapper.web.tsx
diff --git a/src/components/ScreenContentWrapper.web.tsx b/src/components/ScreenContentWrapper.web.tsx
new file mode 100644
index 0000000000..97eee625cb
--- /dev/null
+++ b/src/components/ScreenContentWrapper.web.tsx
@@ -0,0 +1,4 @@
+import { View } from 'react-native';
+
+export const NativeScreenContentWrapper = View;
+export const ScreenContentWrapper = View;
From 5da303e669e3efb3bbe3cb4f753d9c602b3b8e62 Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Tue, 1 Oct 2024 16:41:18 +0200
Subject: [PATCH 22/38] Release 4.0.0-beta.2
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index deff3c6de3..cb914e9632 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-screens",
- "version": "4.0.0-beta.1",
+ "version": "4.0.0-beta.2",
"description": "Native navigation primitives for your React Native app.",
"scripts": {
"submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",
From f9c491e9408875f3febbbda502d1a63aa139e05d Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Tue, 1 Oct 2024 17:18:04 +0200
Subject: [PATCH 23/38] feat: add stub implementations for `ScreenFooter` for
web (#2369)
## Description
Adding stub implmentation for web.
## Changes
See files. No more description needed.
## Checklist
- [-] Ensured that CI passes
---
src/components/ScreenContentWrapper.web.tsx | 4 +++-
src/components/ScreenFooter.web.tsx | 6 ++++++
2 files changed, 9 insertions(+), 1 deletion(-)
create mode 100644 src/components/ScreenFooter.web.tsx
diff --git a/src/components/ScreenContentWrapper.web.tsx b/src/components/ScreenContentWrapper.web.tsx
index 97eee625cb..93474d280b 100644
--- a/src/components/ScreenContentWrapper.web.tsx
+++ b/src/components/ScreenContentWrapper.web.tsx
@@ -1,4 +1,6 @@
import { View } from 'react-native';
export const NativeScreenContentWrapper = View;
-export const ScreenContentWrapper = View;
+
+const ScreenContentWrapper = View;
+export default ScreenContentWrapper;
diff --git a/src/components/ScreenFooter.web.tsx b/src/components/ScreenFooter.web.tsx
new file mode 100644
index 0000000000..b8dd6df383
--- /dev/null
+++ b/src/components/ScreenFooter.web.tsx
@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+
+export const NativeScreenFooter = View;
+
+const ScreenFooter = View;
+export default ScreenFooter;
From 04997380a58b9482bb24b836ce93b689bc82b569 Mon Sep 17 00:00:00 2001
From: Kacper Kafara
Date: Tue, 1 Oct 2024 17:19:06 +0200
Subject: [PATCH 24/38] Release 4.0.0-beta.3
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index cb914e9632..1b0253d964 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-screens",
- "version": "4.0.0-beta.2",
+ "version": "4.0.0-beta.3",
"description": "Native navigation primitives for your React Native app.",
"scripts": {
"submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",
From 606cd4bb495c9403138514ab5dc0042c16048b3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Du=C5=BCy?=
<91994767+alduzy@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:38:10 +0200
Subject: [PATCH 25/38] feat(iOS): sheetInitialDetent support (#2367)
## Description
This PR adds `sheetInitialDetent` support to iOS and fixes detents logic
on iOS < 16.
This functionality depends on changes made in this PR:
https://github.com/react-navigation/react-navigation/pull/12032
## Changes
- supporting `sheetInitialDetent` on iOS
- modified `Test2002.tsx` repro
- updated README definition to match types
- fixed `sheetAllowedDetents` on iOS < 16
## Test code and steps to reproduce
- Use `Test2002.tsx` repro
## Checklist
- [x] Included code example that can be used to test this change
- [x] Updated documentation:
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x] Ensured that CI passes
---
apps/src/tests/Test2002.tsx | 31 ++++++++++++++++++++----
ios/RNSScreen.h | 1 +
ios/RNSScreen.mm | 29 ++++++++++++++++++++--
native-stack/README.md | 4 ++-
src/fabric/ModalScreenNativeComponent.ts | 1 +
5 files changed, 58 insertions(+), 8 deletions(-)
diff --git a/apps/src/tests/Test2002.tsx b/apps/src/tests/Test2002.tsx
index 55a5a39979..098813c201 100644
--- a/apps/src/tests/Test2002.tsx
+++ b/apps/src/tests/Test2002.tsx
@@ -5,9 +5,22 @@ import {
DefaultTheme,
NavigationContainer,
} from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+ createNativeStackNavigator,
+ NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+
+type StackParamList = {
+ Home: undefined;
+ formSheet: undefined;
+ fullScreenModal: undefined;
+};
-function HomeScreen({ navigation }) {
+function HomeScreen({
+ navigation,
+}: {
+ navigation: NativeStackNavigationProp;
+}) {
return (
BEFORE
AFTER
Release notes
Sourced from express's releases.
4.21.0
What's Changed
- Deprecate
"back"magic string in redirects by@blakeembreyin expressjs/express#5935- finalhandler@1.3.1 by
@wesleytoddin expressjs/express#5954- fix(deps): serve-static@1.16.2 by
@wesleytoddin expressjs/express#5951- Upgraded dependency qs to 6.13.0 to match qs in body-parser by
@agadzinski93in expressjs/express#5946New Contributors
@agadzinski93made their first contribution in expressjs/express#5946Full Changelog: https://github.com/expressjs/express/compare/4.20.0...4.21.0
4.20.0
What's Changed
Important
- IMPORTANT: The default
depthlevel for parsing URL-encoded data is now32(previously wasInfinity)- Remove link renderization in html while using
res.redirectOther Changes
- 4.19.2 Staging by
@wesleytoddin expressjs/express#5561- remove duplicate location test for data uri by
@wesleytoddin expressjs/express#5562- feat: document beta releases expectations by
@marco-ippolitoin expressjs/express#5565- Cut down on duplicated CI runs by
@jonchurchin expressjs/express#5564- Add a Threat Model by
@UlisesGasconin expressjs/express#5526- Assign captain of encodeurl by
@blakeembreyin expressjs/express#5579- Nominate jonchurch as repo captain for
http-errors,expressjs.com,morgan,cors,body-parserby@jonchurchin expressjs/express#5587- docs: update Security.md by
@inigomarquinezin expressjs/express#5590- docs: update triage nomination policy by
@UlisesGasconin expressjs/express#5600- Add CodeQL (SAST) by
@UlisesGasconin expressjs/express#5433- docs: add UlisesGascon as triage initiative captain by
@UlisesGasconin expressjs/express#5605- deps: encodeurl@~2.0.0 by
@blakeembreyin expressjs/express#5569- skip QUERY method test by
@jonchurchin expressjs/express#5628- ignore ETAG query test on 21 and 22, reuse skip util by
@jonchurchin expressjs/express#5639- add support Node.js@22 in the CI by
@mertcanaltinin expressjs/express#5627- doc: add table of contents, tc/triager lists to readme by
@mertcanaltinin expressjs/express#5619- List and sort all projects, add captains by
@blakeembreyin expressjs/express#5653- docs: add
@UlisesGasconas captain for cookie-parser by@UlisesGasconin expressjs/express#5666- ✨ bring back query tests for node 21 by
@ctcpipin expressjs/express#5690- [v4] Deprecate
res.clearCookieacceptingoptions.maxAgeandoptions.expiresby@jonchurchin expressjs/express#5672- skip QUERY tests for Node 21 only, still not supported by
@jonchurchin expressjs/express#5695- 📝 update people, add ctcpip to TC by
@ctcpipin expressjs/express#5683- remove minor version pinning from ci by
@jonchurchin expressjs/express#5722- Fix link variable use in attribution section of CODE OF CONDUCT by
@IamLizuin expressjs/express#5762- Replace Appveyor windows testing with GHA by
@jonchurchin expressjs/express#5599- Add OSSF Scorecard badge by
@UlisesGasconin expressjs/express#5436- update scorecard link by
@bjohansebasin expressjs/express#5814- Nominate
@IamLizuto the triage team by@UlisesGasconin expressjs/express#5836- deps: path-to-regexp@0.1.8 by
@blakeembreyin expressjs/express#5603
... (truncated)
Changelog
Sourced from express's changelog.
4.21.0 / 2024-09-11
- Deprecate
res.location("back")andres.redirect("back")magic string- deps: serve-static@1.16.2
- includes send@0.19.0
- deps: finalhandler@1.3.1
- deps: qs@6.13.0
4.20.0 / 2024-09-10
- deps: serve-static@0.16.0
- Remove link renderization in html while redirecting
- deps: send@0.19.0
- Remove link renderization in html while redirecting
- deps: body-parser@0.6.0
- add
depthoption to customize the depth level in the parser- IMPORTANT: The default
depthlevel for parsing URL-encoded data is now32(previously wasInfinity)- Remove link renderization in html while using
res.redirect- deps: path-to-regexp@0.1.10
- Adds support for named matching groups in the routes using a regex
- Adds backtracking protection to parameters without regexes defined
- deps: encodeurl@~2.0.0
- Removes encoding of
\,|, and^to align better with URL spec- Deprecate passing
options.maxAgeandoptions.expirestores.clearCookie
- Will be ignored in v5, clearCookie will set a cookie with an expires in the past to instruct clients to delete the cookie
Commits
7e562c64.21.01bcde96fix(deps): qs@6.13.0 (#5946)7d36477fix(deps): serve-static@1.16.2 (#5951)40d2d8ffix(deps): finalhandler@1.3.177ada90Deprecate"back"magic string in redirects (#5935)21df4214.20.04c9ddc1feat: upgrade to serve-static@0.16.09ebe5d5feat: upgrade to send@0.19.0 (#5928)ec4a01bfeat: upgrade to body-parser@1.20.3 (#5926)54271f6fix: don't render redirect values in anchor href- Additional commits viewable in compare view
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show
Release notes
Sourced from serve-static's releases.
1.16.0
What's Changed
- Remove link renderization in html while redirecting (expressjs/serve-static#173)
New Contributors
@UlisesGasconmade their first contribution in expressjs/serve-static#173Full Changelog: https://github.com/expressjs/serve-static/compare/v1.15.0...1.16.0
Changelog
Sourced from serve-static's changelog.
1.16.2 / 2024-09-11
- deps: encodeurl@~2.0.0
1.16.1 / 2024-09-11
- deps: send@0.19.0
1.16.0 / 2024-09-10
- Remove link renderization in html while redirecting
Commits
Maintainer changes
This version was pushed to npm by wesleytodd, a new releaser for serve-static since your current version.
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show