Updated

.gitignore

@@ -0,0 +1,71 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http:https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http:https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# yarn log
+.yarn-error.log
+
+# dotenv environment variables file
+.env
+
+# production
+/build
+/dist
+
+# cache
+.cache/
+
+# editor
+.vscode

README.md

@@ -0,0 +1,66 @@
+
+# react-native-background-shapes
+
+[![NPM version](https://badge.fury.io/js/react-native-backgroud-shapes.svg)](https://npmjs.org/package/react-native-backgroud-shapes) [![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](https://raw.githubusercontent.com/kevoj/react-native-backgroud-shapes/master/LICENSE)
+
+> Beautiful backgrounds shapes to React Native based in flex
+
+### Examples
+![Imgur](https://imgur.com/Dzkd0zB.jpg)
+![Imgur](https://imgur.com/i7YfOxK.jpg)
+![Imgur](https://imgur.com/m2f78nl.jpg)
+![Imgur](https://imgur.com/dNwUJV2.jpg)
+
+### Installation
+**Yarn**
+```bash
+yarn add react-native-background-shapes
+```
+**Npm**
+```bash
+npm i react-native-background-shapes
+```
+### Usage
+```javascript
+import react from "react";
+import {View} from "react-native";
+import {Shapes} from "react-native-background-shapes";
+
+export const example () => {
+return (
+ <View>
+ <Shapes />
+ </View>
+ );
+}
+```
+### Options
+
+```javascript
+// 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](https://github.com/kevoj/react-native-background-shapes/blob/master/LICENSE)

package.json

@@ -0,0 +1,48 @@
+{
+ "name": "react-native-background-shapes",
+ "version": "0.1",
+ "description": "Beautiful backgrounds shapes to React Native based in flex",
+ "main": "dist/lib/index.js",
+ "scripts": {
+ "start": "./node_modules/.bin/parcel src/docs/index.html",
+ "build": "./node_modules/.bin/webpack --mode=production",
+ "build:docs": "./node_modules/.bin/parcel build src/docs/index.js -d ./dist/docs && cp src/docs/index.html dist/docs/index.html"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/kevoj/react-webpack-component.git"
+ },
+ "keywords": [
+ "React",
+ "Component",
+ "webpack",
+ "webpack 4",
+ "react-webpack"
+ ],
+ "author": "Leonardo Rico Guevara - https://github.com/kevoj",
+ "license": "MIT",
+ "dependencies": {
+ "react": "^16.12.0",
+ "react-dom": "^16.12.0",
+ "react-native": "^0.61.5"
+ },
+ "peerDependencies": {
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0",
+ "react-native": "^0.61.5"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.8.3",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/preset-react": "^7.8.3",
+ "babel-loader": "^8.0.0-beta",
+ "babel-plugin-transform-async-to-generator": "^6.24.1",
+ "babel-preset-env": "^1.7.0",
+ "babel-preset-react": "^6.24.1",
+ "babel-preset-stage-2": "^6.24.1",
+ "parcel-bundler": "^1.12.4",
+ "webpack": "^4.41.5",
+ "webpack-cli": "^3.3.10",
+ "webpack-node-externals": "^1.7.2"
+ }
+}

src/docs/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <title>my UI</title>
+</head>
+
+<body>
+ <noscript>
+ You need to enable JavaScript to run this app.
+ </noscript>
+ <div id="root"></div>
+ <script src="./index.js"></script>
+</body>
+
+</html>

src/docs/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Shapes } from "../lib/Shapes";
+
+const App = () => (
+ <div>
+ <Shapes />
+ </div>
+);
+
+ReactDOM.render(<App />, document.getElementById("root"));