Synchronization with state

[ciza99]

Context:

Hi, I'm creating drag and drop library for my project and I need to sync animation from shared values with state. What I have is a component called DndContext which takes a prop called onDragEnd. The prop onDragEnd is a callback function taht is triggered whenever the Gesture.Pan ends. It is provided with information about the dragged node and the node that is hovered over. On this callback function I want to be able to change the state, for example move the dragged node into a container if the dragged node is hovering over it at the end of a pan gesture.

However whenever I change the state, I see a flicker where the element returns to the initial position before the setState takes affect and the layout is re-rendered. When the element is dragged, I apply correct transform with useAnimatedStyle to move the element while dragging. So the real question here is how can I reset the transform exactly at the point in time when the new layout will be rendered, so the dragged element does not flicker.

Here is the code to get a better idea of what I'm trying to achieve:

Pan Gesture

Here I'm setting the transform with onUpdate and onEnd I run a function handleDragEnd on the JS thread.

const panGestureFactory = useCallback(
  (id: NodeId) =>
    Gesture.Pan()
      .onBegin(() => {
        runOnJS(setDragging)(true);
        active.value = id;
        runOnJS(impactAsync)(ImpactFeedbackStyle.Medium);
      })
      .onUpdate((event) => {
        const { tx: mTx, ty: mTy } = modifiers.value.reduce(
          (prev, modifier) => modifier(prev),
          { tx: event.translationX, ty: event.translationY }
        );
        absolute.value = { x: event.absoluteX, y: event.absoluteY };
        transform.value = { x: mTx, y: mTy };
      })
      .onEnd(() => {
        runOnJS(handleDragEnd)({
          active: activeNode.value,
          over: overNode.value,
        });
      }),
  [onDragEnd, handleDragEnd]
);

handleDragEnd

This function calls the onDragEnd function that sets the new state which changes the layout. It also sets dragging to false. I run this in a batch which I thought would prevent the flicker but it did not.

const handleDragEnd = ({
  active: activeNode,
  over: overNode,
}: {
  active: Draggable | null;
  over: Droppable | null;
}) => {
  unstable_batchedUpdates(() => {
    if (activeNode) {
      onDragEnd?.({ active: activeNode, over: overNode });
    }
    setDragging(false);
  });
};

useEffect on dragging

And finally, whenever the dragging state changes and is false, I reset the transform. The useEffect should run after the render so I though this would be a good place to reset the transform.

useEffect(() => {
  if (dragging) return;

  active.value = null;
  over.value = null;
  transform.value = { x: 0, y: 0 };
}, [dragging]);

Should this not work? Or is the synchronization more complex. Please I would be grateful for any help 🙏.

[tjzel]

Hi @ciza99.
I went a bit into the case you described and managed to make some non-jumping animations. Here's the snippet I used to simplify your case:

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  runOnJS,
  useAnimatedStyle,
} from 'react-native-reanimated';

export default function App() {
  const [dragging, setDragging] = useState(false);

  const absolute = useSharedValue({ x: 0, y: 0 });
  const transform = useSharedValue({ x: 0, y: 0 });

  const handleDragEnd = () => {
    setDragging(false);
  };

  const gesture = Gesture.Pan()
    .onBegin(() => {
      runOnJS(setDragging)(true);
    })
    .onUpdate((event) => {
      console.log(event.translationX, event.translationY);
      transform.value = {
        x: event.translationX,
        y: event.translationY,
      };
    })
    .onEnd((event) => {
      absolute.value = {
        x: event.absoluteX - 50,
        y: event.absoluteY - 50,
      };
      transform.value = {
        x: 0,
        y: 0,
      };
      runOnJS(handleDragEnd)();
    });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: dragging ? '#4C1F50FF' : '#F44336FF',
      width: 100,
      height: 100,
      position: 'absolute',
      top: absolute.value.y,
      left: absolute.value.x,
      transform: [
        { translateX: transform.value.x },
        { translateY: transform.value.y },
      ],
    };
  });

  return (
    <View style={styles.container}>
      <GestureHandlerRootView>
        <GestureDetector gesture={gesture}>
          <Animated.View style={animatedStyle} />
        </GestureDetector>
      </GestureHandlerRootView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#3FA2FFFF',
  },
});

Key part in here is setting both absolute.value and transform.value in onEnd in the provided gesture.

RunOnJS is a function that schedules a function to be executed asynchronously on JS thread. Therefore, it might not be executed during the same frame and you see the flickering. Although your case is more complex than my snippet, I think it's what you need. Always try to set SharedValue's value on UI thread if possible since it's a synchronous operation there.