[Android] Add support for translucent header (#575)

Currently, the headerTranslucent = true is only supported on iOS. With this PR the setting will also work on Android.

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`.
 
 ### `<ScreenStackHeaderConfig>`
 
@@ -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)
 

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) {
@@ -100,6 +101,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) {
@@ -158,7 +167,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));
 

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) {

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)
 }

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`
 

src/index.d.ts

@@ -164,7 +164,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;

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;
   /**