<ReText /> Not updating UI for Web

Hey, I spent a bit of time earlier today trying to get ReText to work on web and can’t seem to figure out if I’m just using incorrectly or there’s a bit more to it. I couldn’t find anything explicit in the docs saying that this is available for web, although seeing that react-native-reanimated 2.0.0 should support web, I thought it might…

expo: 41.0.1 react: 16.13.1 react-native: 0.63 react-native-redash: 16.0.11 react-native-reanimated: 2.1.0 react-native-web: 0.13.12

Heres a bit of boilerplate to re-create:

import React from 'react';
import { Button, View } from 'react-native';
import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
import { ReText } from 'react-native-redash';

const Test = () => {
  let foo = useSharedValue(0);
  const count = useDerivedValue(() => { return foo.value.toString() });

  const incrementCounter = () => {
    foo.value++;
    console.log(foo.value);
  }
  
  return (
    <View>
          <ReText text={count} />
          <Button title={"Counter"} onPress={incrementCounter}/>
    </View>
  );
}

export default Test;

Behaviour on Android: works as expected, counter increments on press.

Behaviour on Web: Count doesn’t update on the ui, although the state is still mutated and logged to the console.

[nandorojo]

A web-compatible ReText component can be found here: https://github.com/coinjar/react-native-wagmi-charts/blob/master/src/components/AnimatedText.tsx

[nandorojo]

In case you need a hack, the snack I linked to above does solve it, using setNativeProps.