Skip to content
Beautiful backgrounds shapes to React Native based in flex
JavaScript HTML
Branch: master
Clone or download

Latest commit

Latest commit ca447c7 Jan 26, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Updated Jan 26, 2020
.gitignore Updated Jan 26, 2020
LICENSE Initial commit Jan 26, 2020
README.md Updated Jan 26, 2020
package.json Updated Jan 26, 2020
webpack.config.js Updated Jan 26, 2020
yarn.lock Updated Jan 26, 2020

README.md

react-native-background-shapes

NPM version GitHub license

Beautiful backgrounds shapes to React Native based in flex

Examples

Installation

Yarn

yarn add react-native-background-shapes

Npm

npm i react-native-background-shapes

Usage

import react from "react";
import {View} from "react-native";
import {Shapes} from "react-native-background-shapes";

export const example () => {
return (
    <View>
        <Shapes />
    </View>
    );
}

Options

// Basic
 <Shapes />
// Advance
 <Shapes
    primaryColor="#416DF8"
    secondaryColor="#2F53D5"
    height={3}
    borderRadius={20}
    figures={[
      {name: 'circle', position: 'center', size: 60},
      {name: 'donut', position: 'flex-start', axis: 'top', size: 80},
      {name: 'circle', position: 'center', axis: 'right', size: 100},
    ]}
 />
  • primaryColor: String, HEX color.
  • secondaryColor: String, HEX color.
  • height: Number, 1 = full screen, default (3.5)
  • borderRadius: Number, default 30
  • figures: Array
    • name: String = "circle","donut, "triangle", "diamondNarrow", "cutDiamond"
    • position: String = "flex-start", "center, "flex-end", "baseline", "stretch"
    • axis: String = "top", "right, "bottom", "left"

License

MIT © Leonardo Rico

You can’t perform that action at this time.