Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix
Pressable
not inferring dimensions from it's children (#3020)
## Description When `Pressable` does not have it's dimensions robustly set, it should infer them from it's children, to `fit-content`. Unfortunately that's not what happens. This PR fixes this issue. ## Test plan - run the provided code in place of the `EmptyExample` - see how prior to this fix, the text is either not displayed or it's squished to a single letter per line, and after it, both `Pressables` are identical ## Results before | after --- | --- <img width="361" alt="Screenshot 2024-07-31 at 15 12 34" src="https://github.com/user-attachments/assets/561ce302-4f99-4930-9b2b-a8e6fd97e8ed"> | <img width="367" alt="Screenshot 2024-07-31 at 15 10 44" src="https://github.com/user-attachments/assets/292d0d06-0102-4ddc-b12d-b7bbe2fef7c5"> ## Code ```js import React from 'react'; import { StyleSheet, Text, View, Pressable as RNPressable } from 'react-native'; import { Pressable as GHPressable, PressableProps, } from 'react-native-gesture-handler'; function Pressables(props: PressableProps) { const onPressInGH = () => console.log('GH press'); const onPressInRN = () => console.log('RN press'); return ( <View style={styles.container}> <GHPressable {...(props as any)} onPressIn={onPressInGH} style={[styles.pressable, props.style]}> {props.children ?? <Text>Gesture Handler!</Text>} </GHPressable> <RNPressable {...(props as any)} onPressIn={onPressInRN} style={[styles.pressable, props.style]}> {props.children ?? <Text>React Native!</Text>} </RNPressable> </View> ); } export default function EmptyExample() { return ( <View style={styles.multirow}> <Text style={styles.header}>Padding</Text> <Pressables style={{ padding: 16 }} /> <Text style={styles.header}>GH nested pressable</Text> <Pressables style={{ flex: 1, backgroundColor: 'plum' }}> <GHPressable style={{ backgroundColor: 'orange', }}> <Text>Gesture Handler</Text> </GHPressable> </Pressables> <Text style={styles.header}>RN nested pressable</Text> <Pressables style={{ flex: 1, backgroundColor: 'plum' }}> <RNPressable style={{ backgroundColor: 'orange', }}> <Text>React Native</Text> </RNPressable> </Pressables> <Text style={styles.header}>2 nested pressables</Text> <Pressables style={{ flex: 1, backgroundColor: 'plum', flexDirection: 'row' }}> <GHPressable style={{ backgroundColor: 'pink', }}> <Text style={{ padding: 8 }}>GH</Text> </GHPressable> <RNPressable style={{ backgroundColor: 'orange', }}> <Text style={{ padding: 8 }}>RN</Text> </RNPressable> </Pressables> <Text style={styles.header}>Nested box model styling</Text> <Pressables> <View style={{ backgroundColor: 'orange', padding: 8, margin: 8 }}> <View style={{ backgroundColor: 'plum', margin: 8 }}> <Text>Hello World!</Text> </View> </View> </Pressables> <Text style={styles.header}>Flex view in a fixed size Pressable</Text> <Pressables style={{ width: 100, height: 100 }}> <View style={styles.textWrapper}> <Text>Pressable!</Text> </View> </Pressables> <Text style={styles.header}>Flex view in a formless size Pressable</Text> <Pressables> <View style={styles.textWrapper}> <Text>Pressable!</Text> </View> </Pressables> </View> ); } const styles = StyleSheet.create({ header: { fontSize: 16, fontWeight: 'bold', textAlign: 'center', }, multirow: { flex: 1, flexDirection: 'column', overflow: 'scroll', }, container: { flexDirection: 'row', justifyContent: 'space-around', gap: 30, margin: 30, marginTop: 5, }, pressable: { backgroundColor: 'tomato', borderWidth: 1, maxWidth: '30%', }, textWrapper: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); ```
- Loading branch information