react-native-figures
a shape library for react-native
Made by Devon with love.

Examples

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

Name	Options	Note
type	Square, Circle, Donut, DiamondNarrow, CutDiamond, Triangle	Only used in <Shapes/> container figure objects
size	Number	Is scale 0.0-1.0 of screen size if scaling is enabled
color	Color	Color per specific shape
figureColor	Color	Default color for figures
figures	Lits of figures (js objects) i.e [{ type: "circle" ...},{type: "square" ...}]	Only used in <Shapes/> container
offsetX	Numbered offset (i.e 50, 1, -100)	Is scale 0.0-1.0 of screen width if scalingOffsets is enabled
offsetY	Numbered offset (i.e 51, -49, 99)	Is scale 0.0-1.0 of screen height if scalingOffsets is enabled
rotation	Numbered rotation in Degrees
borderRadius	Numbered size for border radius	Only works with Square
opacity	Float between 0 and 1 (i.e 0.4)
scaling	true/false	Enable size to be considered a scale of 0.0-1.0 of screen size. Default: false
scalingOffsets	true/false	Enable offsets to be considered in a scale of 0.0-1.0 of screen size. Default: false
sizeBasedOffsets	true/false	Enabled offsets based on the size of the figure. Default: false

License

MIT © Devon (tek256)