Жест как разговор: собираем систему ответчика

В статье «Нажатие — это автомат, а не onClick» система ответчика была видна со стороны одного View: onStartShouldSetResponder — «хочу это касание», onResponderGrant — «досталось». Теперь вложим три вида друг в друга — экран, строку подхода и крестик «удалить», — и пусть каждый хочет касание. Чтобы видеть, кого и о чём спрашивают, обработчики обёрнуты в loud: он печатает имя вида, имя обработчика и ответ. Палец из той же статьи снова в подложке: finger.down касается центра элемента с этим testID, move сдвигает палец от точки касания, up отпускает.

Крестика коснутся дважды: сначала как есть, потом подняв флажок, после которого строка отвечает «да» на onStartShouldSetResponderCapture. Прогноз: кого о чём спросят и кому достанется касание в первый раз и во второй?

declare const finger: { down(testID: string): void; move(dx: number, dy: number): void; up(): void };
const { View } = ReactNative;
type ViewProps = import("react-native").ViewProps;
type GestureResponderEvent = import("react-native").GestureResponderEvent;
type Handler = (e: GestureResponderEvent) => boolean | void;

// каждый обработчик говорит вслух, кто его позвал и что он ответил
function loud(name: string, handlers: ViewProps): ViewProps {
  const out: Record<string, Handler> = {};
  for (const [key, handler] of Object.entries(handlers)) {
    out[key] = (e) => {
      const answer = handler(e);
      console.log(name + "." + key + (answer === undefined ? "" : " → " + answer));
      return answer;
    };
  }
  return out;
}

// на вопрос Capture строка отвечает «да», только когда поднят флажок
let rowGrabs = false;
const asks = (name: string) =>
  loud(name, {
    onStartShouldSetResponderCapture: () => name === "строка" && rowGrabs,
    onStartShouldSetResponder: () => true,
    onResponderGrant: () => {},
  });

mount(
  <View {...asks("экран")} style={{ padding: 16, backgroundColor: "#eee" }}>
    <View {...asks("строка")} style={{ padding: 12, backgroundColor: "#e6e1d6" }}>
      <View testID="del" {...asks("крестик")} style={{ width: 40, height: 40, backgroundColor: "#e4572e" }} />
    </View>
  </View>,
);
setTimeout(() => finger.down("del"), 50);
setTimeout(() => finger.up(), 100);
setTimeout(() => {
  console.log("— флажок поднят");
  rowGrabs = true;
  finger.down("del");
}, 150);
setTimeout(() => finger.up(), 200);

Вопросы идут в два прохода. Первый — от корня к цели, с приставкой Capture: экран, строка, крестик. Никто не взял — начинается второй, от цели к корню, без приставки. Первым его слышит крестик и отвечает «да», и на этом обход кончается: экрана и строку об onStartShouldSetResponder даже не спросили. Во второй раз строка забрала касание ещё на первом проходе, и крестик не услышал ни одного вопроса.

Порядок проходов тот же, что у событий DOM с захватом и всплытием, — их разбирала статья части IV «Всплытие, отмена и остановка в React». Разное — то, что идёт по дереву. В DOM по пути идёт событие, и его получает каждый обработчик, пока кто-нибудь не остановит всплытие. Здесь по пути идёт вопрос, и первое «да» кончает обход: касание достаётся одному виду, и все его события — сдвиги и отпускание — дальше идут только этому виду. В исходнике react-native-web это названо «a single, global "interaction lock" on views» — один общий замок на виды.

Из двух проходов следуют два правила. Без Capture касание берёт самый глубокий из желающих: предки уступают детям, и крестик внутри строки нажимается. С Capture предок забирает касание раньше детей. Так делает ScrollView в React Native, пока список едет по инерции: тап по движущемуся списку должен остановить его, а не нажать строку.

Вопрос Capture на спуске задают каждому виду на пути, пока никто выше не ответил «да», — даже тому, чей ответ заранее «нет». Поэтому в нём удобно отмечать начало касания: PanResponder обнуляет в нём своё состояние жеста, а строка в следующем разделе запомнит там точку касания.

