Question re: resetting animation state via callback

[neilgamb]

Hello. I am new to react-native-reanimated. Attempting to implement swipe-to-delete functionality inspiring by @wcandillon 's Uber Swipe to Delete tutorial.

Everything is working as expected with the exception of canceling / resetting the animated state of the Swipeable row via a "cancel" method from within a delete confirmation Alert dialog.

I am using "react-native-reanimated": "^1.13.1",, "react-native-gesture-handler": "~1.6.0", and "react-native-redash": "^16.0.8",

Here is a short video showing current behavior:

RPReplay_Final1612911016.mov

My code:

import React from "react";
import { Alert, StyleSheet, View } from "react-native";
import Animated, {
  abs,
  add,
  cond,
  debug,
  eq,
  set,
  call,
  useCode,
} from "react-native-reanimated";
import {
  PanGestureHandler,
  State,
  TouchableWithoutFeedback,
} from "react-native-gesture-handler";
import {
  clamp,
  snapPoint,
  timing,
  useClock,
  usePanGestureHandler,
  useValue,
  minus,
} from "react-native-redash/lib/module/v1";

import PatientListItemLayout, { HEIGHT } from "./PatientListItemLayout";

import RecordListItemActions from "./RecordListItemActions";

const snapPoints = [-100, 0];

interface RecordListItemProps {
  item: any;
  recordType: String;
  isMultiSelecting: Boolean;
  sort: String;
  onSwipe: (item: any, shouldDelete: () => void) => void;
  toggleRecordForBatchDelete: (recordId: String) => void;
}

const RecordListItem = ({
  item,
  recordType,
  isMultiSelecting,
  sort,
  toggleRecordForBatchDelete,
  deleteRecord,
}: RecordListItemProps) => {
  //
  const {
    gestureHandler,
    translation,
    velocity,
    state,
  } = usePanGestureHandler();

  const translateX = useValue(0);
  const offsetX = useValue(0);
  const shouldRemove = useValue(0);
  const to = snapPoint(translateX, velocity.x, snapPoints);
  const clock = useClock();
  const height = useValue(HEIGHT);

  const handleDeleteRecord = ({ firstName, lastName, id }) => {
    Alert.alert(
      "Are you sure?",
      `All data associated with ${recordType} ${firstName} ${lastName} will be permenantly deleted${
        recordType === "patient"
          ? ", including any scans, photos, videos and forms that are associated with this patient"
          : ""
      }.`,
      [
        {
          text: "Yes",
          onPress: () => {
            shouldRemove.setValue(1);
            setTimeout(() => {
              deleteRecord(id);
            }, 100);
          },
        },
        {
          text: "Cancel",
          onPress: () => {
            console.log(`${recordType} delete canceled`);
            shouldRemove.setValue(2);
          },
          style: "cancel",
        },
      ]
    );
  };

  useCode(() => {
    return [
      cond(
        eq(state, State.ACTIVE),
        set(
          translateX,
          add(offsetX, clamp(translation.x, -9999, minus(offsetX)))
        )
      ),
      cond(eq(state, State.END), [
        set(translateX, timing({ clock, from: translateX, to })),
        set(offsetX, translateX),
      ]),
    ];
  }, []);

  useCode(
    () => [
      cond(eq(shouldRemove, 1), [set(height, timing({ from: HEIGHT, to: 0 }))]),
      cond(eq(shouldRemove, 2), [set(translateX, 0), set(offsetX, 0)]),
    ],
    [shouldRemove]
  );

  return (
    <Animated.View>
      <View style={styles.background} />
      <View style={styles.background}>
        <TouchableWithoutFeedback onPress={() => handleDeleteRecord(item)}>
          <RecordListItemActions x={abs(translateX)} />
        </TouchableWithoutFeedback>
      </View>
      <PanGestureHandler {...gestureHandler} enabled={!isMultiSelecting}>
        <Animated.View style={[{ height, transform: [{ translateX }] }]}>
          {recordType === "patient" ? (
            <PatientListItemLayout
              patient={item}
              isMultiSelecting={isMultiSelecting}
              toggleRecordForBatchDelete={toggleRecordForBatchDelete}
              sort={sort}
              x={abs(translateX)}
            />
          ) : (
            <PatientListItemLayout
              patient={item}
              isMultiSelecting={isMultiSelecting}
              toggleRecordForBatchDelete={toggleRecordForBatchDelete}
              sort={sort}
              x={abs(translateX)}
            />
          )}
        </Animated.View>
      </PanGestureHandler>
    </Animated.View>
  );
};

export default RecordListItem;

