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.
Currently react-native-figures supports the following shape types:
- Circle
- Donut
- Square
- DiamondNarrow
- CutDiamond
- Triangle
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>
);
};
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 |
MIT © Devon (tek256)