Ring Visualization Of Data In React Native – Activity Rings

Description:

A library that provides customizable ring visualization of data, and you can also enable legends for chart representation.

Install & Import:

# Yarn
$ yarn add react-native-activity-rings
# NPM
$ npm i react-native-activity-rings --save

import ActivityRings from "react-native-activity-rings";

Basic Usage:

const BasicExample = () => {
      const activityData = [ 
        { value: 0.8 }, 
        { value: 0.7 }, 
        { value: 0.5 }
      ];
      const activityConfig = { 
        width: 250,  
        height: 250
      };
      return (
        <View>
          <ActivityRings data={activityData} config={activityConfig} /> 
        </View>
      );
}

All possible configs:

const activityConfig = { 
      width: 250,  
      height: 250,
      radius: 32,
      ringSize: 16
};

Preview: