How to update UI with high performance

[midoushitongtong]

hi
I have code like the following.
but it seems that updating the UI in the gestureHandler causes the animation to stutter.

import React from 'react';
import { Text } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

function App() {
  const x = useSharedValue(0);

  const [someData, setSomeData] = React.useState('');

  const gestureHandler = (event) => {
    x.value = event.nativeEvent.translationX;

    if (x.value > 100) {
      // This will cause the animation to lag
      setSomeData('111');
    } else {
      // This will cause the animation to lag
      setSomeData('222');
    }
  };

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

  return (
    <>
      <PanGestureHandler onGestureEvent={gestureHandler}>
        <Animated.View
          style={[
            {
              width: 100,
              height: 100,
              backgroundColor: '#ccc',
            },
            animatedStyle,
          ]}
        />
      </PanGestureHandler>

      <Text>{someData}</Text>
    </>
  );
}

export default App;

I may have missed something from the docs, please let me know if you have any suggestions, thanks.

[midoushitongtong]

Currently I can solve this problem by setting the opacity: 0 / 1 animation style, because my need is simple, just show/hide a View during the animation.

If there is a better way, you can tell me.

thanks.

[khanhduy62]

@midoushitongtong
Do you want to show text with different condition.
I think you can use useSharedValue in order to assign value and ReText from redash https://wcandillon.github.io/react-native-redash-v1-docs/strings

[midoushitongtong]

thanks, this is what I was looking for.