Крестик взял касание, а палец поехал вбок: человек не нажимает, а утаскивает строку. Касание уже занято, и отдать его строке может только переговор. Строка хочет касание, если палец ушёл дальше 10 точек; точку касания она запоминает в вопросе Capture на спуске. Крестик на просьбу отдать соглашается. Под строкой лежит сосед, которому подойдёт любое движение, и третий сдвиг уведёт мышь вниз, прямо на него. loud теперь в подложке. Прогноз: на каком сдвиге касание сменит хозяина и что услышит сосед, когда окажется под указателем?

declare const finger: { down(testID: string): void; move(dx: number, dy: number): void; up(): void };
type ViewProps = import("react-native").ViewProps;
// loud из прошлого раздела — в подложке
declare function loud(name: string, handlers: ViewProps): ViewProps;
const { View } = ReactNative;

const noop = () => {};
let startX = 0;
// вопрос Capture на спуске задают всем на пути — удобное место запомнить точку касания
const remember: ViewProps = {
  onStartShouldSetResponderCapture: (e) => {
    startX = e.nativeEvent.pageX;
    return false;
  },
};
const row = loud("строка", {
  onMoveShouldSetResponder: (e) => Math.abs(e.nativeEvent.pageX - startX) > 10,
  onResponderGrant: noop,
  onResponderReject: noop,
  onResponderMove: noop,
  onResponderRelease: noop,
});
const cross = loud("крестик", {
  onStartShouldSetResponder: () => true,
  onResponderGrant: noop,
  onResponderTerminationRequest: () => true,
  onResponderTerminate: noop,
});
// соседу подойдёт любое движение
const next = loud("сосед", { onMoveShouldSetResponder: () => true });

mount(
  <View style={{ padding: 16, gap: 8 }}>
    <View {...row} {...remember} style={{ padding: 12, backgroundColor: "#e6e1d6" }}>
      <View testID="del" {...cross} style={{ width: 40, height: 40, backgroundColor: "#e4572e" }} />
    </View>
    <View {...next} style={{ height: 60, backgroundColor: "#cde" }} />
  </View>,
);
setTimeout(() => finger.down("del"), 50);
setTimeout(() => finger.move(4, 0), 100);
setTimeout(() => finger.move(18, 0), 150);
setTimeout(() => finger.move(30, 60), 200);
setTimeout(() => finger.up(), 250);

На 4 точках строка отказалась, на 18 — захотела, и начались переговоры. Крестика спросили onResponderTerminationRequest, он согласился и получил onResponderTerminate, а строка — onResponderGrant и сразу onResponderMove за то же самое движение. На третьем сдвиге мышь была уже над соседом, но вопросов не было: хозяин — строка, и движение пришло ей. Сосед не услышал ничего, хотя лежал под указателем и хотел любое движение, — а в DOM этот mousemove достался бы именно ему.

Почему сосед молчит — это главное правило замка. Когда хозяин есть, спрашивают не всю ветку под пальцем, а только общих предков пальца и хозяина, и самого хозяина из них вычёркивают. Сосед строке не предок, поэтому его нет среди спрашиваемых; общих предков с обработчиками у них здесь нет вовсе, и не спросили никого. Замок передаётся только вверх по дереву: список может отнять касание у строки, строка — у крестика, но не наоборот и не вбок. В описании системы в react-native-web это одна фраза: замок «can be transferred (only) to ancestors».

Хозяин может и не отдать. Замените у крестика () => true в onResponderTerminationRequest на () => false и запустите снова: вместо передачи придут крестик.onResponderTerminationRequest → false и строка.onResponderReject, и касание останется у крестика. На третьем сдвиге, уже над соседом, строку не спросят вовсе: она предок крестика, но не соседа. В статье про автомат нажатия этим отказом держалось удержание, которое прокрутка не отнимет; у Pressable он называется cancelable={false}.

Съехать пальцем на соседа можно только в предпросмотре. Мышиное событие браузер адресует элементу под курсором, а касание на телефоне приходит виду, где оно началось: iOS и Android запоминают его при касании. Там сосед станет целью, только если его коснётся второй палец, — и спросят тогда тоже лишь общих предков. Ещё одна тонкость предпросмотра: общего предка react-native-web ищет с ошибкой на единицу и, когда общий у веток только самый верхний вид с обработчиками, не спрашивает никого. У строки и соседа общего вида с обработчиками нет совсем, поэтому на этот вывод ошибка не влияет.

