AnimatedPressable dynamic style prop breaking styling

[peterjskaltsis]

Hey just wondering if I'm doing something wrong or if this is a bug?

If I try making an AnimatedPressable's style prop dynamic (to get pressed/hovered states), it breaks styling?

See below for a simple reproduction.

Setup (create-expo-app template tabs):

• New Architecture Enabled
• Expo SDK 54
• React Native 0.81.4
• Reanimated v4

import { Pressable, Text } from "react-native";
import Animated from "react-native-reanimated";

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

const Demo = () => 
    <Animated.View style={{ backgroundColor: "blue", padding: 24 }}>
      <AnimatedPressable
        style={{
          backgroundColor: "red",
          padding: 12,
          borderWidth: 1,
          borderColor: "white",
        }}
      >
        <Text>Styles</Text>
      </AnimatedPressable>

      <AnimatedPressable
        style={({ pressed }) => ({
          backgroundColor: pressed ? "green" : "red",
          padding: 12,
          borderWidth: 1,
          borderColor: "white",
        })}
      >
        <Text>No styles?</Text>
      </AnimatedPressable>
    </Animated.View>

Any help would be much appreciated.

[MatiPl01]

Hey @peterjskaltsis!

It seems that we currently don't support dynamic styles on animated components. What can you do instead is passing the function as a child property, leaving the pressable component unstyled and styling the child Animated.View like I did here:

<Pressable>
  {({ pressed }) => (
    <Animated.View
      style={{
        backgroundColor: pressed ? 'green' : 'red',
        transitionDuration: '200ms', // add this if you want a CSS transition
        padding: 12,
        borderWidth: 1,
        borderColor: 'white',
      }}>
      <Text>No styles?</Text>
    </Animated.View>
  )}
</Pressable>

And thank you for asking about that. It seems that we should implement the dedicated Animated.Pressable component on our side that supports the dynamic style prop as well.