I've tried to make swap to reply functionality with react-native-reanimated and react-native-gesture-handler, I have seen tutorials but I cant get how to add swipe on messages, which component should I use? I tried with bubble and when I swipe all the messages are going left.
const messageComponent = (props: any) => {
const currentMessage = props.currentMessage
if (!currentMessage) return null
const matchMessages: Array<ChatMessage> = matchToMessages[match.id]?.messages
if (!matchMessages) return
const message = matchMessages.find((message) => message.id == currentMessage._id)
return (
<FlingGestureHandler
key={message?.id}
direction={message?.sent ? Directions.LEFT : Directions.RIGHT}
onGestureEvent={eventHandler}
>
<Animated.View style={[styles.animatedView, uas]}>
<View
style={
message?.sent
? { flex: 1, alignSelf: 'flex-end', backgroundColor: 'red' }
: { flex: 1, alignSelf: 'flex-start', backgroundColor: 'green' }
}
>
<Text>
{message?.values
.map((message) => {
return message.text
})
.join('\n')}
</Text>
</View>
</Animated.View>
</FlingGestureHandler>
)
}
I've tried this but I think this is not right way to do this.