react-native-edge-to-edge 1.4.2 → 1.4.3-beta.0
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/android/src/main/java/com/zoontek/rnedgetoedge/EdgeToEdgeModuleImpl.kt +86 -42
- 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 +44 -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 +45 -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 +6 -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 +77 -74
- package/src/specs/NativeEdgeToEdgeModule.ts +11 -10
- package/src/specs/NativeEdgeToEdgeModule.web.ts +1 -6
- package/src/types.ts +2 -2
|
@@ -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,16 +23,20 @@ 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
|
+
private var statusBarHidden = false
|
|
30
|
+
private var navigationBarHidden = false
|
|
31
|
+
|
|
29
32
|
private fun resolveBoolAttribute(activity: Activity, resId: Int): Boolean =
|
|
30
33
|
boolAttributes.getOrPut(resId) {
|
|
31
34
|
val value = TypedValue()
|
|
32
35
|
activity.theme.resolveAttribute(resId, value, true) && value.data != 0
|
|
33
36
|
}
|
|
34
37
|
|
|
35
|
-
private fun
|
|
36
|
-
resolveBoolAttribute(activity, R.attr.
|
|
38
|
+
private fun isDefaultLightSystemBars(activity: Activity): Boolean =
|
|
39
|
+
resolveBoolAttribute(activity, R.attr.enforceSystemBarsLightTheme) ||
|
|
37
40
|
activity.window.decorView.resources.configuration.uiMode and
|
|
38
41
|
Configuration.UI_MODE_NIGHT_MASK != Configuration.UI_MODE_NIGHT_YES
|
|
39
42
|
|
|
@@ -41,13 +44,13 @@ object EdgeToEdgeModuleImpl {
|
|
|
41
44
|
!resolveBoolAttribute(activity, R.attr.enforceNavigationBarContrast)
|
|
42
45
|
|
|
43
46
|
@Suppress("DEPRECATION")
|
|
44
|
-
fun applyEdgeToEdge(reactContext: ReactApplicationContext) {
|
|
45
|
-
val activity = reactContext
|
|
47
|
+
fun applyEdgeToEdge(reactContext: ReactApplicationContext?) {
|
|
48
|
+
val activity = reactContext?.currentActivity
|
|
46
49
|
?: return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
|
|
47
50
|
|
|
48
51
|
activity.runOnUiThread {
|
|
49
52
|
val window = activity.window
|
|
50
|
-
val
|
|
53
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
51
54
|
|
|
52
55
|
WindowCompat.setDecorFitsSystemWindows(window, false)
|
|
53
56
|
|
|
@@ -61,17 +64,17 @@ object EdgeToEdgeModuleImpl {
|
|
|
61
64
|
window.isNavigationBarContrastEnforced = false
|
|
62
65
|
}
|
|
63
66
|
} else {
|
|
64
|
-
val
|
|
67
|
+
val light = isDefaultLightSystemBars(activity)
|
|
65
68
|
|
|
66
69
|
window.navigationBarColor = when {
|
|
67
70
|
VERSION.SDK_INT >= VERSION_CODES.Q -> Color.TRANSPARENT
|
|
68
|
-
VERSION.SDK_INT >= VERSION_CODES.O_MR1 &&
|
|
71
|
+
VERSION.SDK_INT >= VERSION_CODES.O_MR1 && light -> LightNavigationBarColor
|
|
69
72
|
else -> DarkNavigationBarColor
|
|
70
73
|
}
|
|
71
74
|
|
|
72
|
-
|
|
75
|
+
insetsController.run {
|
|
73
76
|
isAppearanceLightNavigationBars = when {
|
|
74
|
-
VERSION.SDK_INT >= VERSION_CODES.O_MR1 ->
|
|
77
|
+
VERSION.SDK_INT >= VERSION_CODES.O_MR1 -> light
|
|
75
78
|
else -> false
|
|
76
79
|
}
|
|
77
80
|
}
|
|
@@ -88,52 +91,93 @@ object EdgeToEdgeModuleImpl {
|
|
|
88
91
|
else -> WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
|
|
89
92
|
}
|
|
90
93
|
}
|
|
94
|
+
|
|
95
|
+
// re-apply statusBarHidden / navigationBarHidden when app gains focus
|
|
96
|
+
// see https://github.com/zoontek/react-native-edge-to-edge/issues/66
|
|
97
|
+
if (statusBarHidden || navigationBarHidden) {
|
|
98
|
+
insetsController.systemBarsBehavior =
|
|
99
|
+
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
100
|
+
|
|
101
|
+
if (statusBarHidden) {
|
|
102
|
+
insetsController.hide(WindowInsetsCompat.Type.statusBars())
|
|
103
|
+
}
|
|
104
|
+
if (navigationBarHidden) {
|
|
105
|
+
insetsController.hide(WindowInsetsCompat.Type.navigationBars())
|
|
106
|
+
}
|
|
107
|
+
}
|
|
91
108
|
}
|
|
92
109
|
}
|
|
93
110
|
|
|
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")
|
|
111
|
+
fun setStatusBarStyle(reactContext: ReactApplicationContext?, style: String) {
|
|
112
|
+
val activity = reactContext?.currentActivity
|
|
113
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
106
114
|
|
|
107
115
|
activity.runOnUiThread {
|
|
108
116
|
val window = activity.window
|
|
109
117
|
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
110
118
|
|
|
111
|
-
|
|
112
|
-
|
|
119
|
+
insetsController.isAppearanceLightStatusBars = when (style) {
|
|
120
|
+
"dark-content" -> true
|
|
121
|
+
"light-content" -> false
|
|
122
|
+
else -> isDefaultLightSystemBars(activity)
|
|
113
123
|
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
114
126
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
127
|
+
fun setNavigationBarStyle(reactContext: ReactApplicationContext?, style: String) {
|
|
128
|
+
val activity = reactContext?.currentActivity
|
|
129
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
130
|
+
|
|
131
|
+
if (VERSION.SDK_INT >= VERSION_CODES.O_MR1 && isNavigationBarTransparent(activity)) {
|
|
132
|
+
activity.runOnUiThread {
|
|
133
|
+
val window = activity.window
|
|
134
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
135
|
+
|
|
136
|
+
insetsController.isAppearanceLightNavigationBars = when (style) {
|
|
137
|
+
"dark-content" -> true
|
|
138
|
+
"light-content" -> false
|
|
139
|
+
else -> isDefaultLightSystemBars(activity)
|
|
118
140
|
}
|
|
119
141
|
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
120
144
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
145
|
+
fun setStatusBarHidden(reactContext: ReactApplicationContext?, hidden: Boolean) {
|
|
146
|
+
val activity = reactContext?.currentActivity
|
|
147
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
124
148
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
149
|
+
statusBarHidden = hidden
|
|
150
|
+
|
|
151
|
+
activity.runOnUiThread {
|
|
152
|
+
val window = activity.window
|
|
153
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
154
|
+
|
|
155
|
+
insetsController.systemBarsBehavior =
|
|
156
|
+
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
157
|
+
|
|
158
|
+
when (hidden) {
|
|
159
|
+
true -> insetsController.hide(WindowInsetsCompat.Type.statusBars())
|
|
160
|
+
else -> insetsController.show(WindowInsetsCompat.Type.statusBars())
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
fun setNavigationBarHidden(reactContext: ReactApplicationContext?, hidden: Boolean) {
|
|
166
|
+
val activity = reactContext?.currentActivity
|
|
167
|
+
?: return FLog.w(ReactConstants.TAG, NO_ACTIVITY_ERROR)
|
|
168
|
+
|
|
169
|
+
navigationBarHidden = hidden
|
|
170
|
+
|
|
171
|
+
activity.runOnUiThread {
|
|
172
|
+
val window = activity.window
|
|
173
|
+
val insetsController = WindowInsetsControllerCompat(window, window.decorView)
|
|
174
|
+
|
|
175
|
+
insetsController.systemBarsBehavior =
|
|
176
|
+
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
|
177
|
+
|
|
178
|
+
when (hidden) {
|
|
179
|
+
true -> insetsController.hide(WindowInsetsCompat.Type.navigationBars())
|
|
180
|
+
else -> insetsController.show(WindowInsetsCompat.Type.navigationBars())
|
|
137
181
|
}
|
|
138
182
|
}
|
|
139
183
|
}
|
|
@@ -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,39 @@ 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
|
-
|
|
91
|
-
|
|
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
|
+
console.log({
|
|
82
|
+
style
|
|
83
|
+
});
|
|
84
|
+
_reactNative.Platform.OS === "android" ? _NativeEdgeToEdgeModule.default?.setStatusBarStyle(style) : _reactNative.StatusBar.setBarStyle(style, true);
|
|
85
|
+
}
|
|
86
|
+
if (statusBarHidden !== currentMergedEntries.statusBarHidden) {
|
|
87
|
+
_reactNative.Platform.OS === "android" ? _NativeEdgeToEdgeModule.default?.setStatusBarHidden(statusBarHidden) : _reactNative.StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
88
|
+
}
|
|
89
|
+
if (_reactNative.Platform.OS === "android") {
|
|
90
|
+
if (navigationBarStyle !== currentMergedEntries.navigationBarStyle) {
|
|
91
|
+
const style = toNativeBarStyle(navigationBarStyle);
|
|
92
|
+
_NativeEdgeToEdgeModule.default?.setNavigationBarStyle(style);
|
|
93
|
+
}
|
|
94
|
+
if (navigationBarHidden !== currentMergedEntries.navigationBarHidden) {
|
|
95
|
+
_NativeEdgeToEdgeModule.default?.setNavigationBarHidden(navigationBarHidden);
|
|
94
96
|
}
|
|
95
|
-
currentMergedEntries = {
|
|
96
|
-
statusBarStyle,
|
|
97
|
-
statusBarHidden,
|
|
98
|
-
navigationBarStyle,
|
|
99
|
-
navigationBarHidden
|
|
100
|
-
};
|
|
101
|
-
} else {
|
|
102
|
-
currentMergedEntries = null;
|
|
103
97
|
}
|
|
98
|
+
currentMergedEntries = {
|
|
99
|
+
statusBarStyle,
|
|
100
|
+
navigationBarStyle,
|
|
101
|
+
statusBarHidden,
|
|
102
|
+
navigationBarHidden
|
|
103
|
+
};
|
|
104
104
|
});
|
|
105
105
|
}
|
|
106
106
|
}
|
|
@@ -151,8 +151,8 @@ function SystemBars({
|
|
|
151
151
|
style
|
|
152
152
|
}) {
|
|
153
153
|
const statusBarStyle = typeof style === "string" ? style : style?.statusBar;
|
|
154
|
-
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
155
154
|
const navigationBarStyle = typeof style === "string" ? style : style?.navigationBar;
|
|
155
|
+
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
156
156
|
const navigationBarHidden = typeof hidden === "boolean" ? hidden : hidden?.navigationBar;
|
|
157
157
|
const stableProps = (0, _react.useMemo)(() => ({
|
|
158
158
|
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","console","log","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;AAYA,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,39 @@ 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
|
-
|
|
86
|
-
|
|
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
|
+
console.log({
|
|
77
|
+
style
|
|
78
|
+
});
|
|
79
|
+
Platform.OS === "android" ? NativeModule?.setStatusBarStyle(style) : StatusBar.setBarStyle(style, true);
|
|
80
|
+
}
|
|
81
|
+
if (statusBarHidden !== currentMergedEntries.statusBarHidden) {
|
|
82
|
+
Platform.OS === "android" ? NativeModule?.setStatusBarHidden(statusBarHidden) : StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
83
|
+
}
|
|
84
|
+
if (Platform.OS === "android") {
|
|
85
|
+
if (navigationBarStyle !== currentMergedEntries.navigationBarStyle) {
|
|
86
|
+
const style = toNativeBarStyle(navigationBarStyle);
|
|
87
|
+
NativeModule?.setNavigationBarStyle(style);
|
|
88
|
+
}
|
|
89
|
+
if (navigationBarHidden !== currentMergedEntries.navigationBarHidden) {
|
|
90
|
+
NativeModule?.setNavigationBarHidden(navigationBarHidden);
|
|
89
91
|
}
|
|
90
|
-
currentMergedEntries = {
|
|
91
|
-
statusBarStyle,
|
|
92
|
-
statusBarHidden,
|
|
93
|
-
navigationBarStyle,
|
|
94
|
-
navigationBarHidden
|
|
95
|
-
};
|
|
96
|
-
} else {
|
|
97
|
-
currentMergedEntries = null;
|
|
98
92
|
}
|
|
93
|
+
currentMergedEntries = {
|
|
94
|
+
statusBarStyle,
|
|
95
|
+
navigationBarStyle,
|
|
96
|
+
statusBarHidden,
|
|
97
|
+
navigationBarHidden
|
|
98
|
+
};
|
|
99
99
|
});
|
|
100
100
|
}
|
|
101
101
|
}
|
|
@@ -146,8 +146,8 @@ export function SystemBars({
|
|
|
146
146
|
style
|
|
147
147
|
}) {
|
|
148
148
|
const statusBarStyle = typeof style === "string" ? style : style?.statusBar;
|
|
149
|
-
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
150
149
|
const navigationBarStyle = typeof style === "string" ? style : style?.navigationBar;
|
|
150
|
+
const statusBarHidden = typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
151
151
|
const navigationBarHidden = typeof hidden === "boolean" ? hidden : hidden?.navigationBar;
|
|
152
152
|
const stableProps = useMemo(() => ({
|
|
153
153
|
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","console","log","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;AAYxE,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;AA4L3E,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,11 @@
|
|
|
1
1
|
import type { TurboModule } from "react-native";
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
statusBarStyle: string | undefined;
|
|
5
|
-
navigationBarHidden: boolean | undefined;
|
|
6
|
-
navigationBarStyle: string | undefined;
|
|
7
|
-
};
|
|
8
|
-
export interface Spec extends TurboModule {
|
|
2
|
+
type SystemBarStyle = "default" | "light-content" | "dark-content";
|
|
3
|
+
interface Spec extends TurboModule {
|
|
9
4
|
onColorSchemeChange(): void;
|
|
10
|
-
|
|
5
|
+
setStatusBarStyle(style: SystemBarStyle): void;
|
|
6
|
+
setNavigationBarStyle(style: SystemBarStyle): void;
|
|
7
|
+
setStatusBarHidden(hidden: boolean): void;
|
|
8
|
+
setNavigationBarHidden(hidden: boolean): void;
|
|
11
9
|
}
|
|
12
10
|
declare const NativeModule: Spec | null;
|
|
13
11
|
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,KAAK,
|
|
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,KAAK,cAAc,GAAG,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;AAEnE,UAAU,IAAK,SAAQ,WAAW;IAChC,mBAAmB,IAAI,IAAI,CAAC;IAC5B,iBAAiB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/C,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IACnD,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.0",
|
|
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,53 @@ 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
|
-
|
|
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
|
+
console.log({ style });
|
|
114
|
+
|
|
115
|
+
Platform.OS === "android"
|
|
116
|
+
? NativeModule?.setStatusBarStyle(style)
|
|
117
|
+
: StatusBar.setBarStyle(style, true);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
if (statusBarHidden !== currentMergedEntries.statusBarHidden) {
|
|
121
|
+
Platform.OS === "android"
|
|
122
|
+
? NativeModule?.setStatusBarHidden(statusBarHidden)
|
|
123
|
+
: StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
if (Platform.OS === "android") {
|
|
127
|
+
if (navigationBarStyle !== currentMergedEntries.navigationBarStyle) {
|
|
128
|
+
const style = toNativeBarStyle(navigationBarStyle);
|
|
129
|
+
NativeModule?.setNavigationBarStyle(style);
|
|
129
130
|
}
|
|
130
131
|
|
|
131
|
-
currentMergedEntries
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
navigationBarStyle,
|
|
135
|
-
navigationBarHidden,
|
|
136
|
-
};
|
|
137
|
-
} else {
|
|
138
|
-
currentMergedEntries = null;
|
|
132
|
+
if (navigationBarHidden !== currentMergedEntries.navigationBarHidden) {
|
|
133
|
+
NativeModule?.setNavigationBarHidden(navigationBarHidden);
|
|
134
|
+
}
|
|
139
135
|
}
|
|
136
|
+
|
|
137
|
+
currentMergedEntries = {
|
|
138
|
+
statusBarStyle,
|
|
139
|
+
navigationBarStyle,
|
|
140
|
+
statusBarHidden,
|
|
141
|
+
navigationBarHidden,
|
|
142
|
+
};
|
|
140
143
|
});
|
|
141
144
|
}
|
|
142
145
|
}
|
|
@@ -188,10 +191,10 @@ function replaceStackEntry(
|
|
|
188
191
|
|
|
189
192
|
export function SystemBars({ hidden, style }: SystemBarsProps) {
|
|
190
193
|
const statusBarStyle = typeof style === "string" ? style : style?.statusBar;
|
|
191
|
-
const statusBarHidden =
|
|
192
|
-
typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
193
194
|
const navigationBarStyle =
|
|
194
195
|
typeof style === "string" ? style : style?.navigationBar;
|
|
196
|
+
const statusBarHidden =
|
|
197
|
+
typeof hidden === "boolean" ? hidden : hidden?.statusBar;
|
|
195
198
|
const navigationBarHidden =
|
|
196
199
|
typeof hidden === "boolean" ? hidden : hidden?.navigationBar;
|
|
197
200
|
|
|
@@ -1,19 +1,20 @@
|
|
|
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
|
-
type
|
|
5
|
-
statusBarHidden: boolean | undefined;
|
|
6
|
-
statusBarStyle: string | undefined;
|
|
7
|
-
navigationBarHidden: boolean | undefined;
|
|
8
|
-
navigationBarStyle: string | undefined;
|
|
9
|
-
};
|
|
4
|
+
type SystemBarStyle = "default" | "light-content" | "dark-content";
|
|
10
5
|
|
|
11
|
-
|
|
6
|
+
interface Spec extends TurboModule {
|
|
12
7
|
onColorSchemeChange(): void;
|
|
13
|
-
|
|
8
|
+
setStatusBarStyle(style: SystemBarStyle): void;
|
|
9
|
+
setNavigationBarStyle(style: SystemBarStyle): void;
|
|
10
|
+
setStatusBarHidden(hidden: boolean): void;
|
|
11
|
+
setNavigationBarHidden(hidden: boolean): void;
|
|
14
12
|
}
|
|
15
13
|
|
|
16
|
-
const NativeModule =
|
|
14
|
+
const NativeModule =
|
|
15
|
+
Platform.OS === "android"
|
|
16
|
+
? TurboModuleRegistry.getEnforcing<Spec>("RNEdgeToEdge")
|
|
17
|
+
: null;
|
|
17
18
|
|
|
18
19
|
if (NativeModule != null) {
|
|
19
20
|
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 = {
|