React Native support about react-activity-rings

[JonasDoesThings]

Hey! @karwan-ali could you please share what errors / problems you encounter when trying to use this component with React Native?

For testing I've just created an expo project and it worked for me. Please share any problems / logs / errors that you encountered

[karwan-ali]

Hello @JonasDoesThings,

Could you provide me the example that is working for you maybe?

This is my code:

const MenuScreen = () => {
  const navigation = useNavigation<CustomerScreenNavigationProd>();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  return (
    <SafeAreaView style={tw.style('bg-defaultBg w-full h-full')}>
      <ScrollView>
        <ActivityRings
          rings={[
            { filledPercentage: 0.5, color: '#fa0e5a' },
            { filledPercentage: 0.75, color: '#afff02' },
            { filledPercentage: 0.25, color: '#00fff8' },
          ]}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

See attached image on what the error is.

[JonasDoesThings]

Hey, I got around looking into the issue, you're right, it's broken when using react-native on non-web platforms.

The cause is the usage of the web-native component and it's descendents.

I've quickly tried forking the project and using react-native-svg as a react-native compatible SVG component, but the next roadblock I've encountered was, that this library does not support animations. It seems like you can use react-native-reanimated for these animations.

Sadly I have no expertise in react-native and currently no time for creating a supported fork, so React Native is out of scope at the current point in time :(

I will add a note into the README accordingly

[JonasDoesThings]

Currently out of scope