Linear Gradient Changing orientation to 90deg when changing screen

[oliviercperrier]

Minimal reproducible example

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

What platform(s) does this occur on?

Web

Did you reproduce this issue in a development build?

No (web-only issue)

Summary

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.

Screen.Recording.2024-04-18.at.3.53.36.PM.mov

Environment

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.0
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9014738
Xcode: 15.3/15E204a - /usr/bin/xcodebuild
npmPackages:
expo: ~50.0.14 => 50.0.17
expo-router: ~3.4.8 => 3.4.8
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.73.6 => 0.73.6
react-native-web: ~0.19.6 => 0.19.10
npmGlobalPackages:
eas-cli: 3.16.0
expo-cli: 6.3.10
Expo Workflow: managed

Expo Doctor Diagnostics

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check native tooling versions
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check for issues with metro config
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

[brentvatne]

i suspect this is due to how react-navigation is managing the underlying screens when they are hidden.

https://github.com/react-navigation/react-navigation/blob/d0abdee67f5db8cf39112af535846ffededfb21d/packages/react-native-tab-view/src/SceneView.tsx#L74-L91

try adding onLayout to your LinearGradient and logging the layout information, i bet you're getting an unexpected width value

[oliviercperrier]

@brentvatne You're right. When i load the screen, i get this:

When i change screen: