Reveal Timestamp React Native (iMessage Clone)-CodePudding

I was wondering how I would go about dragging/sliding left to reveal the timestamp on react native. I am using a flatlist in react-native and I have the timestamp data but I am unsure of how to render the timestamps on slight drag. Anyone have detailed ideas on how to do this. I have included images of current implementation and iMessage slide/drag. This feature is also on Instagram (ios version at least). I should add that I'm not trying to do a drag and drop feature more like just a solution review what is not currently in the view from a slide/drag

Current App Current iMessage

CodePudding user response：

The most common way to handle this is with a PanGestureHandler from react-native-gesture-handler and an Animated.View from react-native-reanimated.

Wrap your component in one, and make the View that you want to move into an Animated.View. (The component that the PanGestureHandler wraps also should be an Animated.View.) Create a shared value (from Reanimated) that represents the x offset of the component. Then create a handler method that responds to the drag gesture and changes the shared value. You may want to add some limits, like not scrolling past a certain offset in either direction. Then, use the shared value in an animated style (something like left: offsetX,) that you apply to your Animated.View.

Since you're using this inside a scrollable list, make sure to set the activeOffsetX prop to something like [-5, 5]. This means that if the user is only trying to scroll up and down, your gesture handler won't steal that touch.

The example in the gesture-handler docs should help.

CodePudding user response：

This is the eventual solution i came up with all credit from @Abe and reading the gesture-handler documentation referenced above. I

import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
  const translateX = useSharedValue(0)
  const startX = useRef(0)

My flatlist renders elements like this now

    <Animated.View
        className="mx-2  flex-1 flex-row"
        style={sty}
        onTouchStart={(e) => {
          startX.current = e.nativeEvent.pageX
        }}
        onTouchMove={(e) => {
          const delta = startX.current - e.nativeEvent.pageX
          if (delta > 0) {
            translateX.value = -delta / 2
          }
        }}
        onTouchEnd={() => {
          translateX.value = withSpring(0)
        }}>
...
</Animated.View>