react-native-edge-to-edge 1.4.2 → 1.4.3-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/android/src/main/java/com/zoontek/rnedgetoedge/EdgeToEdgeModuleImpl.kt +75 -41
- package/android/src/main/res/values/attrs.xml +1 -1
- package/android/src/main/res/values/styles.xml +8 -8
- package/android/src/newarch/com/zoontek/rnedgetoedge/EdgeToEdgeModule.kt +14 -3
- package/android/src/oldarch/com/zoontek/rnedgetoedge/EdgeToEdgeModule.kt +17 -3
- package/dist/commonjs/SystemBars.js +41 -44
- package/dist/commonjs/SystemBars.js.map +1 -1
- package/dist/commonjs/specs/NativeEdgeToEdgeModule.js +1 -1
- package/dist/commonjs/specs/NativeEdgeToEdgeModule.js.map +1 -1
- package/dist/commonjs/specs/NativeEdgeToEdgeModule.web.js +1 -4
- package/dist/commonjs/specs/NativeEdgeToEdgeModule.web.js.map +1 -1
- package/dist/module/SystemBars.js +42 -45
- package/dist/module/SystemBars.js.map +1 -1
- package/dist/module/specs/NativeEdgeToEdgeModule.js +2 -2
- package/dist/module/specs/NativeEdgeToEdgeModule.js.map +1 -1
- package/dist/module/specs/NativeEdgeToEdgeModule.web.js +1 -4
- package/dist/module/specs/NativeEdgeToEdgeModule.web.js.map +1 -1
- package/dist/typescript/SystemBars.d.ts.map +1 -1
- package/dist/typescript/specs/NativeEdgeToEdgeModule.d.ts +5 -8
- package/dist/typescript/specs/NativeEdgeToEdgeModule.d.ts.map +1 -1
- package/dist/typescript/specs/NativeEdgeToEdgeModule.web.d.ts +1 -4
- package/dist/typescript/specs/NativeEdgeToEdgeModule.web.d.ts.map +1 -1
- package/dist/typescript/types.d.ts +2 -2
- package/dist/typescript/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/SystemBars.ts +76 -74
- package/src/specs/NativeEdgeToEdgeModule.ts +10 -11
- package/src/specs/NativeEdgeToEdgeModule.web.ts +1 -6
- package/src/types.ts +2 -2
package/README.md
CHANGED
|
@@ -138,7 +138,7 @@ Effective safe area management is essential to prevent content from being displa
|
|
|
138
138
|
|
|
139
139
|
### Modal component quirks
|
|
140
140
|
|
|
141
|
-
|
|
141
|
+
React native built-in [`Modal`](https://reactnative.dev/docs/modal) component runs in its own native context, so be sure to set both the `statusBarTranslucent` and `navigationBarTranslucent` props to `true`. However, we recommend using the [react-navigation modals](https://reactnavigation.org/docs/modal) or the [`expo-router` modal screens](https://docs.expo.dev/router/advanced/modals/#modal-screen-using-expo-router) instead.
|
|
142
142
|
|
|
143
143
|
## API
|
|
144
144
|
|
|
@@ -15,7 +15,6 @@ import androidx.core.view.WindowInsetsControllerCompat
|
|
|
15
15
|
|
|
16
16
|
import com.facebook.common.logging.FLog
|
|
17
17
|
import com.facebook.react.bridge.ReactApplicationContext
|
|
18
|
-
import com.facebook.react.bridge.ReadableMap
|
|
19
18
|
import com.facebook.react.common.ReactConstants
|
|
20
19
|
|
|
21
20
|
internal val LightNavigationBarColor = Color.argb(0xe6, 0xFF, 0xFF, 0xFF)
|
|
@@ -24,6 +23,7 @@ internal val DarkNavigationBarColor = Color.argb(0x80, 0x1b, 0x1b, 0x1b)
|
|
|
24
23
|
object EdgeToEdgeModuleImpl {
|
|
25
24
|
const val NAME = "RNEdgeToEdge"
|
|
26
25
|
|
|
26
|
+
private const val NO_ACTIVITY_ERROR = "$NAME: Ignored system bars change, current activity is null."
|
|
27
27
|
private val boolAttributes = mutableMapOf<Int, Boolean>()
|
|
28
28
|
|
|
29
29
|
private fun resolveBoolAttribute(activity: Activity, resId: Int): Boolean =
|
|
@@ -32,8 +32,8 @@ object EdgeToEdgeModuleImpl {
|
|
|
32
32
|
activity.theme.resolveAttribute(resId, value, true) && value.data != 0
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
private fun
|
|
36
|
-
resolveBoolAttribute(activity, R.attr.
|
|
35
|
+
private fun isDefaultLightSystemBars(activity: Activity): Boolean =
|
|
36
|
+
resolveBoolAttribute(activity, R.attr.enforceSystemBarsLightTheme) ||
|
|
37
37
|
activity.window.decorView.resources.configuration.uiMode and
|
|
38
38
|
Configuration.UI_MODE_NIGHT_MASK != Configuration.UI_MODE_NIGHT_YES
|
|
39
39
|
|
|
@@ -41,13 +41,13 @@ object EdgeToEdgeModuleImpl {
|
|
|
41
41
|
!resolveBoolAttribute(activity, R.attr.enforceNavigationBarContrast)
|
|
42
42
|
|
|
43
43
|
@Suppress("DEPRECATION")
|
|
44
|
-
fun applyEdgeToEdge(reactContext: ReactApplicationContext) {
|
|
45
|
-
val activity = reactContext
|
|
44
|
+
fun applyEdgeToEdge(reactContext: ReactApplicationContext?) {
|
|
45
|
+
val activity = reactContext?.currentActivity
|
|
46
46
|
?: return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
|
|
47
47
|
|
|
48
48
|
activity.runOnUiThread {
|
|
49
49
|
val window = activity.window
|
|
50
|
-
val
|
|
50
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
51
51
|
|
|
52
52
|
WindowCompat.setDecorFitsSystemWindows(window, false)
|
|
53
53
|
|
|
@@ -61,17 +61,17 @@ object EdgeToEdgeModuleImpl {
|
|
|
61
61
|
window.isNavigationBarContrastEnforced = false
|
|
62
62
|
}
|
|
63
63
|
} else {
|
|
64
|
-
val
|
|
64
|
+
val light = isDefaultLightSystemBars(activity)
|
|
65
65
|
|
|
66
66
|
window.navigationBarColor = when {
|
|
67
67
|
VERSION.SDK_INT >= VERSION_CODES.Q -> Color.TRANSPARENT
|
|
68
|
-
VERSION.SDK_INT >= VERSION_CODES.O_MR1 &&
|
|
68
|
+
VERSION.SDK_INT >= VERSION_CODES.O_MR1 && light -> LightNavigationBarColor
|
|
69
69
|
else -> DarkNavigationBarColor
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
|
|
72
|
+
insetsController.run {
|
|
73
73
|
isAppearanceLightNavigationBars = when {
|
|
74
|
-
VERSION.SDK_INT >= VERSION_CODES.O_MR1 ->
|
|
74
|
+
VERSION.SDK_INT >= VERSION_CODES.O_MR1 -> light
|
|
75
75
|
else -> false
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -88,53 +88,87 @@ object EdgeToEdgeModuleImpl {
|
|
|
88
88
|
else -> WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
+
|
|
92
|
+
// re-apply WindowInsetsController systemBarsBehavior each time
|
|
93
|
+
// see https://github.com/zoontek/react-native-edge-to-edge/issues/66
|
|
94
|
+
insetsController.systemBarsBehavior =
|
|
95
|
+
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
91
96
|
}
|
|
92
97
|
}
|
|
93
98
|
|
|
94
|
-
fun
|
|
95
|
-
val activity = reactContext
|
|
96
|
-
?: return FLog.w(ReactConstants.TAG,
|
|
97
|
-
|
|
98
|
-
val statusBarHidden =
|
|
99
|
-
config.takeIf { it.hasKey("statusBarHidden") }?.getBoolean("statusBarHidden")
|
|
100
|
-
val statusBarStyle =
|
|
101
|
-
config.takeIf { it.hasKey("statusBarStyle") }?.getString("statusBarStyle")
|
|
102
|
-
val navigationBarHidden =
|
|
103
|
-
config.takeIf { it.hasKey("navigationBarHidden") }?.getBoolean("navigationBarHidden")
|
|
104
|
-
val navigationBarStyle =
|
|
105
|
-
config.takeIf { it.hasKey("navigationBarStyle") }?.getString("navigationBarStyle")
|
|
99
|
+
fun setStatusBarStyle(reactContext: ReactApplicationContext?, style: String) {
|
|
100
|
+
val activity = reactContext?.currentActivity
|
|
101
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
106
102
|
|
|
107
103
|
activity.runOnUiThread {
|
|
108
104
|
val window = activity.window
|
|
109
105
|
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
110
106
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
107
|
+
insetsController.systemBarsBehavior =
|
|
108
|
+
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
114
109
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
110
|
+
insetsController.isAppearanceLightStatusBars = when (style) {
|
|
111
|
+
"dark-content" -> true
|
|
112
|
+
"light-content" -> false
|
|
113
|
+
else -> isDefaultLightSystemBars(activity)
|
|
119
114
|
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
fun setNavigationBarStyle(reactContext: ReactApplicationContext?, style: String) {
|
|
119
|
+
val activity = reactContext?.currentActivity
|
|
120
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
121
|
+
|
|
122
|
+
if (VERSION.SDK_INT >= VERSION_CODES.O_MR1 && isNavigationBarTransparent(activity)) {
|
|
123
|
+
activity.runOnUiThread {
|
|
124
|
+
val window = activity.window
|
|
125
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
120
126
|
|
|
121
|
-
if (statusBarHidden != null || navigationBarHidden != null) {
|
|
122
127
|
insetsController.systemBarsBehavior =
|
|
123
128
|
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
124
129
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
navigationBarHidden?.let {
|
|
132
|
-
when (it) {
|
|
133
|
-
true -> insetsController.hide(WindowInsetsCompat.Type.navigationBars())
|
|
134
|
-
else -> insetsController.show(WindowInsetsCompat.Type.navigationBars())
|
|
135
|
-
}
|
|
130
|
+
insetsController.isAppearanceLightNavigationBars = when (style) {
|
|
131
|
+
"dark-content" -> true
|
|
132
|
+
"light-content" -> false
|
|
133
|
+
else -> isDefaultLightSystemBars(activity)
|
|
136
134
|
}
|
|
137
135
|
}
|
|
138
136
|
}
|
|
139
137
|
}
|
|
138
|
+
|
|
139
|
+
fun setStatusBarHidden(reactContext: ReactApplicationContext?, hidden: Boolean) {
|
|
140
|
+
val activity = reactContext?.currentActivity
|
|
141
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
142
|
+
|
|
143
|
+
activity.runOnUiThread {
|
|
144
|
+
val window = activity.window
|
|
145
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
146
|
+
|
|
147
|
+
insetsController.systemBarsBehavior =
|
|
148
|
+
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
149
|
+
|
|
150
|
+
when (hidden) {
|
|
151
|
+
true -> insetsController.hide(WindowInsetsCompat.Type.statusBars())
|
|
152
|
+
else -> insetsController.show(WindowInsetsCompat.Type.statusBars())
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
fun setNavigationBarHidden(reactContext: ReactApplicationContext?, hidden: Boolean) {
|
|
158
|
+
val activity = reactContext?.currentActivity
|
|
159
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
160
|
+
|
|
161
|
+
activity.runOnUiThread {
|
|
162
|
+
val window = activity.window
|
|
163
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
164
|
+
|
|
165
|
+
insetsController.systemBarsBehavior =
|
|
166
|
+
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
167
|
+
|
|
168
|
+
when (hidden) {
|
|
169
|
+
true -> insetsController.hide(WindowInsetsCompat.Type.navigationBars())
|
|
170
|
+
else -> insetsController.show(WindowInsetsCompat.Type.navigationBars())
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
140
174
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<resources>
|
|
3
3
|
<style name="Theme.EdgeToEdge.DayNight.Common" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
4
4
|
<item name="enforceNavigationBarContrast">true</item>
|
|
5
|
-
<item name="
|
|
5
|
+
<item name="enforceSystemBarsLightTheme">false</item>
|
|
6
6
|
|
|
7
7
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
8
8
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
<style name="Theme.EdgeToEdge.Material2.DayNight.Common" parent="Theme.MaterialComponents.DayNight.NoActionBar">
|
|
15
15
|
<item name="enforceNavigationBarContrast">true</item>
|
|
16
|
-
<item name="
|
|
16
|
+
<item name="enforceSystemBarsLightTheme">false</item>
|
|
17
17
|
|
|
18
18
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
19
19
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
<style name="Theme.EdgeToEdge.Material3.DayNight.Common" parent="Theme.Material3.DayNight.NoActionBar">
|
|
26
26
|
<item name="enforceNavigationBarContrast">true</item>
|
|
27
|
-
<item name="
|
|
27
|
+
<item name="enforceSystemBarsLightTheme">false</item>
|
|
28
28
|
|
|
29
29
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
30
30
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
<style name="Theme.EdgeToEdge.Material3.Dynamic.DayNight.Common" parent="Theme.Material3.DynamicColors.DayNight.NoActionBar">
|
|
37
37
|
<item name="enforceNavigationBarContrast">true</item>
|
|
38
|
-
<item name="
|
|
38
|
+
<item name="enforceSystemBarsLightTheme">false</item>
|
|
39
39
|
|
|
40
40
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
41
41
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
<style name="Theme.EdgeToEdge.Light.Common" parent="Theme.AppCompat.Light.NoActionBar">
|
|
48
48
|
<item name="enforceNavigationBarContrast">true</item>
|
|
49
|
-
<item name="
|
|
49
|
+
<item name="enforceSystemBarsLightTheme">true</item>
|
|
50
50
|
|
|
51
51
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
52
52
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
|
|
58
58
|
<style name="Theme.EdgeToEdge.Material2.Light.Common" parent="Theme.MaterialComponents.Light.NoActionBar">
|
|
59
59
|
<item name="enforceNavigationBarContrast">true</item>
|
|
60
|
-
<item name="
|
|
60
|
+
<item name="enforceSystemBarsLightTheme">true</item>
|
|
61
61
|
|
|
62
62
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
63
63
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
|
|
69
69
|
<style name="Theme.EdgeToEdge.Material3.Light.Common" parent="Theme.Material3.Light.NoActionBar">
|
|
70
70
|
<item name="enforceNavigationBarContrast">true</item>
|
|
71
|
-
<item name="
|
|
71
|
+
<item name="enforceSystemBarsLightTheme">true</item>
|
|
72
72
|
|
|
73
73
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
74
74
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
|
|
80
80
|
<style name="Theme.EdgeToEdge.Material3.Dynamic.Light.Common" parent="Theme.Material3.DynamicColors.Light.NoActionBar">
|
|
81
81
|
<item name="enforceNavigationBarContrast">true</item>
|
|
82
|
-
<item name="
|
|
82
|
+
<item name="enforceSystemBarsLightTheme">true</item>
|
|
83
83
|
|
|
84
84
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
85
85
|
<item name="android:fitsSystemWindows">false</item>
|
|
@@ -2,7 +2,6 @@ package com.zoontek.rnedgetoedge
|
|
|
2
2
|
|
|
3
3
|
import com.facebook.react.bridge.LifecycleEventListener
|
|
4
4
|
import com.facebook.react.bridge.ReactApplicationContext
|
|
5
|
-
import com.facebook.react.bridge.ReadableMap
|
|
6
5
|
import com.facebook.react.module.annotations.ReactModule
|
|
7
6
|
|
|
8
7
|
@ReactModule(name = EdgeToEdgeModuleImpl.NAME)
|
|
@@ -33,7 +32,19 @@ class EdgeToEdgeModule(reactContext: ReactApplicationContext) :
|
|
|
33
32
|
EdgeToEdgeModuleImpl.applyEdgeToEdge(reactApplicationContext)
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
override fun
|
|
37
|
-
EdgeToEdgeModuleImpl.
|
|
35
|
+
override fun setStatusBarStyle(style: String) {
|
|
36
|
+
EdgeToEdgeModuleImpl.setStatusBarStyle(reactApplicationContext, style)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
override fun setNavigationBarStyle(style: String) {
|
|
40
|
+
EdgeToEdgeModuleImpl.setNavigationBarStyle(reactApplicationContext, style)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
override fun setStatusBarHidden(hidden: Boolean) {
|
|
44
|
+
EdgeToEdgeModuleImpl.setStatusBarHidden(reactApplicationContext, hidden)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
override fun setNavigationBarHidden(hidden: Boolean) {
|
|
48
|
+
EdgeToEdgeModuleImpl.setNavigationBarHidden(reactApplicationContext, hidden)
|
|
38
49
|
}
|
|
39
50
|
}
|
|
@@ -4,7 +4,6 @@ import com.facebook.react.bridge.LifecycleEventListener
|
|
|
4
4
|
import com.facebook.react.bridge.ReactApplicationContext
|
|
5
5
|
import com.facebook.react.bridge.ReactContextBaseJavaModule
|
|
6
6
|
import com.facebook.react.bridge.ReactMethod
|
|
7
|
-
import com.facebook.react.bridge.ReadableMap
|
|
8
7
|
import com.facebook.react.module.annotations.ReactModule
|
|
9
8
|
|
|
10
9
|
@ReactModule(name = EdgeToEdgeModuleImpl.NAME)
|
|
@@ -37,7 +36,22 @@ class EdgeToEdgeModule(reactContext: ReactApplicationContext) :
|
|
|
37
36
|
}
|
|
38
37
|
|
|
39
38
|
@ReactMethod
|
|
40
|
-
fun
|
|
41
|
-
EdgeToEdgeModuleImpl.
|
|
39
|
+
fun setStatusBarStyle(style: String) {
|
|
40
|
+
EdgeToEdgeModuleImpl.setStatusBarStyle(reactApplicationContext, style)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@ReactMethod
|
|
44
|
+
fun setNavigationBarStyle(style: String) {
|
|
45
|
+
EdgeToEdgeModuleImpl.setNavigationBarStyle(reactApplicationContext, style)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@ReactMethod
|
|
49
|
+
fun setStatusBarHidden(hidden: Boolean) {
|
|
50
|
+
EdgeToEdgeModuleImpl.setStatusBarHidden(reactApplicationContext, hidden)
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@ReactMethod
|
|
54
|
+
fun setNavigationBarHidden(hidden: Boolean) {
|
|
55
|
+
EdgeToEdgeModuleImpl.setNavigationBarHidden(reactApplicationContext, hidden)
|
|
42
56
|
}
|
|
43
57
|
}
|
|
@@ -11,12 +11,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
11
11
|
function getColorScheme() {
|
|
12
12
|
return _reactNative.Appearance?.getColorScheme() ?? "light";
|
|
13
13
|
}
|
|
14
|
+
function toNativeBarStyle(style) {
|
|
15
|
+
return style === "light" || style === "dark" ? `${style}-content` : "default";
|
|
16
|
+
}
|
|
14
17
|
|
|
15
18
|
/**
|
|
16
19
|
* Merges the entries stack.
|
|
17
20
|
*/
|
|
18
21
|
function mergeEntriesStack(entriesStack) {
|
|
19
|
-
|
|
22
|
+
return entriesStack.reduce((prev, cur) => {
|
|
20
23
|
for (const prop in cur) {
|
|
21
24
|
if (cur[prop] != null) {
|
|
22
25
|
// @ts-expect-error
|
|
@@ -26,15 +29,10 @@ function mergeEntriesStack(entriesStack) {
|
|
|
26
29
|
return prev;
|
|
27
30
|
}, {
|
|
28
31
|
statusBarStyle: undefined,
|
|
29
|
-
statusBarHidden: undefined,
|
|
30
32
|
navigationBarStyle: undefined,
|
|
31
|
-
|
|
33
|
+
statusBarHidden: false,
|
|
34
|
+
navigationBarHidden: false
|
|
32
35
|
});
|
|
33
|
-
if (mergedEntry.statusBarStyle == null && mergedEntry.statusBarHidden == null && mergedEntry.navigationBarStyle == null && mergedEntry.navigationBarHidden == null) {
|
|
34
|
-
return null;
|
|
35
|
-
} else {
|
|
36
|
-
return mergedEntry;
|
|
37
|
-
}
|
|
38
36
|
}
|
|
39
37
|
|
|
40
38
|
/**
|
|
@@ -43,8 +41,8 @@ function mergeEntriesStack(entriesStack) {
|
|
|
43
41
|
function createStackEntry(props) {
|
|
44
42
|
return {
|
|
45
43
|
statusBarStyle: typeof props.style === "string" ? props.style : props.style?.statusBar,
|
|
46
|
-
statusBarHidden: typeof props.hidden === "boolean" ? props.hidden : props.hidden?.statusBar,
|
|
47
44
|
navigationBarStyle: typeof props.style === "string" ? props.style : props.style?.navigationBar,
|
|
45
|
+
statusBarHidden: typeof props.hidden === "boolean" ? props.hidden : props.hidden?.statusBar,
|
|
48
46
|
navigationBarHidden: typeof props.hidden === "boolean" ? props.hidden : props.hidden?.navigationBar
|
|
49
47
|
};
|
|
50
48
|
}
|
|
@@ -54,7 +52,12 @@ const entriesStack = [];
|
|
|
54
52
|
let updateImmediate = null;
|
|
55
53
|
|
|
56
54
|
// The current merged values from the entries stack.
|
|
57
|
-
let currentMergedEntries =
|
|
55
|
+
let currentMergedEntries = {
|
|
56
|
+
statusBarStyle: undefined,
|
|
57
|
+
navigationBarStyle: undefined,
|
|
58
|
+
statusBarHidden: false,
|
|
59
|
+
navigationBarHidden: false
|
|
60
|
+
};
|
|
58
61
|
|
|
59
62
|
/**
|
|
60
63
|
* Updates the native system bars with the entries from the stack.
|
|
@@ -65,42 +68,36 @@ function updateEntriesStack() {
|
|
|
65
68
|
clearImmediate(updateImmediate);
|
|
66
69
|
}
|
|
67
70
|
updateImmediate = setImmediate(() => {
|
|
71
|
+
const autoBarStyle = getColorScheme() === "light" ? "dark" : "light";
|
|
68
72
|
const mergedEntries = mergeEntriesStack(entriesStack);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
if (statusBarHidden != null) {
|
|
91
|
-
_reactNative.StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
92
|
-
}
|
|
93
|
-
}
|
|
73
|
+
const statusBarStyle = mergedEntries.statusBarStyle === "auto" ? autoBarStyle : mergedEntries.statusBarStyle;
|
|
74
|
+
const navigationBarStyle = mergedEntries.navigationBarStyle === "auto" ? autoBarStyle : mergedEntries.navigationBarStyle;
|
|
75
|
+
const {
|
|
76
|
+
statusBarHidden,
|
|
77
|
+
navigationBarHidden
|
|
78
|
+
} = mergedEntries;
|
|
79
|
+
if (statusBarStyle !== currentMergedEntries.statusBarStyle) {
|
|
80
|
+
const style = toNativeBarStyle(statusBarStyle);
|
|
81
|
+
_reactNative.Platform.OS === "android" ? _NativeEdgeToEdgeModule.default?.setStatusBarStyle(style) : _reactNative.StatusBar.setBarStyle(style, true);
|
|
82
|
+
}
|
|
83
|
+
if (statusBarHidden !== currentMergedEntries.statusBarHidden) {
|
|
84
|
+
_reactNative.Platform.OS === "android" ? _NativeEdgeToEdgeModule.default?.setStatusBarHidden(statusBarHidden) : _reactNative.StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
85
|
+
}
|
|
86
|
+
if (_reactNative.Platform.OS === "android") {
|
|
87
|
+
if (navigationBarStyle !== currentMergedEntries.navigationBarStyle) {
|
|
88
|
+
const style = toNativeBarStyle(navigationBarStyle);
|
|
89
|
+
_NativeEdgeToEdgeModule.default?.setNavigationBarStyle(style);
|
|
90
|
+
}
|
|
91
|
+
if (navigationBarHidden !== currentMergedEntries.navigationBarHidden) {
|
|
92
|
+
_NativeEdgeToEdgeModule.default?.setNavigationBarHidden(navigationBarHidden);
|
|
94
93
|
}
|
|
95
|
-
currentMergedEntries = {
|
|
96
|
-
statusBarStyle,
|
|
97
|
-
statusBarHidden,
|
|
98
|
-
navigationBarStyle,
|
|
99
|
-
navigationBarHidden
|
|
100
|
-
};
|
|
101
|
-
} else {
|
|
102
|
-
currentMergedEntries = null;
|
|
103
94
|
}
|
|
95
|
+
currentMergedEntries = {
|
|
96
|
+
statusBarStyle,
|
|
97
|
+
navigationBarStyle,
|
|
98
|
+
statusBarHidden,
|
|
99
|
+
navigationBarHidden
|
|
100
|
+
};
|
|
104
101
|
});
|
|
105
102
|
}
|
|
106
103
|
}
|
|
@@ -151,8 +148,8 @@ function SystemBars({
|
|
|
151
148
|
style
|
|
152
149
|
}) {
|
|
153
150
|
const statusBarStyle = typeof style === "string" ? style : style?.statusBar;
|
|
154
|
-
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
155
151
|
const navigationBarStyle = typeof style === "string" ? style : style?.navigationBar;
|
|
152
|
+
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
156
153
|
const navigationBarHidden = typeof hidden === "boolean" ? hidden : hidden?.navigationBar;
|
|
157
154
|
const stableProps = (0, _react.useMemo)(() => ({
|
|
158
155
|
style: statusBarStyle === navigationBarStyle ? statusBarStyle : {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_NativeEdgeToEdgeModule","_interopRequireDefault","e","__esModule","default","getColorScheme","Appearance","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_NativeEdgeToEdgeModule","_interopRequireDefault","e","__esModule","default","getColorScheme","Appearance","toNativeBarStyle","style","mergeEntriesStack","entriesStack","reduce","prev","cur","prop","statusBarStyle","undefined","navigationBarStyle","statusBarHidden","navigationBarHidden","createStackEntry","props","statusBar","navigationBar","hidden","updateImmediate","currentMergedEntries","updateEntriesStack","Platform","OS","clearImmediate","setImmediate","autoBarStyle","mergedEntries","NativeModule","setStatusBarStyle","StatusBar","setBarStyle","setStatusBarHidden","setHidden","setNavigationBarStyle","setNavigationBarHidden","pushStackEntry","entry","push","popStackEntry","index","indexOf","splice","replaceStackEntry","newEntry","SystemBars","stableProps","useMemo","colorScheme","useColorScheme","stackEntryRef","useRef","useEffect","current"],"sourceRoot":"../../src","sources":["SystemBars.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _reactNative = require("react-native");
|
|
8
|
-
const NativeModule = _reactNative.TurboModuleRegistry.
|
|
8
|
+
const NativeModule = _reactNative.Platform.OS === "android" ? _reactNative.TurboModuleRegistry.getEnforcing("RNEdgeToEdge") : null;
|
|
9
9
|
if (NativeModule != null) {
|
|
10
10
|
_reactNative.Appearance.addChangeListener(() => {
|
|
11
11
|
NativeModule.onColorSchemeChange();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","NativeModule","TurboModuleRegistry","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","NativeModule","Platform","OS","TurboModuleRegistry","getEnforcing","Appearance","addChangeListener","onColorSchemeChange","_default","exports","default"],"sourceRoot":"../../../src","sources":["specs/NativeEdgeToEdgeModule.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAUA,MAAMC,YAAY,GAChBC,qBAAQ,CAACC,EAAE,KAAK,SAAS,GACrBC,gCAAmB,CAACC,YAAY,CAAO,cAAc,CAAC,GACtD,IAAI;AAEV,IAAIJ,YAAY,IAAI,IAAI,EAAE;EACxBK,uBAAU,CAACC,iBAAiB,CAAC,MAAM;IACjCN,YAAY,CAACO,mBAAmB,CAAC,CAAC;EACpC,CAAC,CAAC;AACJ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcV,YAAY","ignoreList":[]}
|
|
@@ -4,8 +4,5 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _default = exports.default =
|
|
8
|
-
onColorSchemeChange() {},
|
|
9
|
-
setSystemBarsConfig() {}
|
|
10
|
-
};
|
|
7
|
+
var _default = exports.default = null;
|
|
11
8
|
//# sourceMappingURL=NativeEdgeToEdgeModule.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["specs/NativeEdgeToEdgeModule.web.ts"],"mappings":";;;;;;iCAAe,IAAI","ignoreList":[]}
|
|
@@ -2,16 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
import { useEffect, useMemo, useRef } from "react";
|
|
4
4
|
import { Appearance, Platform, StatusBar, useColorScheme } from "react-native";
|
|
5
|
-
import
|
|
5
|
+
import NativeModule from "./specs/NativeEdgeToEdgeModule";
|
|
6
6
|
function getColorScheme() {
|
|
7
7
|
return Appearance?.getColorScheme() ?? "light";
|
|
8
8
|
}
|
|
9
|
+
function toNativeBarStyle(style) {
|
|
10
|
+
return style === "light" || style === "dark" ? `${style}-content` : "default";
|
|
11
|
+
}
|
|
9
12
|
|
|
10
13
|
/**
|
|
11
14
|
* Merges the entries stack.
|
|
12
15
|
*/
|
|
13
16
|
function mergeEntriesStack(entriesStack) {
|
|
14
|
-
|
|
17
|
+
return entriesStack.reduce((prev, cur) => {
|
|
15
18
|
for (const prop in cur) {
|
|
16
19
|
if (cur[prop] != null) {
|
|
17
20
|
// @ts-expect-error
|
|
@@ -21,15 +24,10 @@ function mergeEntriesStack(entriesStack) {
|
|
|
21
24
|
return prev;
|
|
22
25
|
}, {
|
|
23
26
|
statusBarStyle: undefined,
|
|
24
|
-
statusBarHidden: undefined,
|
|
25
27
|
navigationBarStyle: undefined,
|
|
26
|
-
|
|
28
|
+
statusBarHidden: false,
|
|
29
|
+
navigationBarHidden: false
|
|
27
30
|
});
|
|
28
|
-
if (mergedEntry.statusBarStyle == null && mergedEntry.statusBarHidden == null && mergedEntry.navigationBarStyle == null && mergedEntry.navigationBarHidden == null) {
|
|
29
|
-
return null;
|
|
30
|
-
} else {
|
|
31
|
-
return mergedEntry;
|
|
32
|
-
}
|
|
33
31
|
}
|
|
34
32
|
|
|
35
33
|
/**
|
|
@@ -38,8 +36,8 @@ function mergeEntriesStack(entriesStack) {
|
|
|
38
36
|
function createStackEntry(props) {
|
|
39
37
|
return {
|
|
40
38
|
statusBarStyle: typeof props.style === "string" ? props.style : props.style?.statusBar,
|
|
41
|
-
statusBarHidden: typeof props.hidden === "boolean" ? props.hidden : props.hidden?.statusBar,
|
|
42
39
|
navigationBarStyle: typeof props.style === "string" ? props.style : props.style?.navigationBar,
|
|
40
|
+
statusBarHidden: typeof props.hidden === "boolean" ? props.hidden : props.hidden?.statusBar,
|
|
43
41
|
navigationBarHidden: typeof props.hidden === "boolean" ? props.hidden : props.hidden?.navigationBar
|
|
44
42
|
};
|
|
45
43
|
}
|
|
@@ -49,7 +47,12 @@ const entriesStack = [];
|
|
|
49
47
|
let updateImmediate = null;
|
|
50
48
|
|
|
51
49
|
// The current merged values from the entries stack.
|
|
52
|
-
let currentMergedEntries =
|
|
50
|
+
let currentMergedEntries = {
|
|
51
|
+
statusBarStyle: undefined,
|
|
52
|
+
navigationBarStyle: undefined,
|
|
53
|
+
statusBarHidden: false,
|
|
54
|
+
navigationBarHidden: false
|
|
55
|
+
};
|
|
53
56
|
|
|
54
57
|
/**
|
|
55
58
|
* Updates the native system bars with the entries from the stack.
|
|
@@ -60,42 +63,36 @@ function updateEntriesStack() {
|
|
|
60
63
|
clearImmediate(updateImmediate);
|
|
61
64
|
}
|
|
62
65
|
updateImmediate = setImmediate(() => {
|
|
66
|
+
const autoBarStyle = getColorScheme() === "light" ? "dark" : "light";
|
|
63
67
|
const mergedEntries = mergeEntriesStack(entriesStack);
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
85
|
-
if (statusBarHidden != null) {
|
|
86
|
-
StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
87
|
-
}
|
|
88
|
-
}
|
|
68
|
+
const statusBarStyle = mergedEntries.statusBarStyle === "auto" ? autoBarStyle : mergedEntries.statusBarStyle;
|
|
69
|
+
const navigationBarStyle = mergedEntries.navigationBarStyle === "auto" ? autoBarStyle : mergedEntries.navigationBarStyle;
|
|
70
|
+
const {
|
|
71
|
+
statusBarHidden,
|
|
72
|
+
navigationBarHidden
|
|
73
|
+
} = mergedEntries;
|
|
74
|
+
if (statusBarStyle !== currentMergedEntries.statusBarStyle) {
|
|
75
|
+
const style = toNativeBarStyle(statusBarStyle);
|
|
76
|
+
Platform.OS === "android" ? NativeModule?.setStatusBarStyle(style) : StatusBar.setBarStyle(style, true);
|
|
77
|
+
}
|
|
78
|
+
if (statusBarHidden !== currentMergedEntries.statusBarHidden) {
|
|
79
|
+
Platform.OS === "android" ? NativeModule?.setStatusBarHidden(statusBarHidden) : StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
80
|
+
}
|
|
81
|
+
if (Platform.OS === "android") {
|
|
82
|
+
if (navigationBarStyle !== currentMergedEntries.navigationBarStyle) {
|
|
83
|
+
const style = toNativeBarStyle(navigationBarStyle);
|
|
84
|
+
NativeModule?.setNavigationBarStyle(style);
|
|
85
|
+
}
|
|
86
|
+
if (navigationBarHidden !== currentMergedEntries.navigationBarHidden) {
|
|
87
|
+
NativeModule?.setNavigationBarHidden(navigationBarHidden);
|
|
89
88
|
}
|
|
90
|
-
currentMergedEntries = {
|
|
91
|
-
statusBarStyle,
|
|
92
|
-
statusBarHidden,
|
|
93
|
-
navigationBarStyle,
|
|
94
|
-
navigationBarHidden
|
|
95
|
-
};
|
|
96
|
-
} else {
|
|
97
|
-
currentMergedEntries = null;
|
|
98
89
|
}
|
|
90
|
+
currentMergedEntries = {
|
|
91
|
+
statusBarStyle,
|
|
92
|
+
navigationBarStyle,
|
|
93
|
+
statusBarHidden,
|
|
94
|
+
navigationBarHidden
|
|
95
|
+
};
|
|
99
96
|
});
|
|
100
97
|
}
|
|
101
98
|
}
|
|
@@ -146,8 +143,8 @@ export function SystemBars({
|
|
|
146
143
|
style
|
|
147
144
|
}) {
|
|
148
145
|
const statusBarStyle = typeof style === "string" ? style : style?.statusBar;
|
|
149
|
-
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
150
146
|
const navigationBarStyle = typeof style === "string" ? style : style?.navigationBar;
|
|
147
|
+
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
151
148
|
const navigationBarHidden = typeof hidden === "boolean" ? hidden : hidden?.navigationBar;
|
|
152
149
|
const stableProps = useMemo(() => ({
|
|
153
150
|
style: statusBarStyle === navigationBarStyle ? statusBarStyle : {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useMemo","useRef","Appearance","Platform","StatusBar","useColorScheme","
|
|
1
|
+
{"version":3,"names":["useEffect","useMemo","useRef","Appearance","Platform","StatusBar","useColorScheme","NativeModule","getColorScheme","toNativeBarStyle","style","mergeEntriesStack","entriesStack","reduce","prev","cur","prop","statusBarStyle","undefined","navigationBarStyle","statusBarHidden","navigationBarHidden","createStackEntry","props","statusBar","navigationBar","hidden","updateImmediate","currentMergedEntries","updateEntriesStack","OS","clearImmediate","setImmediate","autoBarStyle","mergedEntries","setStatusBarStyle","setBarStyle","setStatusBarHidden","setHidden","setNavigationBarStyle","setNavigationBarHidden","pushStackEntry","entry","push","popStackEntry","index","indexOf","splice","replaceStackEntry","newEntry","SystemBars","stableProps","colorScheme","stackEntryRef","current"],"sourceRoot":"../../src","sources":["SystemBars.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { Appearance, TurboModuleRegistry } from "react-native";
|
|
4
|
-
const NativeModule = TurboModuleRegistry.
|
|
3
|
+
import { Appearance, Platform, TurboModuleRegistry } from "react-native";
|
|
4
|
+
const NativeModule = Platform.OS === "android" ? TurboModuleRegistry.getEnforcing("RNEdgeToEdge") : null;
|
|
5
5
|
if (NativeModule != null) {
|
|
6
6
|
Appearance.addChangeListener(() => {
|
|
7
7
|
NativeModule.onColorSchemeChange();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Appearance","TurboModuleRegistry","NativeModule","
|
|
1
|
+
{"version":3,"names":["Appearance","Platform","TurboModuleRegistry","NativeModule","OS","getEnforcing","addChangeListener","onColorSchemeChange"],"sourceRoot":"../../../src","sources":["specs/NativeEdgeToEdgeModule.ts"],"mappings":";;AACA,SAASA,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,QAAQ,cAAc;AAUxE,MAAMC,YAAY,GAChBF,QAAQ,CAACG,EAAE,KAAK,SAAS,GACrBF,mBAAmB,CAACG,YAAY,CAAO,cAAc,CAAC,GACtD,IAAI;AAEV,IAAIF,YAAY,IAAI,IAAI,EAAE;EACxBH,UAAU,CAACM,iBAAiB,CAAC,MAAM;IACjCH,YAAY,CAACI,mBAAmB,CAAC,CAAC;EACpC,CAAC,CAAC;AACJ;AAEA,eAAeJ,YAAY","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["specs/NativeEdgeToEdgeModule.web.ts"],"mappings":";;AAAA,eAAe,IAAI","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemBars.d.ts","sourceRoot":"","sources":["../../src/SystemBars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"SystemBars.d.ts","sourceRoot":"","sources":["../../src/SystemBars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAkB,MAAM,SAAS,CAAC;AA2L3E,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,eAAe,QAoD5D;yBApDe,UAAU;gCAvCK,eAAe,KAAG,eAAe;+BAYlC,eAAe,KAAG,IAAI;mCAe3C,eAAe,SACf,eAAe,KACrB,eAAe"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import type { TurboModule } from "react-native";
|
|
2
|
-
|
|
3
|
-
statusBarHidden: boolean | undefined;
|
|
4
|
-
statusBarStyle: string | undefined;
|
|
5
|
-
navigationBarHidden: boolean | undefined;
|
|
6
|
-
navigationBarStyle: string | undefined;
|
|
7
|
-
};
|
|
8
|
-
export interface Spec extends TurboModule {
|
|
2
|
+
interface Spec extends TurboModule {
|
|
9
3
|
onColorSchemeChange(): void;
|
|
10
|
-
|
|
4
|
+
setStatusBarStyle(style: string): void;
|
|
5
|
+
setNavigationBarStyle(style: string): void;
|
|
6
|
+
setStatusBarHidden(hidden: boolean): void;
|
|
7
|
+
setNavigationBarHidden(hidden: boolean): void;
|
|
11
8
|
}
|
|
12
9
|
declare const NativeModule: Spec | null;
|
|
13
10
|
export default NativeModule;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeEdgeToEdgeModule.d.ts","sourceRoot":"","sources":["../../../src/specs/NativeEdgeToEdgeModule.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,
|
|
1
|
+
{"version":3,"file":"NativeEdgeToEdgeModule.d.ts","sourceRoot":"","sources":["../../../src/specs/NativeEdgeToEdgeModule.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,UAAU,IAAK,SAAQ,WAAW;IAChC,mBAAmB,IAAI,IAAI,CAAC;IAC5B,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1C,sBAAsB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,YAAY,aAGR,CAAC;AAQX,eAAe,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeEdgeToEdgeModule.web.d.ts","sourceRoot":"","sources":["../../../src/specs/NativeEdgeToEdgeModule.web.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NativeEdgeToEdgeModule.web.d.ts","sourceRoot":"","sources":["../../../src/specs/NativeEdgeToEdgeModule.web.ts"],"names":[],"mappings":";AAAA,wBAAoB"}
|
|
@@ -4,10 +4,10 @@ type SystemBarsProp<T> = T | {
|
|
|
4
4
|
};
|
|
5
5
|
export type SystemBarStyle = "auto" | "light" | "dark";
|
|
6
6
|
export type SystemBarsEntry = {
|
|
7
|
-
statusBarHidden: boolean | undefined;
|
|
8
7
|
statusBarStyle: SystemBarStyle | undefined;
|
|
9
|
-
navigationBarHidden: boolean | undefined;
|
|
10
8
|
navigationBarStyle: SystemBarStyle | undefined;
|
|
9
|
+
statusBarHidden: boolean | undefined;
|
|
10
|
+
navigationBarHidden: boolean | undefined;
|
|
11
11
|
};
|
|
12
12
|
export type SystemBarsProps = {
|
|
13
13
|
style?: SystemBarsProp<SystemBarStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG;IAC5B,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc,EAAE,cAAc,GAAG,SAAS,CAAC;IAC3C,kBAAkB,EAAE,cAAc,GAAG,SAAS,CAAC;IAC/C,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,mBAAmB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-edge-to-edge",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Effortlessly enable edge-to-edge display in React Native",
|
|
6
6
|
"author": "Mathieu Acthernoene <zoontek@gmail.com>",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"prettier": "^3.4.2",
|
|
64
64
|
"prettier-plugin-organize-imports": "^4.1.0",
|
|
65
65
|
"react": "18.3.1",
|
|
66
|
-
"react-native": "0.77.0
|
|
66
|
+
"react-native": "0.77.0",
|
|
67
67
|
"react-native-builder-bob": "^0.35.2",
|
|
68
68
|
"typescript": "^5.7.2"
|
|
69
69
|
},
|
package/src/SystemBars.ts
CHANGED
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
import { useEffect, useMemo, useRef } from "react";
|
|
2
2
|
import { Appearance, Platform, StatusBar, useColorScheme } from "react-native";
|
|
3
|
-
import
|
|
4
|
-
import { SystemBarsEntry, SystemBarsProps } from "./types";
|
|
3
|
+
import NativeModule from "./specs/NativeEdgeToEdgeModule";
|
|
4
|
+
import { SystemBarsEntry, SystemBarsProps, SystemBarStyle } from "./types";
|
|
5
|
+
|
|
6
|
+
type MergeableBarStyle = "light" | "dark" | undefined;
|
|
5
7
|
|
|
6
8
|
function getColorScheme(): "light" | "dark" {
|
|
7
9
|
return Appearance?.getColorScheme() ?? "light";
|
|
8
10
|
}
|
|
9
11
|
|
|
12
|
+
function toNativeBarStyle(
|
|
13
|
+
style: MergeableBarStyle,
|
|
14
|
+
): "default" | "light-content" | "dark-content" {
|
|
15
|
+
return style === "light" || style === "dark" ? `${style}-content` : "default";
|
|
16
|
+
}
|
|
17
|
+
|
|
10
18
|
/**
|
|
11
19
|
* Merges the entries stack.
|
|
12
20
|
*/
|
|
13
|
-
function mergeEntriesStack(
|
|
14
|
-
entriesStack
|
|
15
|
-
|
|
16
|
-
|
|
21
|
+
function mergeEntriesStack(entriesStack: SystemBarsEntry[]) {
|
|
22
|
+
return entriesStack.reduce<{
|
|
23
|
+
statusBarStyle: SystemBarStyle | undefined;
|
|
24
|
+
navigationBarStyle: SystemBarStyle | undefined;
|
|
25
|
+
statusBarHidden: boolean;
|
|
26
|
+
navigationBarHidden: boolean;
|
|
27
|
+
}>(
|
|
17
28
|
(prev, cur) => {
|
|
18
29
|
for (const prop in cur) {
|
|
19
30
|
if (cur[prop as keyof SystemBarsEntry] != null) {
|
|
@@ -25,22 +36,11 @@ function mergeEntriesStack(
|
|
|
25
36
|
},
|
|
26
37
|
{
|
|
27
38
|
statusBarStyle: undefined,
|
|
28
|
-
statusBarHidden: undefined,
|
|
29
39
|
navigationBarStyle: undefined,
|
|
30
|
-
|
|
40
|
+
statusBarHidden: false,
|
|
41
|
+
navigationBarHidden: false,
|
|
31
42
|
},
|
|
32
43
|
);
|
|
33
|
-
|
|
34
|
-
if (
|
|
35
|
-
mergedEntry.statusBarStyle == null &&
|
|
36
|
-
mergedEntry.statusBarHidden == null &&
|
|
37
|
-
mergedEntry.navigationBarStyle == null &&
|
|
38
|
-
mergedEntry.navigationBarHidden == null
|
|
39
|
-
) {
|
|
40
|
-
return null;
|
|
41
|
-
} else {
|
|
42
|
-
return mergedEntry;
|
|
43
|
-
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
/**
|
|
@@ -50,14 +50,14 @@ function createStackEntry(props: SystemBarsProps): SystemBarsEntry {
|
|
|
50
50
|
return {
|
|
51
51
|
statusBarStyle:
|
|
52
52
|
typeof props.style === "string" ? props.style : props.style?.statusBar,
|
|
53
|
-
statusBarHidden:
|
|
54
|
-
typeof props.hidden === "boolean"
|
|
55
|
-
? props.hidden
|
|
56
|
-
: props.hidden?.statusBar,
|
|
57
53
|
navigationBarStyle:
|
|
58
54
|
typeof props.style === "string"
|
|
59
55
|
? props.style
|
|
60
56
|
: props.style?.navigationBar,
|
|
57
|
+
statusBarHidden:
|
|
58
|
+
typeof props.hidden === "boolean"
|
|
59
|
+
? props.hidden
|
|
60
|
+
: props.hidden?.statusBar,
|
|
61
61
|
navigationBarHidden:
|
|
62
62
|
typeof props.hidden === "boolean"
|
|
63
63
|
? props.hidden
|
|
@@ -72,11 +72,16 @@ let updateImmediate: NodeJS.Immediate | null = null;
|
|
|
72
72
|
|
|
73
73
|
// The current merged values from the entries stack.
|
|
74
74
|
let currentMergedEntries: {
|
|
75
|
-
statusBarStyle:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
navigationBarHidden: boolean
|
|
79
|
-
}
|
|
75
|
+
statusBarStyle: MergeableBarStyle;
|
|
76
|
+
navigationBarStyle: MergeableBarStyle;
|
|
77
|
+
statusBarHidden: boolean;
|
|
78
|
+
navigationBarHidden: boolean;
|
|
79
|
+
} = {
|
|
80
|
+
statusBarStyle: undefined,
|
|
81
|
+
navigationBarStyle: undefined,
|
|
82
|
+
statusBarHidden: false,
|
|
83
|
+
navigationBarHidden: false,
|
|
84
|
+
};
|
|
80
85
|
|
|
81
86
|
/**
|
|
82
87
|
* Updates the native system bars with the entries from the stack.
|
|
@@ -88,55 +93,52 @@ function updateEntriesStack() {
|
|
|
88
93
|
}
|
|
89
94
|
|
|
90
95
|
updateImmediate = setImmediate(() => {
|
|
96
|
+
const autoBarStyle = getColorScheme() === "light" ? "dark" : "light";
|
|
91
97
|
const mergedEntries = mergeEntriesStack(entriesStack);
|
|
92
98
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
StatusBar.setBarStyle(`${statusBarStyle}-content`, true);
|
|
124
|
-
}
|
|
125
|
-
if (statusBarHidden != null) {
|
|
126
|
-
StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
127
|
-
}
|
|
128
|
-
}
|
|
99
|
+
const statusBarStyle: MergeableBarStyle =
|
|
100
|
+
mergedEntries.statusBarStyle === "auto"
|
|
101
|
+
? autoBarStyle
|
|
102
|
+
: mergedEntries.statusBarStyle;
|
|
103
|
+
|
|
104
|
+
const navigationBarStyle: MergeableBarStyle =
|
|
105
|
+
mergedEntries.navigationBarStyle === "auto"
|
|
106
|
+
? autoBarStyle
|
|
107
|
+
: mergedEntries.navigationBarStyle;
|
|
108
|
+
|
|
109
|
+
const { statusBarHidden, navigationBarHidden } = mergedEntries;
|
|
110
|
+
|
|
111
|
+
if (statusBarStyle !== currentMergedEntries.statusBarStyle) {
|
|
112
|
+
const style = toNativeBarStyle(statusBarStyle);
|
|
113
|
+
|
|
114
|
+
Platform.OS === "android"
|
|
115
|
+
? NativeModule?.setStatusBarStyle(style)
|
|
116
|
+
: StatusBar.setBarStyle(style, true);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
if (statusBarHidden !== currentMergedEntries.statusBarHidden) {
|
|
120
|
+
Platform.OS === "android"
|
|
121
|
+
? NativeModule?.setStatusBarHidden(statusBarHidden)
|
|
122
|
+
: StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
if (Platform.OS === "android") {
|
|
126
|
+
if (navigationBarStyle !== currentMergedEntries.navigationBarStyle) {
|
|
127
|
+
const style = toNativeBarStyle(navigationBarStyle);
|
|
128
|
+
NativeModule?.setNavigationBarStyle(style);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
currentMergedEntries
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
navigationBarStyle,
|
|
135
|
-
navigationBarHidden,
|
|
136
|
-
};
|
|
137
|
-
} else {
|
|
138
|
-
currentMergedEntries = null;
|
|
131
|
+
if (navigationBarHidden !== currentMergedEntries.navigationBarHidden) {
|
|
132
|
+
NativeModule?.setNavigationBarHidden(navigationBarHidden);
|
|
133
|
+
}
|
|
139
134
|
}
|
|
135
|
+
|
|
136
|
+
currentMergedEntries = {
|
|
137
|
+
statusBarStyle,
|
|
138
|
+
navigationBarStyle,
|
|
139
|
+
statusBarHidden,
|
|
140
|
+
navigationBarHidden,
|
|
141
|
+
};
|
|
140
142
|
});
|
|
141
143
|
}
|
|
142
144
|
}
|
|
@@ -188,10 +190,10 @@ function replaceStackEntry(
|
|
|
188
190
|
|
|
189
191
|
export function SystemBars({ hidden, style }: SystemBarsProps) {
|
|
190
192
|
const statusBarStyle = typeof style === "string" ? style : style?.statusBar;
|
|
191
|
-
const statusBarHidden =
|
|
192
|
-
typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
193
193
|
const navigationBarStyle =
|
|
194
194
|
typeof style === "string" ? style : style?.navigationBar;
|
|
195
|
+
const statusBarHidden =
|
|
196
|
+
typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
195
197
|
const navigationBarHidden =
|
|
196
198
|
typeof hidden === "boolean" ? hidden : hidden?.navigationBar;
|
|
197
199
|
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import type { TurboModule } from "react-native";
|
|
2
|
-
import { Appearance, TurboModuleRegistry } from "react-native";
|
|
2
|
+
import { Appearance, Platform, TurboModuleRegistry } from "react-native";
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
statusBarHidden: boolean | undefined;
|
|
6
|
-
statusBarStyle: string | undefined;
|
|
7
|
-
navigationBarHidden: boolean | undefined;
|
|
8
|
-
navigationBarStyle: string | undefined;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export interface Spec extends TurboModule {
|
|
4
|
+
interface Spec extends TurboModule {
|
|
12
5
|
onColorSchemeChange(): void;
|
|
13
|
-
|
|
6
|
+
setStatusBarStyle(style: string): void;
|
|
7
|
+
setNavigationBarStyle(style: string): void;
|
|
8
|
+
setStatusBarHidden(hidden: boolean): void;
|
|
9
|
+
setNavigationBarHidden(hidden: boolean): void;
|
|
14
10
|
}
|
|
15
11
|
|
|
16
|
-
const NativeModule =
|
|
12
|
+
const NativeModule =
|
|
13
|
+
Platform.OS === "android"
|
|
14
|
+
? TurboModuleRegistry.getEnforcing<Spec>("RNEdgeToEdge")
|
|
15
|
+
: null;
|
|
17
16
|
|
|
18
17
|
if (NativeModule != null) {
|
|
19
18
|
Appearance.addChangeListener(() => {
|
package/src/types.ts
CHANGED
|
@@ -3,10 +3,10 @@ type SystemBarsProp<T> = T | { statusBar?: T; navigationBar?: T };
|
|
|
3
3
|
export type SystemBarStyle = "auto" | "light" | "dark";
|
|
4
4
|
|
|
5
5
|
export type SystemBarsEntry = {
|
|
6
|
-
statusBarHidden: boolean | undefined;
|
|
7
6
|
statusBarStyle: SystemBarStyle | undefined;
|
|
8
|
-
navigationBarHidden: boolean | undefined;
|
|
9
7
|
navigationBarStyle: SystemBarStyle | undefined;
|
|
8
|
+
statusBarHidden: boolean | undefined;
|
|
9
|
+
navigationBarHidden: boolean | undefined;
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
export type SystemBarsProps = {
|