Соберём тот же договор без React и без браузера. Вид — узел с именем, родителем и обработчиками, названными как пропсы View. Касание — объект { dx, dy }, сдвиг от точки касания: вычитать координаты, как строка выше, здесь незачем. Замок хранит одного хозяина и умеет три вещи — down, move и up. Логика — в двух функциях. askers решает, кого спрашивать: без хозяина — всю ветку цели, с хозяином — общее начало двух веток без самого хозяина. negotiate задаёт вопросы в два прохода и ведёт переговоры. call печатает в том же формате, что loud.

Дерево и история те же, что в прошлом разделе: экран, строка с крестиком, сосед и сдвиги на 4, 18 и 30 точек, последний — над соседом. Сдвиг, как мышь в предпросмотре, адресуем виду под указателем. Прогноз: совпадёт ли вывод с react-native-web?

interface Shift { dx: number; dy: number }
type Handler = (t: Shift) => boolean | void;
interface ViewNode {
  name: string;
  parent?: ViewNode;
  h: { [handler: string]: Handler };
}

// зовём обработчик, если он есть, и печатаем его ответ — как loud
function call(node: ViewNode, name: string, t: Shift): boolean | void {
  const handler = node.h[name];
  if (!handler) return;
  const answer = handler(t);
  console.log(node.name + "." + name + (answer === undefined ? "" : " → " + answer));
  return answer;
}
// ветка от корня до узла
const branch = (node?: ViewNode): ViewNode[] => (node ? [...branch(node.parent), node] : []);

function createLock() {
  let owner: ViewNode | null = null;
  // без хозяина спрашивают всю ветку цели, с хозяином — только его предков
  const askers = (target: ViewNode): ViewNode[] => {
    const path = branch(target);
    if (!owner) return path;
    const mine = branch(owner);
    let common = 0;
    while (common < mine.length && path[common] === mine[common]) common++;
    return mine.slice(0, common === mine.length ? common - 1 : common);
  };
  const negotiate = (target: ViewNode, t: Shift, start: boolean) => {
    const path = askers(target);
    const capture = start ? "onStartShouldSetResponderCapture" : "onMoveShouldSetResponderCapture";
    const bubble = start ? "onStartShouldSetResponder" : "onMoveShouldSetResponder";
    // сначала от корня вниз, потом от цели вверх; замок берёт первое «да»
    const wants = path.find((n) => call(n, capture, t)) ?? [...path].reverse().find((n) => call(n, bubble, t));
    if (!wants) return;
    if (owner && call(owner, "onResponderTerminationRequest", t) === false) {
      call(wants, "onResponderReject", t);
      return;
    }
    if (owner) call(owner, "onResponderTerminate", t);
    owner = wants;
    call(owner, "onResponderGrant", t);
  };
  return {
    down: (target: ViewNode) => negotiate(target, { dx: 0, dy: 0 }, true),
    move: (target: ViewNode, t: Shift) => {
      negotiate(target, t, false);
      if (owner) call(owner, "onResponderMove", t);
    },
    up: () => {
      if (owner) call(owner, "onResponderRelease", { dx: 0, dy: 0 });
      owner = null;
    },
  };
}

// то же дерево и та же история, что в прошлом разделе
const noop = () => {};
const root: ViewNode = { name: "экран", h: {} };
const row: ViewNode = { name: "строка", parent: root, h: {
  onMoveShouldSetResponder: (t) => Math.abs(t.dx) > 10,
  onResponderGrant: noop, onResponderReject: noop, onResponderMove: noop, onResponderRelease: noop,
} };
const cross: ViewNode = { name: "крестик", parent: row, h: {
  onStartShouldSetResponder: () => true,
  onResponderGrant: noop, onResponderTerminationRequest: () => true, onResponderTerminate: noop,
} };
const next: ViewNode = { name: "сосед", parent: root, h: { onMoveShouldSetResponder: () => true } };

const lock = createLock();
lock.down(cross);
lock.move(cross, { dx: 4, dy: 0 });
lock.move(cross, { dx: 18, dy: 0 });
lock.move(next, { dx: 30, dy: 60 });
lock.up();

Совпал строка в строку, и с отказом крестика совпадёт тоже — проверьте. Выходит, всё, что показал react-native-web, держится на трёх решениях. Два прохода — это find по ветке от корня, потом по перевёрнутой, и первое «да» кончает поиск. Правило предков — это askers: пока хозяин есть, в список попадает только общее начало двух веток, и соседа в нём не бывает. Переговоры — это ветка с owner в negotiate: хозяин без onResponderTerminationRequest считается согласным, а его «нет» превращается в onResponderReject для претендента.

Настоящий плагин живёт в рендерере React Native: в 0.86 это объект ResponderEventPlugin в файле ReactFabric-dev.js. Скелет у него тот же: он считает глубину двух веток, выравнивает их и поднимается до совпадения, хозяина из вопросов вычёркивает, спрашивает в два прохода. Разный — порядок переговоров. Претенденту onResponderGrant там вызывают сразу, через executeDirectDispatch, и только потом спрашивают хозяина: ответ Grant — не пускать ли к касанию нативные виды — нужен плагину, чтобы сменить хозяина. Если хозяин отказал, претендент получает onResponderReject после уже полученного onResponderGrant и хозяином так и не становится. Отсюда правило для телефона: в onResponderGrant ничего необратимого, а начатое отменяют в onResponderReject.

Чего в замке нет: нескольких пальцев, событий прокрутки и выделения текста, которые тоже умеют отнимать касание, и отмены касания системой — о ней в последнем разделе. В таком виде замок лежит в подложке первой задачи.

Писать все эти обработчики для каждого жеста и самим вычитать координаты незачем: для этого есть PanResponder. Это не компонент и не отдельная система, а фабрика обработчиков ответчика. PanResponder.create принимает те же вопросы и уведомления, только с Pan в имени — onMoveShouldSetPanResponder, onPanResponderGrant, onPanResponderMove, — и отдаёт panHandlers, которые раскладывают на View пропсами. Прогноз: сколько обработчиков окажется в panHandlers, если задан один колбэк?

const { PanResponder } = ReactNative;

const pan = PanResponder.create({ onStartShouldSetPanResponder: () => true });
const keys = Object.keys(pan.panHandlers);
console.log("обработчиков:", keys.length);
console.log(keys.join(", "));

Тринадцать. Двенадцать из них — входы ответчика, те же пропсы View: четыре вопроса, Grant, Reject, Start, Move, End, Release, Terminate и TerminationRequest. Каждый зовёт ваш колбэк, если он есть; вопрос без колбэка отвечает «нет», просьба отдать без колбэка — «да». Тринадцатый, onClickCapture, есть только в react-native-web: после жеста он гасит браузерный click, чтобы кнопка под отпущенным пальцем не нажалась. В PanResponder React Native 0.86 ключей двенадцать — кликов на телефоне нет.

Вторым аргументом колбэки получают gestureState — то, ради чего PanResponder и берут. x0 и y0 — где был палец в момент захвата, moveX и moveY — где он сейчас, dx и dy — сколько прошёл, vx и vy — скорость в точках за миллисекунду, numberActiveTouches — сколько пальцев на экране. Всё это считается из истории касаний, которую ведёт сама система ответчика.

Свайп не должен забирать касание сразу: вдруг человек нажимает крестик или листает список. Поэтому строка берёт жест на движении, когда палец ушёл дальше 10 точек. Прогноз: какой dx придёт, когда палец будет на −40?

declare const finger: { down(testID: string): void; move(dx: number, dy: number): void; up(): void };
const { View, PanResponder } = ReactNative;

const pan = PanResponder.create({
  // жест не забираем сразу: вдруг это нажатие или прокрутка
  onMoveShouldSetPanResponder: (e, g) => Math.abs(g.dx) > 10,
  onPanResponderGrant: (e, g) => console.log("захват · dx", g.dx),
  onPanResponderMove: (e, g) => console.log("ведём · dx", g.dx),
  onPanResponderRelease: (e, g) => console.log("отпустили · dx", g.dx),
});

mount(<View testID="set" {...pan.panHandlers} style={{ height: 60, backgroundColor: "#e6e1d6" }} />);
setTimeout(() => finger.down("set"), 50);
setTimeout(() => { console.log("— палец на -5"); finger.move(-5, 0); }, 100);
setTimeout(() => { console.log("— палец на -15"); finger.move(-15, 0); }, 150);
setTimeout(() => { console.log("— палец на -40"); finger.move(-40, 0); }, 200);
setTimeout(() => finger.up(), 250);

