Chartjs-About the charts in react-native

0👍

You can render shapes in React Native using React-Native ART

Import { Art } from 'react-native';
const { Shape, Group Surface } = ART;

You can create shapes using ‘d3-shape’ npm package https://github.com/d3/d3-shape/blob/master/README.md .

D3-shape will give you the ‘path’. for example:

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2);

When you execute this function it will return a long string of letters and numbers which can be used to draw your shape.

Simply, put it into React-Native ART’s shape like so:

render() {
    return (
        <Surface>
           <Group>
              <Shape d={arc()} /.
           </Group>
        </Surface>
     )
   }

Also this is a good article: https://hswolff.com/blog/react-native-art-and-d3/

Leave a comment