Q: How to render current point data correctly?

Initially, the UI on gestures works pretty well.

But if I try to render the current point price and timestamp I get a laggy thing. Here is an example of code with setState:

    const onPointSelected = useCallback(
        (p) => {
            console.log(p);

            const selectedPrice = formatAmount(p.value, fiatCurrency.code as CurrencyName, "fiat");
            const timestamp = DateTime.fromSeconds(p.date);

            setAmountTitle(selectedPrice);
            setTimestamp(timestamp);
        },
        [fiatCurrency.code],
    );

As a result with setState I get slow UI:

So the question is how to render it properly and smoothly?

[DDushkin]

Yeah, that’s because of React Native. It isn’t really fast at state updates. Maybe this will improve with concurrent mode. The way to solve this is to use Reanimated Shared Values and update the Text using ReanimatedText.

Thanks, I installed AnimateableText from "react-native-animateable-text", and here is the new code

    const title = useSharedValue(assetBalanceFormatted);
    const subtitle = useSharedValue(`${t("main.value")}: ${fiatBalanceFormatted}`);

    const animatedTitle = useAnimatedProps(() => ({
        text: title.value,
    }));
    const animatedSubtitle = useAnimatedProps(() => ({
        text: subtitle.value,
    }));

    const onPointSelected = useCallback(
        (p) => {
            console.log(p);

            const selectedPrice = formatAmount(p.value, fiatCurrency.code as CurrencyName, "fiat");
            const timestamp = DateTime.fromSeconds(p.date);

            title.value = selectedPrice;
            subtitle.value = timestamp.toFormat("d MMM yyyy HH:mm");
        },
        [fiatCurrency.code, subtitle, title],
    );
//...
    <AnimateableText animatedProps={animatedTitle} style={styles.title} />
    <AnimateableText animatedProps={animatedSubtitle} style={styles.subtitle} />

UPD: works now

But I can see now that Cursor is not rendered

[mrousavy]

Yeah, that’s because of React Native. It isn’t really fast at state updates. Maybe this will improve with concurrent mode. The way to solve this is to use Reanimated Shared Values and update the Text using ReanimatedText.