react-native-figures v0.1.2

About

react-native-figures is an attempt to streamline the implementation of various shapes for quick and easy usage. It offers an option to pass an array of figures into a container or to just manage individual shapes yourself.

Shapes

Currently react-native-figures supports the following shape types:

- Circle 
- Donut
- Square
- DiamondNarrow
- CutDiamond
- Triangle

Examples

Shapes Container style:

import React from "react";
import { View } from "react-native";
import { Shapes } from "react-native-figures";

export const Example = () => {
  return (
    <View>
      <Shapes
        figureColor="red"
        figures={[
          {
            type: "circle",
            x: "50%",
            y: "50%",
            offsetX: -100,
            offsetY: -100,
            size: 200,
          },
          {
            type: "donut",
            color: "#1F85DE",
            x: "50%",
            y: "50%",
            offsetX: 100,
            offsetY: 75,
            size: 200,
          },
          {
            type: "triangle",
            size: 100,
            x: "10%",
            y: "15%",
            rotation: 10,
          },
        ]}
      />
    </View>
  );
};

Individual Shape Components:

import React from "react";
import { View } from "react-native";
import { Circle, Triangle, DiamondNarrow } from "react-native-figures";

export const Example = () => {
  return (
    <View>
      <Circle x="50%" y="50%" offsetX={-100} offsetY={-100} size={200} />
      <Triangle x="10%" y="15%" rotation={10} />
      <DiamondNarrow x="15%" y="45%" rotation={36} />
    </View>
  );
};

Props / Options

License

MIT © Devon (tek256)