const styles = StyleSheet.create({
  background: {
    ...StyleSheet.absoluteFillObject,
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    overflow: "hidden",
  },
});

  "main": "index.js",
  "scripts": {
    "setup": "./setup.bash",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@expo/react-native-action-sheet": "^3.8.0",
    "@invertase/react-native-apple-authentication": "^1.1.2",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/datetimepicker": "^3.0.3",
    "@react-native-community/google-signin": "^4.0.3",
    "@react-native-community/hooks": "^2.5.1",
    "@react-native-firebase/app": "7.3.1",
    "@react-native-firebase/auth": "^7.1.0",
    "@react-native-firebase/crashlytics": "^8.3.0",
    "@react-native-firebase/firestore": "^7.2.2",
    "@react-native-firebase/functions": "^7.1.6",
    "@react-native-firebase/storage": "^7.2.2",
    "@react-navigation/drawer": "^5.8.4",
    "@react-navigation/native": "^5.4.0",
    "@react-navigation/stack": "^5.3.7",
    "@types/react-native-dotenv": "^0.2.0",
    "@types/yup": "^0.29.0",
    "@use-expo/font": "^2.0.0",
    "date-fns": "^2.14.0",
    "expo": "~37.0.3",
    "expo-av": "~8.1.0",
    "expo-blur": "~8.1.0",
    "expo-camera": "~8.2.0",
    "expo-file-system": "~8.1.0",
    "expo-font": "~8.1.0",
    "expo-image-picker": "~8.1.0",
    "expo-linear-gradient": "^8.1.0",
    "expo-local-authentication": "~9.0.0",
    "expo-permissions": "~8.1.0",
    "expo-splash-screen": "^0.2.3",
    "expo-updates": "~0.2.0",
    "expo-web-browser": "~8.2.1",
    "formik": "^2.1.4",
    "libphonenumber-js": "^1.7.52",
    "lodash.foreach": "^4.5.0",
    "postinstall-postinstall": "^2.1.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-country-picker-modal": "^1.11.0",
    "react-native-dropdown-picker": "^3.1.8",
    "react-native-fs": "^2.16.6",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-paper": "^3.10.1",
    "react-native-reanimated": "^1.13.1",
    "react-native-rectangle-scanner": "^1.0.10",
    "react-native-redash": "^16.0.8",
    "react-native-roux-sdk": "file:./react-native-roux-sdk",
    "react-native-safe-area-context": "^1.0.2",
    "react-native-screens": "~2.2.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.1.0",
    "react-native-unimodules": "~0.9.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7",
    "react-native-zip-archive": "^5.0.2",
    "yup": "^0.29.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@types/react": "~16.9.23",
    "@types/react-native": "~0.61.23",
    "babel-preset-expo": "~8.1.0",
    "jest-expo": "~37.0.0",
    "metro-react-native-babel-preset": "^0.60.0",
    "patch-package": "^6.2.2",
    "react-native-dotenv": "^0.2.0",
    "typescript": "~3.8.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true,
  "version": "0.0.0"
}

[neilgamb]

Upgraded to Reanimated v2 and I think have figured out a solution using worklets!

[neilgamb]

ok got it working using v2! here is my code for anyone looking for an example:

thank you Software Mansion team — this is an awesome library!

import { Alert, Dimensions, StyleSheet, View } from "react-native";
import {
  PanGestureHandler,
  TouchableOpacity,
} from "react-native-gesture-handler";
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
  Easing,
  runOnUI,
  runOnJS,
} from "react-native-reanimated";

import { HEIGHT } from "./RecordListItemLayout";
import { RecordListItemLayout, RecordListItemActions } from "./_index";
import { clamp, snapPoint } from "../utils/animations";

const width = Dimensions.get("window").width;
const snapPoints = [-width, -100, 0];

interface RecordListItemProps {
  item: any;
  recordType: String;
  isMultiSelecting: Boolean;
  sort: String;
  toggleRecordForBatchDelete: (recordId: String) => void;
  deleteRecord: (id: String) => void;
}

const RecordListItem = ({
  item,
  recordType,
  isMultiSelecting,
  sort,
  toggleRecordForBatchDelete,
  deleteRecord,
}: RecordListItemProps) => {
  const promptDeleteAlert = (
    translateX,
    height,
    { firstName, lastName, id },
    onSwipe
  ) => {
    setTimeout(
      () => {
        Alert.alert(
          "Are you sure?",
          `All data associated with ${recordType} ${firstName} ${lastName} will be permenantly deleted${
            recordType === "patient"
              ? ", including any scans, photos, videos and forms that are associated with this patient"
              : ""
          }.`,
          [
            {
              text: "Yes",
              onPress: () => {
                height.value = withTiming(0, { duration: 100 });
                deleteRecord(id);
              },
            },
            {
              text: "Cancel",
              onPress: () => {
                console.log(`${recordType} delete canceled`);
                translateX.value = withTiming(0, {
                  duration: 250,
                });
              },
              style: "cancel",
            },
          ]
        );
      },
      onSwipe ? 250 : 0
    );
  };

  const handleDeleteSwipe = (translateX, height, item) => {
    "worklet";
    runOnJS(promptDeleteAlert)(translateX, height, item, true);
  };

  const handleDeleteRecordPress = (translateX, height, item) =>
    runOnUI(promptDeleteAlert)(translateX, height, item, false);

  const translateX = useSharedValue(0);
  const height = useSharedValue(HEIGHT);

  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      ctx.offsetX = translateX.value;
    },
    onActive: (event, ctx) => {
      translateX.value =
        clamp(event.translationX, -9999, -ctx.offsetX) + ctx.offsetX;
    },
    onEnd: ({ velocityX }, ctx) => {
      const to = snapPoint(translateX.value, velocityX, snapPoints);
      translateX.value = withTiming(to, {
        duration: 250,
        easing: Easing.elastic(2),
      });
      if (to === -width) {
        handleDeleteSwipe(translateX, height, item);
      }
    },
  });

  const style = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
      height: height.value,
    };
  });

  return (
    <Animated.View>
      <View style={styles.background} />
      <View style={styles.background}>
        <TouchableOpacity
          onPress={() => handleDeleteRecordPress(translateX, height, item)}
        >
          <RecordListItemActions translateX={translateX} />
        </TouchableOpacity>
      </View>
      <PanGestureHandler {...{ onGestureEvent }} enabled={!isMultiSelecting}>
        <Animated.View style={{ ...style }}>
          <RecordListItemLayout
            record={item}
            recordType={recordType}
            isMultiSelecting={isMultiSelecting}
            toggleRecordForBatchDelete={toggleRecordForBatchDelete}
            sort={sort}
            translateX={translateX}
          />
        </Animated.View>
      </PanGestureHandler>
    </Animated.View>
  );
};

export default RecordListItem;

const styles = StyleSheet.create({
  background: {
    ...StyleSheet.absoluteFillObject,
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    overflow: "hidden",
  },
});