Skip to content

[Android] Background color disappears on screen transition #45

@r-variichuk

Description

@r-variichuk

Before submitting a new issue

  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.

Bug summary

I've started observing this issue after expo upgrade to 56, where expo-router and react-native-screens were updated as well. Maybe it's somehow related. Worked fine on 55. Android only. Reproduced on android 16, 15 (pixel, samsung)

Library version

0.7.2

Environment info

expo-env-info 2.0.14 environment info:
    System:
      OS: macOS 26.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 24.14.0 - /opt/homebrew/opt/node@24/bin/node
      npm: 11.9.0 - /opt/homebrew/opt/node@24/bin/npm
      Watchman: 2025.07.28.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/lib/ruby/gems/3.4.0/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 25.5, iOS 26.5, macOS 26.5, tvOS 26.5, visionOS 26.5, watchOS 26.5
    IDEs:
      Android Studio: 2025.3 AI-253.32098.37.2534.15336583
      Xcode: 26.5/17F42 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~56.0.8 => 56.0.8 
      expo-router: ~56.2.8 => 56.2.8 
      react: 19.2.3 => 19.2.3 
      react-dom: 19.2.3 => 19.2.3 
      react-native: 0.85.3 => 0.85.3 
      react-native-web: ~0.21.0 => 0.21.2 
    npmGlobalPackages:
      eas-cli: 20.0.0
    Expo Workflow: bare

Steps to reproduce

  1. npx create-expo-app@latest --template tabs
  2. Add EaseView with background as style or animated value in the "modal" screen
export default function ModalScreen() {
  return (
    <View style={styles.container}>
      <EaseView
        animate={{ backgroundColor: "red" }}
        transition={{ type: "timing", duration: 300 }}
        style={styles.card}
      >
        <View style={styles.child} />
      </EaseView>

      <EaseView
        transition={{ type: "timing", duration: 300 }}
        style={styles.card2}
      >
        <View style={styles.child} />
      </EaseView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    gap: 16,
  },
  card: {
    height: 100,
    width: 100,
    alignItems: "center",
    justifyContent: "center",
  },
  card2: {
    height: 100,
    width: 100,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "green",
  },
  child: {
    width: 24,
    height: 24,
    backgroundColor: "blue",
  },
});
  1. Navigate to Modal from tab One
  2. Navigate back
  3. Observe background color disapears while screen transition

Reproducible example repository

-//-

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions