React Native Triangle

Draw geometrically accurate triangles in React Native

Supports equilateral, isosceles, scalene & right-angled triangles

Built on top of the inbuilt <View/> component

Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨

• 📦 Installation
• ℹ️ Usage
• 💡 Examples

Installation

#npm
npm install --save @react-native-toolkit/triangle

#yarn
yarn add @react-native-toolkit/triangle

Motivation

Triangles are an important part of user interfaces and I needed full control over the triangle dimensions. I initially tried react-native-triangle but I had very less control over the triangle properties. Especially scalene & isosceles triangles.

This library is focused on providing an easy API to create all possible triangles based on the CSS Triangle Generator

Usage

By default, the Triangle component renders an equilateral triangle

import React from "react";
import Triangle from "@react-native-toolkit/triangle";

const App = () => {
  return <Triangle mode={"top"} base={50} color={"red"} />;
};

This will render an equilateral triangle of color "red" & side - 50

Properties

Equilateral Triangle - All three sides equal

type?: "equilateral"

Type of the triangle. Optional for equilateral triangle

mode: "top" | "bottom" | "left" | "right"

Direction in which the triangle is facing

base: number

Length of the base & since it's equilateral all the sides have the length of the base

color: string

Color of the triangle

Isosceles Triangle - Two sides of the triangle are equal

type: "isosceles"

Type of the triangle.

mode: "top" | "bottom" | "left" | "right"

Direction in which the triangle is facing

base: number

Length of the base

height: number

Height of the triangle from base to the peak. The two connecting sides will have the equal length.

color: string

Color of the triangle

Scalene Triangle - All three sides of the triangle have different lengths

type: "scalene"

Type of the triangle.

mode: "top" | "bottom" | "left" | "right"

Direction in which the triangle is facing

height: number

Height of the triangle from base to the peak.

left: number

Length of the side on the left of the line representing height of the triangle.

right: number

Length of the side on the right of the line representing height of the triangle.

color: string

Color of the triangle

Right Angled Triangle - A triangle with angle of 90° on one of it's sides

type: "rightAngle"

Type of the triangle.

mode: "top-left" | "top-right" | "bottom-left" | "bottom-right"

Direction in which the triangle is facing

base: number

Length of the base

height: number

Height of the triangle from base to the peak. The two connecting sides will have the equal length.

color: string

Color of the triangle

ViewProps

All existing ViewProps are supported by this component as it extends the <View/> component. However, it cannot have any children as creating a triangle requires height & width of the View to be 0.

Examples

• App Containing the storybook
• Web version of the storybook app(might not work as good as the app version)
• CodeSandbox example

Licenses

MIT © DaniAkash