andrew-levy/react-native-stacks

Using a Stack within TouchableOpacity

zpg6 opened this issue · 2 comments

zpg6 commented

Made some complex + nested views with this package already, works like a charm!

Any recommendations on how to make a stack pressable since Spacer doesn't work inside of a TouchableOpacity? I'm looking to replicate how SwiftUI.Button just makes the underlying view pressable without changing the frame.

An example...

<TouchableOpacity>
    <HStack>
        <Text>A</Text>
        <Spacer/>
        <Text>B</Text>
    </HStack>
</TouchableOpacity>

.... just shows as "AB" right next to each other.

andrew-levy commented

@zpg6 Cool glad you're liking it! I just popped your example into my example app and I wasn't able to replicate the issue. It seems to be working well here. Can you provide a link to the repo or more of the file for more context? My suspicion is that you don't have a parent container around your app with the flex:1 style property, but could be wrong.

Screen.Recording.2022-01-23.at.4.16.25.PM.mov
zpg6 commented

Very much appreciate the example... seeing that was a nice sanity check!

It works as expected after pulling out of its deeply nested location. Oops! At least I know it's in there somewhere 😄.

In the meantime, just adding width: 100% to the TouchableOpacity also solves my issue:

return (
    <TouchableOpacity style={{ width: '100%' }}>
        <HStack>
            <Text>A</Text>
            <Spacer/>
            <Text>B</Text>
        </HStack>
    </TouchableOpacity>
)
  • 😄1