Как отрендерить реанимированное значение в текстовом компоненте?

Question

Я использую PanGestureHandler и хочу выйти из отслеживаемого значения.

Использование console.log в методе call передает правильное значение, но при использовании setState некорректно обновляется.

Я безуспешно пытался использовать значение ref.

Может ли кто-нибудь указать мне правильное направление?

import React, { useState, useEffect } from 'react'
import { Text } from 'react-native'
import styled from 'styled-components/native'
import { Path, Svg } from 'react-native-svg'
import A from 'react-native-reanimated'
import { PanGestureHandler, State } from 'react-native-gesture-handler'

const { event, useCode, debug, call, block } = A

const Rotation = function App() {
  const translationX = new A.Value(0)
  const translationY = new A.Value(0)
  const [transX, setTransX] = useState(0)
  const gestureHandler = event([
    {
      nativeEvent: {
        translationX,
        translationY,
      },
    },
  ])

  useCode(
    () => call([translationX], ([translationX]) => setTransX(translationX)),
    [translationX]
  )

  return (
    <PanGestureHandler
      onGestureEvent={gestureHandler}
      onHandlerStateChange={gestureHandler}
    >
      <Wrapper>
        <OutputWrapper>
          <CoordsLabel>{transX}</CoordsLabel>
        </OutputWrapper>
      </Wrapper>
    </PanGestureHandler>
  )
}

const Wrapper = styled(A.View)`
  flex: 1;
  align-self: stretch;
  background-color: red;
`
const OutputWrapper = styled(A.View)`
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 80px;
  background-color: black;
  align-items: center;
  justify-content: center;
`
const CoordsLabel = styled(A.Text)`
  color: white;
`

export default Rotation

Answer 1

Мне нужно было сохранить значения при рендеринге. Проблема заключалась в том, что вызов setState каждый раз приводил к сбросу анимированного значения, поэтому оно никогда не перемещалось с нуля.

Запоминание значения решило проблему:

const { translationX, translationY } = useMemo(
  () => ({
    translationX: new A.Value(0),
    translationY: new A.Value(0),
  }),
  []
)

NB Запоминание с помощью useMemo - не лучший способ получить go, поскольку значения не гарантированно сохранятся должным образом. Выбирайте useMemoOne или адаптацию useRef при производстве.