[Android] Add support for translucent header #575

andreibarabas · 2020-07-23T19:58:03Z

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

kyle-ssg · 2020-07-24T18:26:09Z

Ah awesome! I Guess that would resolve #573. Just going to try this out.

kyle-ssg · 2020-07-24T18:46:33Z

@andreibarabas This works exactly as I'd expect except when popping, it seems to force everything to render after the navbar.

andreibarabas · 2020-07-27T06:49:41Z

Hey @kyle-ssg - i'll take a look

WoLewicki · 2020-07-30T13:50:58Z

I would love to merge it! Please inform me when it is ready for review. It should also close #405.

andreibarabas · 2020-07-31T19:07:02Z

Hey @WoLewicki , I need a couple more days to get to this. I'm currently caught up in a release, and once that is done can look more into this.

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java

WoLewicki · 2020-08-01T10:35:55Z

@andreibarabas it is not a problem 🙂

WoLewicki · 2020-08-26T14:52:52Z

How are things going on this PR @andreibarabas? Do you need any help or you just didn't have time to finish it?

andreibarabas · 2020-08-26T14:56:04Z

Haven't yet had the time to dive deep into it, but will give it another shoot hopefully tomorrow / the day after that.

I also need this fixed for our production build, so top priority ;)

andreibarabas · 2020-08-28T11:52:53Z

@WoLewicki - done ;) it works now, tested it with pop also.

WoLewicki · 2020-08-31T15:12:44Z

Looks good! There are some other places where the information about the platform availability should be changed: https://github.com/software-mansion/react-native-screens/blob/master/README.md#L194, https://github.com/software-mansion/react-native-screens/blob/master/src/index.d.ts#L158, https://github.com/software-mansion/react-native-screens/blob/master/src/native-stack/types.tsx#L116. If you could change this, I would be grateful. Also, do you know of any options to have something like contentInsetAdjustmentBehavior for Android? Would be good to have consistent behavior for ScrollViews on both platforms.

kyle-ssg · 2020-08-31T17:01:07Z

Hey @andreibarabas, from some brief testing I've noticed the title isn't rendering at least for me, the left is iOS.

andreibarabas · 2020-08-31T17:03:03Z

Hey @kyle-ssg . Title i have't checked. Our design system doesn't use them.

Let me check that and get back.

Any other issues?

kyle-ssg · 2020-08-31T17:04:38Z

Hey @kyle-ssg . Title i have't checked. Our design system doesn't use them.

Let me check that and get back.

Any other issues?

Other than that it looks awesome @andreibarabas!

andreibarabas · 2020-09-15T06:57:37Z

@kyle-ssg - can you provide a snack maybe? I checked on our app and put a dummy title and it showed up. Here it is

@WoLewicki - updated the doc as per your suggestion.

As for contentInsetAdjustmentBehavior, I'm not really an android developer, so would have to deeply research it. maybe in a different PR? Do you see that as blocking for this one?

WoLewicki · 2020-09-15T08:31:15Z

@andreibarabas I don't think it is blocking since this transparent header is an optional thing anyway.

kyle-ssg · 2020-09-15T08:34:40Z

Yeah, happy with that. I'll raise separately with repro

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java

README.md

andreibarabas · 2020-09-18T12:31:17Z

hey @WoLewicki - anything else you guys need to have this merged?

WoLewicki · 2020-09-18T12:35:34Z

Didn't @kyle-ssg have problems with the title that needed to be resolved? Or are they gone?

andreibarabas · 2020-09-18T15:46:36Z

I can't repro them. All screenshots I sent above include the title

brunocrpontes · 2020-09-21T17:52:27Z

I tested this branch in a personal app and headers title just go away when use an headerLeft component in bar.
Maybe it can be the same case of @kyle-ssg.

WoLewicki · 2020-09-22T09:42:46Z

@brunocrpontes is it specific to translucent header? I think you are talking about this behavior: https://github.com/software-mansion/react-native-screens/tree/master/native-stack#headerleft and the same happens with normal header. Am I right?

brunocrpontes · 2020-09-22T11:45:43Z

@brunocrpontes is it specific to translucent header? I think you are talking about this behavior: https://github.com/software-mansion/react-native-screens/tree/master/native-stack#headerleft and the same happens with normal header. Am I right?

Yes, you're right.

WoLewicki · 2020-09-22T11:58:00Z

@kyle-ssg so can you provide a repro showing the lack of title? I would like to test it and merge it if all is ok.

kyle-ssg · 2020-09-22T14:04:13Z

Hey @WoLewicki sorry today I can't really busy release, it would make sense if it's the custom header left that's doing it though. I bet that is the usecase!

Edit: I can confirm this does not happen when there is no headerLeft custom component. So replication is simply have a screen where theres a custom header left and a title with transparent nav.

