-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: edge-to-edge mode on Android #52392
Draft
kirillzyusko
wants to merge
17
commits into
Expensify:main
Choose a base branch
from
margelo:feat/edge-to-edge
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+488
−81
Draft
Changes from 11 commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
6f13505
feat: edge-to-edge mode on Android
kirillzyusko 70cfe6f
fix: proper kav implementation for remaining platforms
kirillzyusko c6cb0b3
fix: eslint
kirillzyusko 4cb3e3e
fix: prettier
kirillzyusko 372d05a
fix: navigationBarTranslucent property for Modal
kirillzyusko 7f4dfad
fix: small bottom insets on Android
kirillzyusko 5704b07
fix: do not use contrast enforcement for nav bar
kirillzyusko 862fffe
fix: splash screen jump on Android
kirillzyusko b50083e
fix: nav bar manual theme management
kirillzyusko af30e2f
chore: rephrase a comment to avoid double wording
kirillzyusko 2100beb
fix: incorrect window metrics on Android
kirillzyusko ec2a2e1
fix: prettier
kirillzyusko 14037ea
fix: apply padding correction when keyboard gets shown on Android
kirillzyusko a194a59
fix: changes after review
kirillzyusko cd63c66
fix: removed unused import
kirillzyusko e718209
fix: crash on web
kirillzyusko 842ac00
fix: keyboard-avoiding-view in semi opened state
kirillzyusko File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
214 changes: 214 additions & 0 deletions
214
patches/react-native+0.75.2+020+modal-navigation-bar-translucent.patch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,214 @@ | ||
| diff --git a/node_modules/react-native/Libraries/Modal/Modal.d.ts b/node_modules/react-native/Libraries/Modal/Modal.d.ts | ||
| index 4cc2df2..a501b27 100644 | ||
| --- a/node_modules/react-native/Libraries/Modal/Modal.d.ts | ||
| +++ b/node_modules/react-native/Libraries/Modal/Modal.d.ts | ||
| @@ -94,6 +94,11 @@ export interface ModalPropsAndroid { | ||
| * Determines whether your modal should go under the system statusbar. | ||
| */ | ||
| statusBarTranslucent?: boolean | undefined; | ||
| + | ||
| + /** | ||
| + * Determines whether your modal should go under the system navigationbar. | ||
| + */ | ||
| + navigationBarTranslucent?: boolean | undefined; | ||
| } | ||
|
|
||
| export type ModalProps = ModalBaseProps & | ||
| diff --git a/node_modules/react-native/Libraries/Modal/Modal.js b/node_modules/react-native/Libraries/Modal/Modal.js | ||
| index 1942d9e..1ffbe4c 100644 | ||
| --- a/node_modules/react-native/Libraries/Modal/Modal.js | ||
| +++ b/node_modules/react-native/Libraries/Modal/Modal.js | ||
| @@ -95,6 +95,14 @@ export type Props = $ReadOnly<{| | ||
| */ | ||
| statusBarTranslucent?: ?boolean, | ||
|
|
||
| + /** | ||
| + * The `navigationBarTranslucent` prop determines whether your modal should go under | ||
| + * the system navigationbar. | ||
| + * | ||
| + * See https://reactnative.dev/docs/modal.html#navigationbartranslucent-android | ||
| + */ | ||
| + navigationBarTranslucent?: ?boolean, | ||
| + | ||
| /** | ||
| * The `hardwareAccelerated` prop controls whether to force hardware | ||
| * acceleration for the underlying window. | ||
| @@ -170,6 +178,14 @@ function confirmProps(props: Props) { | ||
| `Modal with '${props.presentationStyle}' presentation style and 'transparent' value is not supported.`, | ||
| ); | ||
| } | ||
| + if ( | ||
| + props.navigationBarTranslucent === true && | ||
| + props.statusBarTranslucent !== true | ||
| + ) { | ||
| + console.warn( | ||
| + 'Modal with translucent navigation bar and without translucent status bar is not supported.', | ||
| + ); | ||
| + } | ||
| } | ||
| } | ||
|
|
||
| @@ -291,6 +307,7 @@ class Modal extends React.Component<Props, State> { | ||
| onDismiss={onDismiss} | ||
| visible={this.props.visible} | ||
| statusBarTranslucent={this.props.statusBarTranslucent} | ||
| + navigationBarTranslucent={this.props.navigationBarTranslucent} | ||
| identifier={this._identifier} | ||
| style={styles.modal} | ||
| // $FlowFixMe[method-unbinding] added when improving typing for this parameters | ||
| diff --git a/node_modules/react-native/React/Views/RCTModalHostView.h b/node_modules/react-native/React/Views/RCTModalHostView.h | ||
| index 2fcdcae..0469c23 100644 | ||
| --- a/node_modules/react-native/React/Views/RCTModalHostView.h | ||
| +++ b/node_modules/react-native/React/Views/RCTModalHostView.h | ||
| @@ -27,6 +27,7 @@ | ||
|
|
||
| // Android only | ||
| @property (nonatomic, assign) BOOL statusBarTranslucent; | ||
| +@property (nonatomic, assign) BOOL navigationBarTranslucent; | ||
| @property (nonatomic, assign) BOOL hardwareAccelerated; | ||
| @property (nonatomic, assign) BOOL animated; | ||
|
|
||
| diff --git a/node_modules/react-native/React/Views/RCTModalHostViewManager.m b/node_modules/react-native/React/Views/RCTModalHostViewManager.m | ||
| index e2ae7e2..a694008 100644 | ||
| --- a/node_modules/react-native/React/Views/RCTModalHostViewManager.m | ||
| +++ b/node_modules/react-native/React/Views/RCTModalHostViewManager.m | ||
| @@ -118,6 +118,7 @@ - (void)invalidate | ||
| RCT_EXPORT_VIEW_PROPERTY(presentationStyle, UIModalPresentationStyle) | ||
| RCT_EXPORT_VIEW_PROPERTY(transparent, BOOL) | ||
| RCT_EXPORT_VIEW_PROPERTY(statusBarTranslucent, BOOL) | ||
| +RCT_EXPORT_VIEW_PROPERTY(navigationBarTranslucent, BOOL) | ||
| RCT_EXPORT_VIEW_PROPERTY(hardwareAccelerated, BOOL) | ||
| RCT_EXPORT_VIEW_PROPERTY(animated, BOOL) | ||
| RCT_EXPORT_VIEW_PROPERTY(onShow, RCTDirectEventBlock) | ||
| diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.kt b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.kt | ||
| index d5e053c..fddda45 100644 | ||
| --- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.kt | ||
| +++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.kt | ||
| @@ -59,6 +59,15 @@ public class ReactModalHostManager : | ||
| view.statusBarTranslucent = statusBarTranslucent | ||
| } | ||
|
|
||
| + | ||
| + @ReactProp(name = "navigationBarTranslucent") | ||
| + public override fun setNavigationBarTranslucent( | ||
| + view: ReactModalHostView, | ||
| + navigationBarTranslucent: Boolean | ||
| + ) { | ||
| + view.navigationBarTranslucent = navigationBarTranslucent | ||
| + } | ||
| + | ||
| @ReactProp(name = "hardwareAccelerated") | ||
| public override fun setHardwareAccelerated( | ||
| view: ReactModalHostView, | ||
| diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt | ||
| index f6e0d82..03380cb 100644 | ||
| --- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt | ||
| +++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt | ||
| @@ -46,6 +46,7 @@ import com.facebook.react.uimanager.UIManagerModule | ||
| import com.facebook.react.uimanager.events.EventDispatcher | ||
| import com.facebook.react.views.common.ContextUtils | ||
| import com.facebook.react.views.view.ReactViewGroup | ||
| +import com.facebook.react.views.view.setSystemBarsTranslucency | ||
| import java.util.Objects | ||
| import kotlin.math.abs | ||
|
|
||
| @@ -78,6 +79,12 @@ public class ReactModalHostView(context: ThemedReactContext) : | ||
| createNewDialog = true | ||
| } | ||
|
|
||
| + public var navigationBarTranslucent: Boolean = false | ||
| + set(value) { | ||
| + field = value | ||
| + createNewDialog = true | ||
| + } | ||
| + | ||
| public var animationType: String? = null | ||
| set(value) { | ||
| field = value | ||
| @@ -296,6 +303,7 @@ public class ReactModalHostView(context: ThemedReactContext) : | ||
| } else { | ||
| frameLayout.fitsSystemWindows = true | ||
| } | ||
| + dialog?.window?.setSystemBarsTranslucency(navigationBarTranslucent) | ||
| return frameLayout | ||
| } | ||
|
|
||
| diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/WindowUtil.kt b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/WindowUtil.kt | ||
| new file mode 100644 | ||
| index 0000000..24057c4 | ||
| --- /dev/null | ||
| +++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/WindowUtil.kt | ||
| @@ -0,0 +1,53 @@ | ||
| +/* | ||
| + * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| + * | ||
| + * This source code is licensed under the MIT license found in the | ||
| + * LICENSE file in the root directory of this source tree. | ||
| + */ | ||
| + | ||
| +package com.facebook.react.views.view | ||
| + | ||
| +import android.content.res.Configuration | ||
| +import android.graphics.Color | ||
| +import android.os.Build | ||
| +import android.view.Window | ||
| +import android.view.WindowManager | ||
| +import androidx.core.view.ViewCompat | ||
| +import androidx.core.view.WindowCompat | ||
| +import androidx.core.view.WindowInsetsControllerCompat | ||
| + | ||
| +@Suppress("DEPRECATION") | ||
| +public fun Window.setSystemBarsTranslucency(isTranslucent: Boolean) { | ||
| + WindowCompat.setDecorFitsSystemWindows(this, !isTranslucent) | ||
| + | ||
| + if (isTranslucent) { | ||
| + val isDarkMode = | ||
| + context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == | ||
| + Configuration.UI_MODE_NIGHT_YES | ||
| + | ||
| + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { | ||
| + isStatusBarContrastEnforced = false | ||
| + isNavigationBarContrastEnforced = true | ||
| + } | ||
| + | ||
| + statusBarColor = Color.TRANSPARENT | ||
| + navigationBarColor = when { | ||
| + Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q -> Color.TRANSPARENT | ||
| + Build.VERSION.SDK_INT >= Build.VERSION_CODES.O_MR1 && !isDarkMode -> | ||
| + Color.argb(0xe6, 0xFF, 0xFF, 0xFF) | ||
| + else -> Color.argb(0x80, 0x1b, 0x1b, 0x1b) | ||
| + } | ||
| + | ||
| + WindowInsetsControllerCompat(this, this.decorView).run { | ||
| + isAppearanceLightNavigationBars = !isDarkMode | ||
| + } | ||
| + | ||
| + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) { | ||
| + attributes.layoutInDisplayCutoutMode = when { | ||
| + Build.VERSION.SDK_INT >= Build.VERSION_CODES.R -> | ||
| + WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS | ||
| + else -> WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES | ||
| + } | ||
| + } | ||
| + } | ||
| +} | ||
| \ No newline at end of file | ||
| diff --git a/node_modules/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js b/node_modules/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js | ||
| index 86bf895..58ec294 100644 | ||
| --- a/node_modules/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js | ||
| +++ b/node_modules/react-native/src/private/specs/components/RCTModalHostViewNativeComponent.js | ||
| @@ -58,6 +58,14 @@ type NativeProps = $ReadOnly<{| | ||
| */ | ||
| statusBarTranslucent?: WithDefault<boolean, false>, | ||
|
|
||
| + /** | ||
| + * The `navigationBarTranslucent` prop determines whether your modal should go under | ||
| + * the system navigationbar. | ||
| + * | ||
| + * See https://reactnative.dev/docs/modal#navigationBarTranslucent | ||
| + */ | ||
| + navigationBarTranslucent?: WithDefault<boolean, false>, | ||
| + | ||
| /** | ||
| * The `hardwareAccelerated` prop controls whether to force hardware | ||
| * acceleration for the underlying window. |
62 changes: 0 additions & 62 deletions
62
patches/react-native-keyboard-controller+1.14.1+001+disable-android.patch
This file was deleted.
Oops, something went wrong.
File renamed without changes.
32 changes: 32 additions & 0 deletions
32
patches/react-native-modal+13.0.1+002+modal-navigation-bar-translucent.patch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| diff --git a/node_modules/react-native-modal/dist/modal.d.ts b/node_modules/react-native-modal/dist/modal.d.ts | ||
| index bd6419e..029762c 100644 | ||
| --- a/node_modules/react-native-modal/dist/modal.d.ts | ||
| +++ b/node_modules/react-native-modal/dist/modal.d.ts | ||
| @@ -46,6 +46,7 @@ declare const defaultProps: { | ||
| scrollOffsetMax: number; | ||
| scrollHorizontal: boolean; | ||
| statusBarTranslucent: boolean; | ||
| + navigationBarTranslucent: boolean; | ||
| supportedOrientations: ("landscape" | "portrait" | "portrait-upside-down" | "landscape-left" | "landscape-right")[]; | ||
| }; | ||
| export declare type ModalProps = ViewProps & { | ||
| @@ -137,6 +138,7 @@ export declare class ReactNativeModal extends React.Component<ModalProps, State> | ||
| scrollOffsetMax: number; | ||
| scrollHorizontal: boolean; | ||
| statusBarTranslucent: boolean; | ||
| + navigationBarTranslucent: boolean; | ||
| supportedOrientations: ("landscape" | "portrait" | "portrait-upside-down" | "landscape-left" | "landscape-right")[]; | ||
| }; | ||
| state: State; | ||
| diff --git a/node_modules/react-native-modal/dist/modal.js b/node_modules/react-native-modal/dist/modal.js | ||
| index 46277ea..feec991 100644 | ||
| --- a/node_modules/react-native-modal/dist/modal.js | ||
| +++ b/node_modules/react-native-modal/dist/modal.js | ||
| @@ -38,6 +38,7 @@ const defaultProps = { | ||
| scrollOffsetMax: 0, | ||
| scrollHorizontal: false, | ||
| statusBarTranslucent: false, | ||
| + navigationBarTranslucent: false, | ||
| supportedOrientations: ['portrait', 'landscape'], | ||
| }; | ||
| const extractAnimationFromProps = (props) => ({ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had to add this library again, because we need to manage navigation bar button style (dark/light).
Since user can customize the theme of app independently to device settings we also have to manage it dynamically from JS code.
I checked and one method that we use (
setButtonStyleAsync) doesn't use deprecated API. However I remember, that this particular library wasn't accepted in the first round of fixing the nav bar color management, so i'm happy to discuss further steps here 🙌