├── src
├── lib
│ ├── index.js
│ └── Shapes
│ │ └── index.js
└── docs
│ ├── index.js
│ └── index.html
├── .babelrc
├── webpack.config.js
├── LICENSE
├── .gitignore
├── package.json
└── README.md
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | export { Shapes } from "./Shapes";
2 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["module:metro-react-native-babel-preset"]
3 | }
--------------------------------------------------------------------------------
/src/docs/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { Shapes } from "../lib/Shapes";
4 |
5 | const App = () => (
6 |
7 |
8 |
9 | );
10 |
11 | ReactDOM.render(, document.getElementById("root"));
12 |
--------------------------------------------------------------------------------
/src/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | my UI
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const nodeExternals = require("webpack-node-externals");
3 |
4 | module.exports = {
5 | entry: path.resolve(__dirname, "./src/lib/index.js"),
6 | output: {
7 | path: path.resolve(__dirname, "./dist/lib"),
8 | filename: "index.js",
9 | library: "",
10 | libraryTarget: "commonjs"
11 | },
12 | externals: [nodeExternals()],
13 | module: {
14 | rules: [
15 | {
16 | test: /\.js$/,
17 | exclude: /(node_modules|bower_components)/,
18 | loader: "babel-loader",
19 | options: {
20 | presets: ["@babel/preset-env", "@babel/preset-react"]
21 | }
22 | },
23 | {
24 | test: /\.css$/,
25 | use: ["style-loader", "css-loader"]
26 | }
27 | ]
28 | }
29 | };
30 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 leonardo Rico
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # yarn log
58 | .yarn-error.log
59 |
60 | # dotenv environment variables file
61 | .env
62 |
63 | # production
64 | /build
65 | /dist
66 |
67 | # cache
68 | .cache/
69 |
70 | # editor
71 | .vscode
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-background-shapes",
3 | "version": "1.0.7",
4 | "description": "Beautiful backgrounds shapes to React Native based in flex (Android + IOS)",
5 | "main": "dist/lib/index.js",
6 | "scripts": {
7 | "start": "./node_modules/.bin/parcel src/docs/index.html",
8 | "build": "./node_modules/.bin/webpack --mode=production",
9 | "build:docs": "./node_modules/.bin/parcel build src/docs/index.js -d ./dist/docs && cp src/docs/index.html dist/docs/index.html"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/kevoj/react-native-background-shapes.git"
14 | },
15 | "keywords": [
16 | "react",
17 | "react-native",
18 | "shapes",
19 | "react-shapes",
20 | "background",
21 | "react-background",
22 | "flex",
23 | "background-flex",
24 | "shapes-flex"
25 | ],
26 | "author": "https://github.com/kevoj",
27 | "license": "MIT",
28 | "peerDependencies": {
29 | "react": "^16.13.1",
30 | "react-dom": "^16.13.1",
31 | "react-native": "^0.62.2"
32 | },
33 | "devDependencies": {
34 | "@babel/core": "^7.10.2",
35 | "@babel/preset-env": "^7.10.2",
36 | "@babel/preset-react": "^7.10.1",
37 | "babel-loader": "^8.1.0",
38 | "babel-plugin-transform-async-to-generator": "^6.24.1",
39 | "babel-preset-env": "^1.7.0",
40 | "babel-preset-react": "^6.24.1",
41 | "babel-preset-stage-2": "^6.24.1",
42 | "metro-react-native-babel-preset": "^0.59.0",
43 | "parcel-bundler": "^1.12.4",
44 | "webpack": "^4.43.0",
45 | "webpack-cli": "^3.3.11",
46 | "webpack-node-externals": "^1.7.2"
47 | },
48 | "dependencies": {
49 | "react": "16.11.0",
50 | "react-dom": "^16.13.1",
51 | "react-native": "^0.62.2"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native-background-shapes
2 |
3 | [](https://npmjs.org/package/react-native-backgroud-shapes) [](https://raw.githubusercontent.com/kevoj/react-native-backgroud-shapes/master/LICENSE)
4 |
5 | > Beautiful backgrounds shapes to React Native based in flex (Android + IOS)
6 |
7 | ### Examples
8 |
9 |
10 | 
11 | 
12 | 
13 | 
14 |
15 |
16 | ### Installation
17 |
18 | **Yarn**
19 |
20 | ```bash
21 | yarn add react-native-background-shapes
22 | ```
23 |
24 | **Npm**
25 |
26 | ```bash
27 | npm i react-native-background-shapes
28 | ```
29 |
30 | ### Basic usage
31 |
32 | ```javascript
33 | import react from "react";
34 | import {View} from "react-native";
35 | import {Shapes} from "react-native-background-shapes";
36 |
37 | export const example () => {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | ```
45 |
46 | ### Options
47 |
48 | ```javascript
49 | // Advance
50 |
61 | ```
62 |
63 | - **primaryColor**: String, HEX color.
64 | - **secondaryColor**: String, HEX color.
65 | - **height**: Number, 1 = full screen, default (3.5)
66 | - **borderRadius**: Number, default 30
67 | - **figures**: Array
68 | - - **name**: String = "circle","donut, "triangle", "diamondNarrow", "cutDiamond"
69 | - - **position**: String = "flex-start", "center, "flex-end", "baseline", "stretch"
70 | - - **axis**: String = "top", "right, "bottom", "left"
71 |
72 | ## License
73 |
74 | MIT © [Leonardo Rico](https://github.com/kevoj/react-native-background-shapes/blob/master/LICENSE)
75 |
--------------------------------------------------------------------------------
/src/lib/Shapes/index.js:
--------------------------------------------------------------------------------
1 | // Libs
2 | import React from "react";
3 | import { StyleSheet, Dimensions, View } from "react-native";
4 |
5 | const Circle = ({ size, color, position }) => {
6 | let style = {
7 | wrapper: {
8 | flexDirection: "row",
9 | ...position
10 | },
11 | circle: {
12 | width: size,
13 | height: size,
14 | borderRadius: size / 2,
15 | backgroundColor: color
16 | }
17 | };
18 | return (
19 |
20 |
21 |
22 | );
23 | };
24 |
25 | const Donut = ({ size, color, position }) => {
26 | let style = {
27 | wrapper: {
28 | flexDirection: "row",
29 | ...position
30 | },
31 | donut: {
32 | width: size,
33 | height: size,
34 | borderRadius: size / 2,
35 | borderWidth: size / 4,
36 | borderColor: color
37 | }
38 | };
39 | return (
40 |
41 |
42 |
43 | );
44 | };
45 |
46 | const Triangle = ({ size, color, position }) => {
47 | let style = {
48 | wrapper: {
49 | flexDirection: "row",
50 | ...position
51 | },
52 | triangle: {
53 | width: 0,
54 | height: 0,
55 | backgroundColor: "transparent",
56 | borderStyle: "solid",
57 | borderLeftWidth: size / 2,
58 | borderRightWidth: size / 2,
59 | borderBottomWidth: size,
60 | borderLeftColor: "transparent",
61 | borderRightColor: "transparent",
62 | borderBottomColor: color,
63 | transform: [{ rotate: "180deg" }]
64 | }
65 | };
66 | return (
67 |
68 |
69 |
70 | );
71 | };
72 |
73 | const DiamondNarrow = ({ size, color, position }) => {
74 | let style = {
75 | wrapper: {
76 | flexDirection: "row",
77 | ...position
78 | },
79 | diamondNarrow: {},
80 | diamondNarrowTop: {
81 | width: 0,
82 | height: 0,
83 | borderTopWidth: 0,
84 | borderTopColor: "transparent",
85 | borderLeftColor: "transparent",
86 | borderLeftWidth: size / 2,
87 | borderRightColor: "transparent",
88 | borderRightWidth: size / 2,
89 | borderBottomColor: color,
90 | borderBottomWidth: size / 1.42
91 | },
92 | diamondNarrowBottom: {
93 | width: 0,
94 | height: 0,
95 | borderTopWidth: size / 1.42,
96 | borderTopColor: color,
97 | borderLeftColor: "transparent",
98 | borderLeftWidth: size / 2,
99 | borderRightColor: "transparent",
100 | borderRightWidth: size / 2,
101 | borderBottomColor: "transparent",
102 | borderBottomWidth: 0
103 | }
104 | };
105 | return (
106 |
107 |
108 |
109 |
110 |
111 |
112 | );
113 | };
114 |
115 | const CutDiamond = ({ size, color, position }) => {
116 | let style = {
117 | wrapper: {
118 | flexDirection: "row",
119 | ...position
120 | },
121 | cutDiamond: {},
122 | cutDiamondTop: {
123 | width: size,
124 | height: 0,
125 | borderTopWidth: 0,
126 | borderTopColor: "transparent",
127 | borderLeftColor: "transparent",
128 | borderLeftWidth: size / 4,
129 | borderRightColor: "transparent",
130 | borderRightWidth: size / 4,
131 | borderBottomColor: color,
132 | borderBottomWidth: size / 4
133 | },
134 | cutDiamondBottom: {
135 | width: 0,
136 | height: 0,
137 | borderTopWidth: size / 1.42,
138 | borderTopColor: color,
139 | borderLeftColor: "transparent",
140 | borderLeftWidth: size / 2,
141 | borderRightColor: "transparent",
142 | borderRightWidth: size / 2,
143 | borderBottomColor: "transparent",
144 | borderBottomWidth: 0
145 | }
146 | };
147 | return (
148 |
149 |
150 |
151 |
152 |
153 |
154 | );
155 | };
156 |
157 | const Shapes = ({
158 | primaryColor,
159 | secondaryColor,
160 | height,
161 | figures,
162 | borderRadius,
163 | style
164 | }) => {
165 | const config = {
166 | primaryColor: primaryColor || "#416DF8",
167 | secondaryColor: secondaryColor || "#2F53D5",
168 | height: Dimensions.get("window").height / (height || 3.5),
169 | sizefigure: 100,
170 | figures: figures || [
171 | { name: "circle", position: "center", size: 60 },
172 | { name: "donut", position: "flex-start", axis: "top", size: 80 },
173 | { name: "circle", position: "center", axis: "right", size: 100 }
174 | ],
175 | borderRadius: borderRadius !== undefined ? borderRadius : 30
176 | };
177 |
178 | const arrFigures = [];
179 | const buildFigures = () => {
180 | config.figures.forEach((e, i) => {
181 | let position = {
182 | alignItems: e.position
183 | };
184 |
185 | const sizefigure = e.size || config.sizefigure;
186 |
187 | switch (e.axis) {
188 | case "left":
189 | position.left = -sizefigure / 2;
190 | break;
191 | case "right":
192 | position.right = -sizefigure / 2;
193 | break;
194 | case "top":
195 | position.top = -sizefigure / 2;
196 | break;
197 | case "bottom":
198 | position.bottom = -sizefigure / 2;
199 | break;
200 | default:
201 | break;
202 | }
203 |
204 | if (e.name === "circle") {
205 | arrFigures.push(
206 |
212 | );
213 | }
214 | if (e.name === "donut") {
215 | arrFigures.push(
216 |
222 | );
223 | }
224 | if (e.name === "triangle") {
225 | arrFigures.push(
226 |
232 | );
233 | }
234 | if (e.name === "diamondNarrow") {
235 | arrFigures.push(
236 |
242 | );
243 | }
244 | if (e.name === "cutDiamond") {
245 | arrFigures.push(
246 |
252 | );
253 | }
254 | });
255 |
256 | return arrFigures;
257 | };
258 |
259 | return (
260 |
270 | <>{buildFigures()}
271 |
272 | );
273 | };
274 |
275 | const styles = StyleSheet.create({
276 | wrapper: {
277 | position: "absolute",
278 | top: 0,
279 | left: 0,
280 | right: 0,
281 | bottom: 0,
282 | flex: 1,
283 | flexDirection: "row",
284 | justifyContent: "space-between"
285 | }
286 | });
287 |
288 | export { Shapes };
289 |
--------------------------------------------------------------------------------