[Pressable] Styles are not applied

[m-bert]

Description

Some of CSS styles do not work with Pressables. It happens because style property is applied to outer View and not the button itself

Steps to reproduce

Test on the following code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Pressable } from 'react-native-gesture-handler';

const onPressCallback = (type: string) =>
  console.log(`${type} pressable onPress`);

const onPressInCallback = (type: string) =>
  console.log(`${type} pressable onPressIn`);

const onPressOutCallback = (type: string) =>
  console.log(`${type} pressable onPressOut`);

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => onPressCallback('outer')}
        onPressIn={() => onPressInCallback('outer')}
        onPressOut={() => onPressOutCallback('outer')}
        style={styles.outerPressable}>
        <View style={styles.box} />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  outerPressable: {
    width: 150,
    height: 150,
    backgroundColor: 'lightpink',

    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },

  box: {
    width: 100,
    height: 100,
    backgroundColor: 'plum',
  },
});

Snack or a link to a repository

Irrelevant

Gesture Handler version

2.17.1

React Native version

0.74.1

Platforms

Android, iOS, Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes