Overflow not working when using animated style (mobile browser only)

[oliviercperrier]

Description

(The issue is only on mobile browser chrome/safari/firefox)

This issue is very weird but ill try to explain it:

I have a Button component thats using an animatedStyle. The button base style contains overflow:hidden and some border radius.

There is also a absolute positioned purple view inside the button so we can see when the overflow is working and when its not.

When its working properly, we can see the border radius on the Buttons, when its not, the Buttons have no border radius.

<AnimatedPressable
      style={[
        {
          overflow: "hidden",
          height: 36,
          paddingHorizontal: 20,
          backgroundColor: "red",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: 100,
        },
        animatedStyle,
      ]}
      onPressIn={() => (translateY.value = 1)}
      onPressOut={() => (translateY.value = 0)}
    >
      <View
        style={{ backgroundColor: "purple", ...StyleSheet.absoluteFillObject }}
      />
      <Text style={{ color: "white" }}>Button</Text>
    </AnimatedPressable>

When i put this Button component in a parent View that contains other components so that the height of this View is pretty large, the overflow hidden stops working/become visible for all buttons.

Here is a video:

https://github.com/user-attachments/assets/2d334970-a9ed-4fa0-a781-0cdad87bf3c7

You can see that in the first part of the video there's nothing under the buttons so the parent view is not very tall. At 6sec, im adding some Text components to make the parent View height bigger and you can see the buttons overflow are not hidden anymore (we see the purple box overflowing the Button container).

When i remove the animatedStyle from the Button component. Everything is working fine.

Steps to reproduce

1. Clone the repo
2. npm install
3. Open the app on a mobile browser
4. Uncomment the Texts component in app.tsx -> index.tsx

Snack or a link to a repository

https://github.com/oliviercperrier/repro-reanimated-overflow

Reanimated version

3.10.1

React Native version

0.74.5

Platforms

Web

JavaScript runtime

None

Workflow

React Native

Architecture

None

Build type

None

Device

Real device

Device model

Iphone 15

Acknowledgements

Yes

[MatiPl01]

Hey @oliviercperrier!

I would able to reproduce the issue that you described but I can see it is not related to react-native-reanimated. When you remove the animated style and use transform with translateY or translateX inside the non-animated component style, you will see the same problem.

It is pretty interesting why it stops working after adding translation.

It you want to easily fix that, you can add/move the border radius prop from the Pressable to its child component.

[oliviercperrier]

Hey @oliviercperrier!

I would able to reproduce the issue that you described but I can see it is not related to react-native-reanimated. When you remove the animated style and use transform with translateY or translateX inside the non-animated component style, you will see the same problem.

It is pretty interesting why it stops working after adding translation.

It you want to easily fix that, you can add/move the border radius prop from the Pressable to its child component.

Thanks @MatiPl01. Thats what i did in the meantime. Ill be interested to know what the root cause if you find something.

[dentemm]

Initial comment was wrong

It is a React Native issue, the Animated API from RN behaves exactly the same in combination with overflow: hidden.