Hover style is not applied correctly to Pressable components

[okwasniewski]

Description

Hover style is not applied correctly to Pressable components. For some reason, Pressable components are not passing borderRadius to the native side correctly.

[Aakashdeep-Srivastava]

let's do this.... Assign me

[Marcoo09]

Hi @okwasniewski, I was not able to reproduce it. It was solved?

[okwasniewski]

Hey @Marcoo09,

No it wasn't fixed. If you go to Components > Pressable and modify ContentPress function like so:

function ContentPress() {
  const [timesPressed, setTimesPressed] = useState(0);

  let textLog = '';
  if (timesPressed > 1) {
    textLog = timesPressed + 'x onPress';
  } else if (timesPressed > 0) {
    textLog = 'onPress';
  }

  return (
    <>
      <View style={styles.row}>
        <Pressable
+          style={{padding: 10, borderRadius: 20, backgroundColor: 'red'}}
          onPress={() => {
            setTimesPressed(current => current + 1);
          }}>
          {({pressed}) => (
            <Text testID="one_press_me_button" style={styles.text}>
              {pressed ? 'Pressed!' : 'Press Me'}
            </Text>
          )}
        </Pressable>
      </View>
      <View style={styles.logBox}>
        <Text testID="pressable_press_console">{textLog}</Text>
      </View>
    </>
  );
}

You will see that borderRadius is not correctly applied for hoverStyle

[gokul1099]

I gone through this issue, In RCTViewComponentView.cpp, self.layers.cornerRadius becomes 0.0. because of that *shape is created with 0 borderRadius.

If we pass any custom value like
UIShape *shape = [UIShape rectShapeWithCornerRadius: CGFloat(20)]; it is working fine
@okwasniewski Do you have any idea on this ?

[okwasniewski]

@gokul1099 Maybe we need to use RCTCornerRadiiFromBorderRadii / track where layer.cornerRadius is set back to 0. I think this is a bug somewhere deep in RN

[gokul1099]

I gone through this issue, In RCTViewComponentView.cpp, self.layers.cornerRadius becomes 0.0. because of that *shape is created with 0 borderRadius.

If we pass any custom value like ` UIShape *shape = [UIShape rectShapeWithCornerRadius: CGFloat(20)];` it is working fine @okwasniewski Do you have any idea on this ?

I have found something. whenever we update the borderRadius the updateHoverEffect is not getting triggered. So I made some changes like below so it will get triggered everytime props changes. After this change the borderRadius working fine.
(only if we change the props borderRadius value)

screenshot after above changes ->

But in the initial render the self.layers.cornerRadius in updateHoverEffect is 0.0. So the borderRadius is not getting applied.
@okwasniewski Can we send the borderRadius as parameter from newViewProps to updateHoverEffect like the hoverEffect string we are passing updateHoverEffect:[NSString stringWithUTF8String:newViewProps.visionos_hoverEffect.c_str()] ??