React native gifted chat, swipe to reply functionality

122 views Asked by At

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.

0

There are 0 answers