search

jshanson7 / react-native-swipeable

A powerful React Native swipe component.
MIT License
1.24k stars 271 forks source link

Swipeable as a FlatList item has left and right content way off the viewable area #12

Open mrozbarry opened 7 years ago

mrozbarry commented 7 years ago

I have a <FlatList style={{ flex: 1, margin: 8 }} /> where all my items have a top-level element of <Swipeable style={{ flex: 1, marginBottom: 4 }} leftButtons={[ <Button key="delete" title="Delete" /> ]}>{ /* ... */ }</Swipeable>.

When I swipe left to right, the swipeable state works (content is pulled to the right and stays), but I can't see the button. When I pull to the right as far as I can go, I can see the button way off the visible area.

I'm using react native 0.44.0 and node 5.8.0, and currently testing against iPHone 6/iOS 10.2 on my xcode simulator.

Is this an issue with my styling, my react native version, or this component library?

theohdv commented 7 years ago

I think you should play with style properties, for example (Button style):

flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
ixje commented 7 years ago

I can confirm the styling. I initially did not apply any, then looked at the example code and got it working. You can edit the render() of the swipeable-example code to return the following to verify it's working with a FlatList <FlatList data={[<Example1 {...itemProps} />, <Example2 {...itemProps} />]} renderItem={({ item }) => item} />

ps: don't forget to import FlatList :)

mrozbarry commented 7 years ago

I should have some time this week to get back into that project and give this a test. Thanks for the feedback, gents!