Question 35431 in React native Question posted in
The official React Native documentation can be found here.

Reveal Timestamp React Native (iMessage Clone)

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search