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

Unexpected layout size when screen is out of focus #11951

Open
2 of 6 tasks
oliviercperrier opened this issue Apr 20, 2024 · 2 comments
Open
2 of 6 tasks

Unexpected layout size when screen is out of focus #11951

oliviercperrier opened this issue Apr 20, 2024 · 2 comments

Comments

@oliviercperrier
Copy link

oliviercperrier commented Apr 20, 2024

Current behavior

Im using a expo-linear-gradient lib and i noticed that when i change screen, the linearGradient is changing orientation. So when i come back the screen with the linearGradient, i see a quick flicker during the time the linearGradient is coming back to normal.

When i load the screen, i get this:

Screenshot 2024-04-19 at 10 13 11 AM

When i change screen:

Screenshot 2024-04-19 at 10 13 44 AM

Issue suspected to come from somewhere here:

const focused = navigationState.index === index;
return (
<View
accessibilityElementsHidden={!focused}
importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
style={[
styles.route,
// If we don't have the layout yet, make the focused screen fill the container
// This avoids delay before we are able to render pages side by side
layout.width
? { width: layout.width }
: focused
? StyleSheet.absoluteFill
: null,
style,
]}
>

Expected behavior

Screen layout width and height should stay the same when out of focus to avoid causing weird flicker on resizing when getting back the focus.

Here is an exemple with the linear gradient: https://github.com/expo/expo/assets/28421005/707dc5ea-715c-4a40-a091-0e058f9936b0

Reproduction

https://github.com/oliviercperrier/repro-Expo-linear-gradient-issue

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Environment

  • I've removed the packages that I don't use
package version
expo ^50.0.14
react-native ^0.73.6
@react-navigation/native ~6.1.6
node v18.19.0
npm 10.2.3

related: expo/expo#28298

Copy link

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

  • @react-navigation/native

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

Copy link

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

  • @react-navigation/native (found: 6.1.6, latest: 6.1.17)

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant