react-native-swipeable

react-native-swipeable copied to clipboard

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?

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

flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',

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 :)

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