Snackbar shadow breaks during BottomNavigation transition on Android

[jwueller]

Current behaviour

When switching between <BottomNavigation/> with scene animation enabled, the <Searchbar/> shadow doesn't fade with the component, but instantly appears and disappears at full opacity. This is visually pretty jarring.

Expected behaviour

The <Searchbar/> shadow should fade together with all the other components.

Code sample

https://snack.expo.dev/@jwueller/bottomnavigation-snackbar-shadow-bug

Screenshots (if applicable)

Screenshot of the <Searchbar/> almost fully faded out while the shadow underneath persists:

What have you tried

• Web: works
• iOS: seems to work according to Appetize.io (I don't have a physical device on hand)
• Android: broken as described, but I'm not sure if other types of animations using opacity might also be

Your Environment

software	version
android	12
react-native	0.68.2
react-native-paper	5.0.0-rc.3
node	14.19.3
yarn	1.22.19
expo sdk	45.0.0

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.68.2, latest: 0.69.1)
• react-native-paper (found: 5.0.0-rc.3, latest: 4.12.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[jwueller]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo

There is no explicit dependency on either of these in the snack, so I assume it would be whatever the default is.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.68.2, latest: 0.69.1)
• react-native-paper (found: 5.0.0-rc.3, latest: 4.12.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

The snack provides react-native, so I can't update that. "Upgrading" react-native-paper to an older version is obviously bogus.

[lukewalczak]

After the early investigation, I think the issue is related to the Surface shadow and BottomNavigation shifting animation on both theme versions MD2 and MD3.