Палец на −40, а dx равен −25. Пока строка не была хозяином, dx копился от касания: в вопросе на −15 он был −15. А в момент захвата PanResponder его обнуляет и дальше считает от точки захвата:

// react-native 0.86, Libraries/Interaction/PanResponder.js
onResponderGrant(event: GestureResponderEvent): boolean {
  gestureState.x0 = currentCentroidX(event.touchHistory);
  gestureState.y0 = currentCentroidY(event.touchHistory);
  gestureState.dx = 0;
  gestureState.dy = 0;
  if (config.onPanResponderGrant) {
    config.onPanResponderGrant(event, gestureState);
  }
  // …
},

Над полем dx в том же файле написано «accumulated distance of the gesture since the touch started», но ниже, в разборе полей, честнее: пока вид не хозяин, dx — только путь до порога. Для свайпа это значит, что строка, которой отдают dx как есть, отстаёт от пальца ровно на порог захвата; как это исправить — третья задача. И ещё одно: на −15 не пришло onPanResponderMove. Движение, на котором вид стал хозяином, PanResponder уже учёл в вопросе и второй раз его не присылает: onResponderMove сверяет время события с последним учтённым.

Соберём строку подхода, которую можно утащить влево. Под пальцем её ведёт Animated.Value в translateX — значение из прошлых статей главы, которое двигает вид без рендера экрана. Отпустили — пружина везёт строку назад или за край, и тогда подход удаляется. Под строкой лежит красная подложка: то, что открывается при свайпе. Решения записаны в колбэках:

В подложке — палец, строка var global = globalThis, без которой остановка пружины падает в предпросмотре, и checkNative из статьи «useNativeDriver: два потока»: сверим стиль строки со списком нативного драйвера. Прогноз: что скажет сверка и что станет с коротким и с длинным свайпом?

Как и во всей главе: пружина идёт кадрами, а кадры — только пока экран примера виден. Запускайте клавишей Enter из поля прогноза — экран стоит прямо над ним.

declare const finger: { down(testID: string): void; move(dx: number, dy: number): void; up(): void };
// в подложке — checkNative из статьи про useNativeDriver и строка про global
declare function checkNative(name: string, animated: Record<string, unknown>): void;
const { View, Text, Animated, PanResponder } = ReactNative;

const WIDTH = 300;
interface SwipeRowProps {
  title: string;
  onDelete(): void;
}

function SwipeRow({ title, onDelete }: SwipeRowProps) {
  const x = React.useRef(new Animated.Value(0)).current;
  const pan = React.useRef(
    PanResponder.create({
      // горизонтальный жест — строке, вертикальный — списку
      onMoveShouldSetPanResponder: (e, g) => Math.abs(g.dx) > 10 && Math.abs(g.dx) > Math.abs(g.dy),
      // схватили посреди пружины — останавливаем её, иначе палец и пружина тянут в разные стороны
      onPanResponderGrant: () => x.stopAnimation(),
      onPanResponderMove: (e, g) => x.setValue(Math.min(0, g.dx)),
      // начатый свайп прокрутка не отнимет
      onPanResponderTerminationRequest: () => false,
      // а система может отнять без спроса — тогда строку на место
      onPanResponderTerminate: () => Animated.spring(x, { toValue: 0, useNativeDriver: false }).start(),
      onPanResponderRelease: (e, g) => {
        const gone = g.dx < -WIDTH / 3;
        console.log("отпустили на", g.dx, "·", gone ? "удаляем" : "назад");
        Animated.spring(x, { toValue: gone ? -WIDTH : 0, useNativeDriver: false }).start(({ finished }) => {
          if (finished && gone) onDelete();
        });
      },
    }),
  ).current;
  return (
    <View style={{ width: WIDTH, backgroundColor: "#e4572e" }}>
      <Animated.View testID={title} {...pan.panHandlers}
        style={{ padding: 12, backgroundColor: "#e6e1d6", transform: [{ translateX: x }] }}>
        <Text>{title}</Text>
      </Animated.View>
    </View>
  );
}

