software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.14k stars 982 forks source link

[Pressable] Styles are not applied #2979

Closed m-bert closed 4 months ago

m-bert commented 4 months ago

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

image

Steps to reproduce

Test on the following code ```tsx 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 ( onPressCallback('outer')} onPressIn={() => onPressInCallback('outer')} onPressOut={() => onPressOutCallback('outer')} style={styles.outerPressable}> ); } 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