[Stack] weird styling propagated between view

[freeboub]

Description

It will be hard for me to provide a clear description... In our production app we see some random component border radius applied on unexpected components. I was able to find a reproduction case here is the description of the sample provided (I tried to simplify as much as possible).

1/ Root component:
A ScreenStack with 1 and 2 components alternatively (Parent and Child Component)
Important, all screens in the stack are refreshed when onWillAppear OR onDisappear are called

2/ Parent Component at the bottom of the stack:

• 1 Pressable => trigger display of ChildView
• 1 View

3/ Child Component

• An array of Views
• A View with partial radius: borderBottomEndRadius for exemple
• The screen autoclose to make testing faster

Additionnal informations:

• reproduced only on ios with new arch
• Possible linked to react native but I have never found a way to reproduce it without react-native-screens
• I did a lot of test in order to simplify the code, I put some comment in code about ways "hide" the issue.
• I took a lot of time to find a sample reproduction sample because I am afraid that this issue can cause other side effects (we still see other side effects of new arch, I hope this can be linked)

Steps to reproduce

see description. Here is a video

weird.mp4

Snack or a link to a repository

https://github.com/freeboub/bug-weirdest-mixed-styles

Screens version

4.3.0

React Native version

0.76.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

debug & release

Device

simulator & real devices

Acknowledgements

Yes

[kkafar]

Hey! This indeed looks strange. We do not interfere with content styling in any way in this lib, so I'm surprised that this happens only with the lib. I'll need to remade the repro as I would not want to have Expo router involved before I start debugging.

[freeboub]

@kkafar let me know if I can help more. It was really painful to identify :/ should I move the sample to a bare react native project ?

[kkafar]

@freeboub If you only have capacity to create a reproducer without expo - that would be of really great help.

[freeboub]

I was able to update the sample app without expo.
1/ Good news, I am still able to reproduced to issue without expo. I just updated origin repo here: https://github.com/freeboub/bug-weirdest-mixed-styles
I have created a new bare project from scratch and copy past the 3 files: App.tsx, ChildScreen.tsx and ParentScreen.tsx
2/ A bad news, the issue has changed, please see attached video, the "corrupted view" now jump between first and last position...
It is very very weird ...

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-18.at.22.29.53.mp4

Good luck to find the root cause :)

[freeboub]

Update:
I was able to simplify more the sample without expo.
Original sample was on this commit: a397346c79f402c8c95cf9a35563fe7504bc77e6

I have now pushed another commit: 0b7494ade6af232a9ac053cf3a0621f3158299c4. It move every code in 1 file and remove unneeded views. now code looks like this:

const App = () => {
  const [childDisplayed, setChildDisplayed] = useState(false);

  useEffect(() => {
    if (childDisplayed) {
      setTimeout(() => {
        setChildDisplayed(false);
      }, 500);
    }
  }, [childDisplayed]);

  return (
    <ScreenStack style={StyleSheet.absoluteFill}>
      <Screen
        key="parent"
        activityState={2}
        style={StyleSheet.absoluteFill} >
        <Pressable
            style={styles.pressable}
            onPress={() => {
              console.log('onPress');
              setChildDisplayed(true);
            }}  />
      </Screen>
      {childDisplayed ? (
        <Screen
          key="child"
          activityState={2}
          style={StyleSheet.absoluteFill}>
            <View style={styles.square}/>
            <View style={styles.rounded}/>
        </Screen>) :
        <></> }
    </ScreenStack>
  );
};

const styles = StyleSheet.create({
  pressable: { width: 100, height: 100, backgroundColor: 'red' },
  square: {
    height: 40,
    overflow: 'hidden', // removing hidden fix the issue
    backgroundColor: 'green',
  },
  rounded: {
    height: 40,
    width: 60,
    backgroundColor: 'yellow',
    overflow: 'hidden', // removing hidden fix the issue
    borderTopRightRadius: 100,
    borderTopLeftRadius: 100,
    borderBottomEndRadius: 100,
    // borderBottomStartRadius: 100, // If we put the 4 radius, the issue is not reproduced
  },
});

And here is the video on this version:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-18.at.23.12.28.mp4

[freeboub]

And another interesting finding, it sometimes act on the warning indicator at the bottom of the screen