function Sets() {
  const [sets, setSets] = React.useState(["80 кг × 8", "82,5 кг × 6", "85 кг × 5"]);
  console.log("подходы:", sets.join(" | "));
  return (
    <View style={{ gap: 4 }}>
      {sets.map((s) => (
        <SwipeRow key={s} title={s} onDelete={() => setSets(sets.filter((t) => t !== s))} />
      ))}
    </View>
  );
}

checkNative("свайп строки", { transform: [{ translateX: new Animated.Value(0) }] });
mount(<Sets />);
// короткий свайп
setTimeout(() => finger.down("82,5 кг × 6"), 100);
setTimeout(() => finger.move(-20, 0), 150);
setTimeout(() => finger.move(-60, 0), 200);
setTimeout(() => finger.up(), 250);
// длинный свайп
setTimeout(() => finger.down("80 кг × 8"), 1500);
setTimeout(() => finger.move(-20, 0), 1550);
setTimeout(() => finger.move(-140, 0), 1600);
setTimeout(() => finger.up(), 1650);

Короткий свайп вернулся, длинный увёз строку за край, и подход исчез из списка. «Отпустили на −40», хотя палец ушёл на 60, — те самые 20 точек, на которых случился захват. Сверка ответила «можно»: translateX в списке нативного драйвера есть, и пружины после отпускания на телефоне можно отдать нативу — setValue нативному значению не запрещён, он просто отправляет число в натив. Но главного это не меняет. Под пальцем строку ведёт не анимация, а setValue из колбэка движения, а колбэк выполняется в JS-потоке: там живёт вся система ответчика и весь PanResponder. Пока JS-поток занят, строка за пальцем не едет, какой бы флаг ни стоял у пружин. Здесь они с false: в предпросмотре true добавил бы только предупреждение. Как увезти в другой поток сам код жеста — следующая статья, про worklet-ы.

declare const finger: { down(testID: string): void; move(dx: number, dy: number): void; up(): void };
const { Animated, PanResponder } = ReactNative;

const x = new Animated.Value(0);
let last = 0;
x.addListener(({ value }) => {
  last = value;
});
const pan = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  // карта аргументов колбэка: событие пропускаем, dx из gestureState — в x
  onPanResponderMove: Animated.event([null, { dx: x }], { useNativeDriver: true }),
});

mount(
  <Animated.View testID="set" {...pan.panHandlers}
    style={{ height: 60, backgroundColor: "#e6e1d6", transform: [{ translateX: x }] }} />,
);
setTimeout(() => finger.down("set"), 50);
setTimeout(() => finger.move(-30, 0), 100);
setTimeout(() => {
  finger.up();
  console.log("строка сдвинулась на", last);
}, 150);

На телефоне иначе: Animated.event с useNativeDriver: true в колбэке PanResponder значения не двигает. В предпросмотре двигает — нативного драйвера там нет вовсе.

Замок в предпросмотре и на телефоне устроен одинаково: те же два прохода вопросов, то же правило предков, тот же PanResponder. Разное — порядок переговоров и всё вокруг замка. В предпросмотре react-native-web слушает на document события мыши и касаний браузера и сам ведёт переговоры в модуле ResponderSystem. На телефоне касания присылает нативный обработчик — на iOS RCTSurfaceTouchHandler, на Android JSTouchDispatcher, — а переговоры ведёт ResponderEventPlugin внутри рендерера.

Отмена без вопроса — единственное, от чего не спасает отказ в onPanResponderTerminationRequest. На iOS так бывает, когда касание перехватывает нативный жест вне корневого вида React Native: RCTSurfaceTouchHandler уступает таким жестам и отменяет свои касания. Поэтому у свайпа есть onPanResponderTerminate: строка, у которой отняли палец, возвращается на место, а не остаётся полуоткрытой.

Для примеров отсюда следует правило: жест в предпросмотре проверяется честно только одним указателем и внутри ветки хозяина. Прокрутку настоящим пальцем, отмену системой и несколько пальцев проверяют на телефоне.

На телефоне иначе: сдвиг пальца всегда приходит виду, где касание началось; претендент получает onResponderGrant раньше, чем спросят хозяина; а касание, отменённое системой, кончается onResponderTerminate без вопроса — отказ в onResponderTerminationRequest от этого не спасает.

