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.

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

fix(Android): header shadow not hidden on go back #2216

Merged
merged 3 commits into from
Jun 27, 2024

Conversation

alduzy
Copy link
Member

@alduzy alduzy commented Jun 27, 2024

Description

This PR intents to fix header shadow not being hidden after navigating back to a screen. The bug was visible when using headerTransparent: true option.

The origin of this bug is This PR fixing build depracations. Setting the elevation on appBarLayout requires resetting the stateListAnimator to work properly, as opossed to deprecated targetElevation used before.

For more info visit: https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout#setTargetElevation(float)

Fixes #2212 .

Changes

  • added missing appBarLayout?.stateListAnimator reset.

Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

Before

Screenshot 2024-06-27 at 11 39 50

After

Screenshot 2024-06-27 at 11 39 29

Test code and steps to reproduce

  1. use Test1097.tsx repro
  2. navigate into second or third screen
  3. go back to the first screen

Checklist

  • Included code example that can be used to test this change
  • Ensured that CI passes

Copy link
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

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

I think this change is ok, because it improves the situation.

However:

Important

We should research whether setting stateListAnimator to null here and in the other setters do not remove some system/material defined appbar animations. Let's put a task on our board for that.

@alduzy alduzy merged commit 9bda252 into main Jun 27, 2024
4 checks passed
@alduzy alduzy deleted the @alduzy/fix-header-shadow-on-go-back branch June 27, 2024 10:20
alduzy added a commit that referenced this pull request Jun 28, 2024
## Description

This PR intents to fix header shadow not being hidden after navigating
back to a screen. The bug was visible when using `headerTransparent:
true` option.

The origin of this bug is [This
PR](#2116)
fixing build depracations. Setting the `elevation` on appBarLayout
requires resetting the `stateListAnimator` to work properly, as opossed
to deprecated `targetElevation` used before.

For more info visit:
https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout#setTargetElevation(float)

Fixes #2212 .


## Changes

- added missing `appBarLayout?.stateListAnimator` reset.

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before
![Screenshot 2024-06-27 at 11 39
50](https://github.com/software-mansion/react-native-screens/assets/91994767/78c42cd3-4523-46f2-93ea-2aa4a6f4da4f)

### After
![Screenshot 2024-06-27 at 11 39
29](https://github.com/software-mansion/react-native-screens/assets/91994767/b0d32daa-ee98-438e-90cb-621bb6b13ad0)



## Test code and steps to reproduce

1. use `Test1097.tsx` repro
2. navigate into second or third screen
3. go back to the first screen

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
@tboba
Copy link
Member

tboba commented Jul 8, 2024

Just a small comment from me, that's a great change! Good catch, Alex 💪 I was wondering why header has such an ugly shadow after setting its style to transparent.

High5Apps added a commit to High5Apps/organize-rn that referenced this pull request Aug 6, 2024
- Repro on Android only by navigating to the Discuss tab, tapping a post or new discussion button, then navigating back to the Discuss tab and seeing that the top tabs shadow is no longer hidden, despite still having `headerShadowVisible: false`
- Fix by updating react-native-screens from 3.32.0 to 3.34.0
  - `npm update react-native-screens`
- react-navigation/react-navigation#12063
software-mansion/react-native-screens#2216
ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this pull request Oct 9, 2024
)

## Description

This PR intents to fix header shadow not being hidden after navigating
back to a screen. The bug was visible when using `headerTransparent:
true` option.

The origin of this bug is [This
PR](software-mansion#2116)
fixing build depracations. Setting the `elevation` on appBarLayout
requires resetting the `stateListAnimator` to work properly, as opossed
to deprecated `targetElevation` used before.

For more info visit:
https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout#setTargetElevation(float)

Fixes software-mansion#2212 .


## Changes

- added missing `appBarLayout?.stateListAnimator` reset.

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before
![Screenshot 2024-06-27 at 11 39
50](https://github.com/software-mansion/react-native-screens/assets/91994767/78c42cd3-4523-46f2-93ea-2aa4a6f4da4f)

### After
![Screenshot 2024-06-27 at 11 39
29](https://github.com/software-mansion/react-native-screens/assets/91994767/b0d32daa-ee98-438e-90cb-621bb6b13ad0)



## Test code and steps to reproduce

1. use `Test1097.tsx` repro
2. navigate into second or third screen
3. go back to the first screen

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Android] headers show strange artifacts after unfocus -> focus since v3.32
3 participants