Skip to content

Commit

Permalink
Fix Pressable not inferring dimensions from it's children (#3020)
Browse files Browse the repository at this point in the history
## 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
latekvo authored Aug 1, 2024
1 parent dfb5e43 commit fc15107
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/components/Pressable/Pressable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,11 @@ export default function Pressable(props: PressableProps) {
props.android_ripple?.color ?? defaultRippleColor
)}
rippleRadius={props.android_ripple?.radius ?? undefined}
style={[StyleSheet.absoluteFill, pointerStyle, innerStyles]}>
style={[
{ width: '100%', height: '100%' },
pointerStyle,
innerStyles,
]}>
{childrenProp}
{__DEV__ ? (
<PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />
Expand Down

0 comments on commit fc15107

Please sign in to comment.