Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Android] Add support for translucent header #575

Merged
merged 9 commits into from
Sep 29, 2020
Merged

[Android] Add support for translucent header #575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2d5db43
Update ScreenStackFragment.java
andreibarabas Jul 23, 2020
6c14f63
Update ScreenStackHeaderConfig.java
andreibarabas Jul 23, 2020
d281ae8
Update ScreenStackHeaderConfigViewManager.java
andreibarabas Jul 23, 2020
956bb9f
Update README.md
andreibarabas Jul 23, 2020
274081c
fix pop transparency
andreibarabas Aug 28, 2020
820dc50
update doc
andreibarabas Sep 15, 2020
7a245e2
revert Integer to int
andreibarabas Sep 15, 2020
3f1af57
Update README.md
andreibarabas Sep 16, 2020
a54b5a7
Update ScreenStackHeaderConfigViewManager.java
andreibarabas Sep 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>`

Expand Down Expand Up @@ -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)

Expand Down
11 changes: 10 additions & 1 deletion android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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));

Expand Down
10 changes: 9 additions & 1 deletion android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -215,6 +216,9 @@ public void onUpdate() {
// shadow
getScreenFragment().setToolbarShadowHidden(mIsShadowHidden);

// translucent
getScreenFragment().setToolbarTranslucent(mIsTranslucent);

// title
actionBar.setTitle(mTitle);
if (TextUtils.isEmpty(mTitle)) {
Expand All @@ -238,7 +242,7 @@ public void onUpdate() {
}

// background
if (mBackgroundColor != 0) {
if (mBackgroundColor != -1) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why this change is made here? If we expect "default" to be -1 maybe we should also set the default in @ReactProp while defining bgColor:

@ReactProp(name = "backgroundColor", customType = "Color", defaultInt = -1)

??

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is a good idea to add that for extra safety.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. will take care of it as soon as possible.

There is still an open issue from @kyle-ssg which reproduces only if there is a custom left component. I won't have time earlier than next week to investigate

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I think this is not an issue since it is the expected behavior for the title to disappear when there is headerLeft component.

Copy link
Contributor

@kyle-ssg kyle-ssg Sep 29, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regardless of if the headerLeft occurred before / after this work I think this is good to merge, I'll look into this separately and raise something if I think there's an issue, it does seem a bit weird to me (mainly because im majority iOS) though it's definitely not a blocker. @WoLewicki @andreibarabas.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On iOS, the situation is kind of similar but for headerCenter, where using it makes the title disappear.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure. it's fine with me. I added @kmagiera suggestion, so let me know if you need anything else from my side to get this merged.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am testing these changes out and this line seems to have introduced a bug where I can't set the header background color to "#fff" or "#ffffff".

mToolbar.setBackgroundColor(mBackgroundColor);
}

Expand Down Expand Up @@ -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) {
Expand Down
12 changes: 8 additions & 4 deletions android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link

@andrewbeckman andrewbeckman Oct 4, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andreibarabas I am noticing that when I try to set my header background color to "#fff" or "#ffffff" (i.e. white), I end up with a non-white header. If you take a look at the attached photo, you can see the header appears to be gray.

Any chance this bug came in with the changes to this file?

Screen Shot 2020-10-04 at 12 12 00 PM

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To clarify, this is when headerTranslucent is set to false.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After some further testing, @andreibarabas it looks like it was the change in ScreenStackHeaderConfig.java

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the "#fff", "#ffffff" and white colors all have value of "-1" on the native side, so the newly added if makes it impossible to use these values. Can you check if #656 fixes the issue?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WoLewicki that fixed the issue! Thanks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Guys, glad you solved it. Thanks! Just now had the time to groom the notifications.

public void setBackgroundColor(ScreenStackHeaderConfig config, int backgroundColor) {
config.setBackgroundColor(backgroundColor);
}

@ReactProp(name = "hideShadow")
Expand Down Expand Up @@ -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);
Expand All @@ -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)
}
2 changes: 1 addition & 1 deletion native-stack/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
1 change: 0 additions & 1 deletion src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 0 additions & 3 deletions src/native-stack/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down