// Замок на дерево из статьи «Жест как разговор: собираем систему ответчика».
// Вид — { name, parent, h }: h — обработчики с именами как у View.
// Касание — { dx, dy }: сдвиг от точки касания.
function callHandler(node, name, touch) {
  var handler = node.h[name];
  if (!handler) return undefined;
  var answer = handler(touch);
  console.log(node.name + "." + name + (answer === undefined ? "" : " → " + answer));
  return answer;
}
function branch(node) {
  return node ? branch(node.parent).concat([node]) : [];
}
function createLock() {
  var owner = null;
  // без хозяина спрашивают всю ветку цели, с хозяином — только его предков
  function askers(target) {
    var path = branch(target);
    if (!owner) return path;
    var mine = branch(owner);
    var common = 0;
    while (common < mine.length && path[common] === mine[common]) common++;
    return mine.slice(0, common === mine.length ? common - 1 : common);
  }
  function negotiate(target, touch, start) {
    var path = askers(target);
    var capture = start ? "onStartShouldSetResponderCapture" : "onMoveShouldSetResponderCapture";
    var bubble = start ? "onStartShouldSetResponder" : "onMoveShouldSetResponder";
    // сначала от корня вниз, потом от цели вверх; замок берёт первое «да»
    var wants = path.find(function (n) { return callHandler(n, capture, touch); }) ||
      path.slice().reverse().find(function (n) { return callHandler(n, bubble, touch); });
    if (!wants) return;
    if (owner && callHandler(owner, "onResponderTerminationRequest", touch) === false) {
      callHandler(wants, "onResponderReject", touch);
      return;
    }
    if (owner) callHandler(owner, "onResponderTerminate", touch);
    owner = wants;
    callHandler(owner, "onResponderGrant", touch);
  }
  return {
    down: function (target) { negotiate(target, { dx: 0, dy: 0 }, true); },
    move: function (target, touch) {
      negotiate(target, touch, false);
      if (owner) callHandler(owner, "onResponderMove", touch);
    },
    up: function () {
      if (owner) callHandler(owner, "onResponderRelease", { dx: 0, dy: 0 });
      owner = null;
    }
  };
}

// Строка подхода со свайпом из той же статьи, в том виде, в каком она собрана
// в разделе «Свайп по строке подхода». ReactNative и React читаются при
// отрисовке: подложка грузится раньше них. Нужна строка var global = globalThis.
function SwipeRow(props) {
  var RN = ReactNative;
  var h = React.createElement;
  var WIDTH = 300;
  var x = React.useRef(null);
  if (x.current === null) x.current = new RN.Animated.Value(0);
  var value = x.current;
  var pan = React.useRef(null);
  if (pan.current === null) {
    pan.current = RN.PanResponder.create({
      // горизонтальный жест — строке, вертикальный — списку
      onMoveShouldSetPanResponder: function (e, g) {
        return Math.abs(g.dx) > 10 && Math.abs(g.dx) > Math.abs(g.dy);
      },
      // схватили посреди пружины — останавливаем её
      onPanResponderGrant: function () { value.stopAnimation(); },
      onPanResponderMove: function (e, g) { value.setValue(Math.min(0, g.dx)); },
      // начатый свайп прокрутка не отнимет
      onPanResponderTerminationRequest: function () { return false; },
      // а система может отнять без спроса — тогда строку на место
      onPanResponderTerminate: function () {
        RN.Animated.spring(value, { toValue: 0, useNativeDriver: false }).start();
      },
      onPanResponderRelease: function (e, g) {
        var gone = g.dx < -WIDTH / 3;
        RN.Animated.spring(value, { toValue: gone ? -WIDTH : 0, useNativeDriver: false }).start(function (result) {
          if (result.finished && gone) props.onDelete();
        });
      }
    });
  }
  return h(
    RN.View,
    { style: { width: WIDTH, backgroundColor: "#e4572e" } },
    h(
      RN.Animated.View,
      Object.assign({ testID: props.title }, pan.current.panHandlers, {
        style: { padding: 12, backgroundColor: "#e6e1d6", transform: [{ translateX: value }] }
      }),
      h(RN.Text, null, props.title)
    )
  );
}