esthor / react-native-swipeable-list

A zero-dependency Swipeable FlatList for React-Native, with Gestures, Quick Actions, and Animations. Simple as that.
MIT License
591 stars 31 forks source link

Does this library still work? #64

Closed durgaswaroop closed 1 year ago

durgaswaroop commented 1 year ago

I replaced an existing Flatlist with SwipeableFlatList and it doesn't handle any of the swipes. It behaves just like the regular Flatlist. Does something else need to be done?

Here is what I have:

const GoalListItem = props => {
    let goal = props.goal;
    return (
   containerStyle={{ margin: 10 }}>
            <Card.Title>{goal.description}</Card.Title>
            <Card.Divider />
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                <Text>{goal.reward}</Text>
                {/* <Divider orientation='vertical' width={2} /> */}
                <Text>{goal.targetDate}</Text>
            </View>
        </Card>
    )
};

That's the item I am rendering in the Flatlist and this is how I have the Flatlist configured:

 return (
        <View style={globalStyles.scrollViewContainer}>
            <SwipeableFlatList
                data={goalIds.filter(id => id !== 'temporary').map(Goal.getGoalById)}
                // Keep this item. Anything else, causes it to fail!
                renderItem={({ item }) => <GoalListItem goal={item} navigation={navigation} setter={setGoalIds} />}
                maxSwipeDistance={25}
                shouldBounceOnMount={true}
                keyExtractor={_ => nextId('g-')}
            />
     </View>
    );

Looks straightforward to me, but the cards do not handle any gestures and show no indication that they are not just the regular Flatlist.

esthor commented 1 year ago

@durgaswaroop Yes, this library still works.

You are not passing any actions to render. It will work just like FlatList, because this library simply extends it. (That's one of the main benefits of this library's approach...it also means zero dependencies).

Take a look at the example code, particularly the block at Line 109 and its use on Line 145. https://github.com/esthor/react-native-swipeable-list/blob/main/examples/SwipeableListExampleApp/App.tsx#L109

esthor commented 1 year ago

I'm closing this issue, since the code shown acts as expected when not passing quick actions. If you continue to have issues, please feel free to comment or open another issue.