diff --git a/README.md b/README.md index 68059f6300..995883d9c2 100644 --- a/README.md +++ b/README.md @@ -109,27 +109,27 @@ Allows for the customization of how the given screen should appear/disappear whe Defines how the method that should be used to present the given screen. It is a separate property from `stackAnimation` as the presentation mode can carry additional semantic. The allowed values are: - - `push` – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme. - - `modal` – Explained below. - - `transparentModal` – Explained below. - - `containedModal` – Explained below. - - `containedTransparentModal` – Explained below. - - `fullScreenModal` – Explained below. - - `formSheet` – Explained below. +- `push` – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme. +- `modal` – Explained below. +- `transparentModal` – Explained below. +- `containedModal` – Explained below. +- `containedTransparentModal` – Explained below. +- `fullScreenModal` – Explained below. +- `formSheet` – Explained below. - For iOS: - - `modal` will use [`UIModalPresentationAutomatic`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationautomatic?language=objc) on iOS 13 and later, and will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc) on iOS 12 and earlier. - - `fullScreenModal` will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc) - - `formSheet` will use [`UIModalPresentationFormSheet`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationformsheet?language=objc) - - `transparentModal` will use [`UIModalPresentationOverFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationoverfullscreen?language=objc) - - `containedModal` will use [`UIModalPresentationCurrentContext`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationcurrentcontext?language=objc) - - `containedTransparentModal` will use [`UIModalPresentationOverCurrentContext`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationovercurrentcontext?language=objc) +For iOS: +- `modal` will use [`UIModalPresentationAutomatic`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationautomatic?language=objc) on iOS 13 and later, and will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc) on iOS 12 and earlier. +- `fullScreenModal` will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc) +- `formSheet` will use [`UIModalPresentationFormSheet`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationformsheet?language=objc) +- `transparentModal` will use [`UIModalPresentationOverFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationoverfullscreen?language=objc) +- `containedModal` will use [`UIModalPresentationCurrentContext`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationcurrentcontext?language=objc) +- `containedTransparentModal` will use [`UIModalPresentationOverCurrentContext`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationovercurrentcontext?language=objc) - For Android: +For Android: - `modal`, `containedModal`, `fullScreenModal`, `formSheet` will use `Screen.StackPresentation.MODAL`. +`modal`, `containedModal`, `fullScreenModal`, `formSheet` will use `Screen.StackPresentation.MODAL`. - `transparentModal`, `containedTransparentModal` will use `Screen.StackPresentation.TRANSPARENT_MODAL`. +`transparentModal`, `containedTransparentModal` will use `Screen.StackPresentation.TRANSPARENT_MODAL`. ### `` @@ -191,9 +191,9 @@ String that applies `rtl` or `ltr` form to the stack. When set to `false` the back swipe gesture will be disabled when the parent `Screen` is on top of the stack. The default value is `true`. -#### `translucent` (iOS only) +#### `translucent` -When set to `true`, it makes native navigation bar on iOS semi-transparent with blur effect. It is a common way of presenting a navigation bar introduced in iOS 11. The default value is `false`. +When set to `true`, it allows the content to go under the navigation header, not bellow. If you want to create a transparent header, you should also set `backgroundColor` to `transparent`. The default value is `false`. #### `backTitle` (iOS only) diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.java index f609d806b6..97fd88e67a 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.java +++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.java @@ -65,6 +65,7 @@ public void startAnimation(Animation animation) { private AppBarLayout mAppBarLayout; private Toolbar mToolbar; private boolean mShadowHidden; + private boolean mIsTranslucent; @SuppressLint("ValidFragment") public ScreenStackFragment(Screen screenView) { @@ -96,6 +97,14 @@ public void setToolbarShadowHidden(boolean hidden) { } } + public void setToolbarTranslucent(boolean translucent) { + if (mIsTranslucent != translucent) { + ViewGroup.LayoutParams params = mScreenView.getLayoutParams(); + ((CoordinatorLayout.LayoutParams) params).setBehavior(translucent ? null : new AppBarLayout.ScrollingViewBehavior()); + mIsTranslucent = translucent; + } + } + public void onStackUpdate() { View child = mScreenView.getChildAt(0); if (child instanceof ScreenStackHeaderConfig) { @@ -154,7 +163,7 @@ public View onCreateView(LayoutInflater inflater, CoordinatorLayout view = new NotifyingCoordinatorLayout(getContext(), this); CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); - params.setBehavior(new AppBarLayout.ScrollingViewBehavior()); + params.setBehavior(mIsTranslucent ? null : new AppBarLayout.ScrollingViewBehavior()); mScreenView.setLayoutParams(params); view.addView(recycleView(mScreenView)); diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java index 39db1bf8cd..19b2489798 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java +++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java @@ -39,6 +39,7 @@ public class ScreenStackHeaderConfig extends ViewGroup { private boolean mDestroyed; private boolean mBackButtonInCustomView; private boolean mIsTopInsetEnabled = true; + private boolean mIsTranslucent; private int mTintColor; private final Toolbar mToolbar; @@ -215,6 +216,9 @@ public void onUpdate() { // shadow getScreenFragment().setToolbarShadowHidden(mIsShadowHidden); + // translucent + getScreenFragment().setToolbarTranslucent(mIsTranslucent); + // title actionBar.setTitle(mTitle); if (TextUtils.isEmpty(mTitle)) { @@ -238,7 +242,7 @@ public void onUpdate() { } // background - if (mBackgroundColor != 0) { + if (mBackgroundColor != -1) { mToolbar.setBackgroundColor(mBackgroundColor); } @@ -379,6 +383,10 @@ public void setHidden(boolean hidden) { mIsHidden = hidden; } + public void setTranslucent(boolean translucent) { + mIsTranslucent = translucent; + } + public void setBackButtonInCustomView(boolean backButtonInCustomView) { mBackButtonInCustomView = backButtonInCustomView; } public void setDirection(String direction) { diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.java index bb463e570f..5a1eae32e3 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.java +++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.java @@ -89,9 +89,9 @@ public void setTitleColor(ScreenStackHeaderConfig config, int titleColor) { config.setTitleColor(titleColor); } - @ReactProp(name = "backgroundColor", customType = "Color") - public void setBackgroundColor(ScreenStackHeaderConfig config, int titleColor) { - config.setBackgroundColor(titleColor); + @ReactProp(name = "backgroundColor", customType = "Color", defaultInt = -1) + public void setBackgroundColor(ScreenStackHeaderConfig config, int backgroundColor) { + config.setBackgroundColor(backgroundColor); } @ReactProp(name = "hideShadow") @@ -119,6 +119,11 @@ public void setHidden(ScreenStackHeaderConfig config, boolean hidden) { config.setHidden(hidden); } + @ReactProp(name = "translucent") + public void setTranslucent(ScreenStackHeaderConfig config, boolean translucent) { + config.setTranslucent(translucent); + } + @ReactProp(name = "backButtonInCustomView") public void setBackButtonInCustomView(ScreenStackHeaderConfig config, boolean backButtonInCustomView) { config.setBackButtonInCustomView(backButtonInCustomView); @@ -134,5 +139,4 @@ public void setDirection(ScreenStackHeaderConfig config, String direction) { // RCT_EXPORT_VIEW_PROPERTY(backTitleFontFamily, NSString) // RCT_EXPORT_VIEW_PROPERTY(backTitleFontSize, NSString) // // `hidden` is an UIView property, we need to use different name internally -// RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL) } diff --git a/native-stack/README.md b/native-stack/README.md index 3d9c11b717..7d5edb2073 100644 --- a/native-stack/README.md +++ b/native-stack/README.md @@ -101,7 +101,7 @@ Function which returns a React Element to display in the center of the header. #### `headerTranslucent` -Boolean indicating whether the navigation bar is translucent. Only supported on iOS. +Boolean indicating whether the navigation bar is translucent. #### `headerTopInsetEnabled` diff --git a/src/index.d.ts b/src/index.d.ts index ce5f43fd1a..c488b4659e 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -155,7 +155,6 @@ declare module 'react-native-screens' { */ backButtonInCustomView?: boolean; /** - * @host (iOS only) * @description When set to true, it makes native navigation bar on iOS semi transparent with blur effect. It is a common way of presenting navigation bar introduced in iOS 11. The default value is false */ translucent?: boolean; diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx index b1655e629f..862dfa5382 100644 --- a/src/native-stack/types.tsx +++ b/src/native-stack/types.tsx @@ -111,9 +111,6 @@ export type NativeStackNavigationOptions = { backButtonInCustomView?: boolean; /** * Boolean indicating whether the navigation bar is translucent. - * Only supported on iOS. - * - * @platform ios */ headerTranslucent?: boolean; /**