kmagiera

This looks good overal, I only have one question I left inline regarding one change. I'd like to get that one item clarified, and this is good to merge otherwise

kmagiera · 2020-09-25T10:07:27Z

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java

@@ -238,7 +242,7 @@ public void onUpdate() {
    }

    // background
-    if (mBackgroundColor != 0) {
+    if (mBackgroundColor != -1) {


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)

??

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

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

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

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.

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

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.

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".

WoLewicki · 2020-09-29T14:16:11Z

Thanks for your contribution! The only problem I can spot is that passing a wrong color name is resolved to 0 so the header becomes transparent, but I think we can classify it as a problem of the programmer passing wrong options. I am merging it then!

andrewbeckman · 2020-10-04T19:13:20Z

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.java

-  @ReactProp(name = "backgroundColor", customType = "Color")
-  public void setBackgroundColor(ScreenStackHeaderConfig config, int titleColor) {
-    config.setBackgroundColor(titleColor);
+  @ReactProp(name = "backgroundColor", customType = "Color", defaultInt = -1)


@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?

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

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

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?

@WoLewicki that fixed the issue! Thanks

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

WoLewicki mentioned this pull request Jul 30, 2020

[native-stack] Custom image background on the whole screen #405

Closed

WoLewicki linked an issue Jul 30, 2020 that may be closed by this pull request

[native-stack] Custom image background on the whole screen #405

Closed

janicduplessis reviewed Aug 1, 2020

View reviewed changes

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java Outdated Show resolved Hide resolved

andreibarabas and others added 5 commits August 28, 2020 14:41

Update ScreenStackFragment.java

2d5db43

Update ScreenStackHeaderConfig.java

6c14f63

Update ScreenStackHeaderConfigViewManager.java

d281ae8

Update README.md

956bb9f

fix pop transparency

274081c

andreibarabas force-pushed the master branch from 8e04073 to 274081c Compare August 28, 2020 11:49

andreibarabas requested a review from WoLewicki August 28, 2020 11:53

WoLewicki linked an issue Aug 31, 2020 that may be closed by this pull request

[Android] Render content behind transparent navigation bar #573

Closed

update doc

820dc50

WoLewicki reviewed Sep 15, 2020

View reviewed changes

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java Outdated Show resolved Hide resolved

revert Integer to int

7a245e2

WoLewicki reviewed Sep 15, 2020

View reviewed changes

README.md Outdated Show resolved Hide resolved

Update README.md

3f1af57

kmagiera reviewed Sep 25, 2020

View reviewed changes

Update ScreenStackHeaderConfigViewManager.java

a54b5a7

WoLewicki merged commit 413469c into software-mansion:master Sep 29, 2020

andrewbeckman reviewed Oct 4, 2020

View reviewed changes

[Android] Add support for translucent header #575

[Android] Add support for translucent header #575

Conversation

andreibarabas commented Jul 23, 2020

kyle-ssg commented Jul 24, 2020 • edited Loading

kyle-ssg commented Jul 24, 2020 • edited Loading

andreibarabas commented Jul 27, 2020

WoLewicki commented Jul 30, 2020

andreibarabas commented Jul 31, 2020

WoLewicki commented Aug 1, 2020

WoLewicki commented Aug 26, 2020

andreibarabas commented Aug 26, 2020

andreibarabas commented Aug 28, 2020

WoLewicki commented Aug 31, 2020

kyle-ssg commented Aug 31, 2020 • edited Loading

andreibarabas commented Aug 31, 2020

kyle-ssg commented Aug 31, 2020

andreibarabas commented Sep 15, 2020

WoLewicki commented Sep 15, 2020

kyle-ssg commented Sep 15, 2020

andreibarabas commented Sep 18, 2020

WoLewicki commented Sep 18, 2020

andreibarabas commented Sep 18, 2020

brunocrpontes commented Sep 21, 2020 • edited Loading

WoLewicki commented Sep 22, 2020

brunocrpontes commented Sep 22, 2020

WoLewicki commented Sep 22, 2020

kyle-ssg commented Sep 22, 2020 • edited Loading

kmagiera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kyle-ssg Sep 29, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

WoLewicki commented Sep 29, 2020

andrewbeckman Oct 4, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kyle-ssg commented Jul 24, 2020 •

edited

Loading

kyle-ssg commented Jul 24, 2020 •

edited

Loading

kyle-ssg commented Aug 31, 2020 •

edited

Loading

brunocrpontes commented Sep 21, 2020 •

edited

Loading

kyle-ssg commented Sep 22, 2020 •

edited

Loading

kyle-ssg Sep 29, 2020 •

edited

Loading

andrewbeckman Oct 4, 2020 •

edited

Loading