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.13k stars 982 forks source link

Add `Text` component #3202

Open m-bert opened 2 weeks ago

m-bert commented 2 weeks ago

Description

This PR adds Text component to Gesture Handler.

Upon investigating #3159 we decided that it will be better to add our own Text component, instead of forcing users to create their own version of Text with NativeViewGestureHandler.

Test plan

New example: ```jsx import { useState } from 'react'; import { StyleSheet } from 'react-native'; import { Text, GestureHandlerRootView, TouchableOpacity, } from 'react-native-gesture-handler'; export default function NestedText() { const [counter, setCounter] = useState(0); return ( {`Counter: ${counter}`} { console.log('Touchable'); setCounter((prev) => prev + 1); }}> { console.log('Outer text'); setCounter((prev) => prev + 1); }}> {'Outer Text '} { console.log('Nested text'); setCounter((prev) => prev + 1); }}> {'Nested Text'} ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20, }, textCommon: { padding: 10, color: 'white', }, outerText: { fontSize: 30, borderWidth: 2, backgroundColor: '#131313', }, innerText: { fontSize: 25, backgroundColor: '#F06312', }, }); ```