{"id":15641252,"url":"https://github.com/bytesleo/react-native-background-shapes","last_synced_at":"2025-04-19T11:56:14.405Z","repository":{"id":38921874,"uuid":"236264719","full_name":"bytesleo/react-native-background-shapes","owner":"bytesleo","description":"Backgrounds shapes to React Native based in flex (Android + IOS)","archived":false,"fork":false,"pushed_at":"2023-01-06T02:28:27.000Z","size":3406,"stargazers_count":72,"open_issues_count":18,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T23:12:27.313Z","etag":null,"topics":["flex","react","react-background","react-native","react-native-component","react-native-shapes","shapes"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bytesleo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-26T04:03:12.000Z","updated_at":"2024-03-25T05:56:31.000Z","dependencies_parsed_at":"2023-02-05T03:01:54.101Z","dependency_job_id":null,"html_url":"https://github.com/bytesleo/react-native-background-shapes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesleo%2Freact-native-background-shapes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesleo%2Freact-native-background-shapes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesleo%2Freact-native-background-shapes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesleo%2Freact-native-background-shapes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytesleo","download_url":"https://codeload.github.com/bytesleo/react-native-background-shapes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249319592,"owners_count":21250578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flex","react","react-background","react-native","react-native-component","react-native-shapes","shapes"],"created_at":"2024-10-03T11:42:00.357Z","updated_at":"2025-04-19T11:56:14.365Z","avatar_url":"https://github.com/bytesleo.png","language":"JavaScript","readme":"# react-native-background-shapes\n\n[![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)\n\n\u003e Beautiful backgrounds shapes to React Native based in flex (Android + IOS)\n\n### Examples\n\n\u003cp align=\"center\"\u003e\n\u003cimg  src=\"https://imgur.com/Dzkd0zB.jpg\" width=\"400\" \u003e\n\u003cimg  src=\"https://imgur.com/i7YfOxK.jpg\" width=\"400\" \u003e\n\u003cimg  src=\"https://imgur.com/m2f78nl.jpg\" width=\"400\" \u003e\n\u003cimg src=\"https://imgur.com/dNwUJV2.jpg\" width=\"400\" \u003e\n\u003c/p\u003e\n\n### Installation\n\n**Yarn**\n\n```bash\nyarn add react-native-background-shapes\n```\n\n**Npm**\n\n```bash\nnpm i react-native-background-shapes\n```\n\n### Basic usage\n\n```javascript\nimport react from \"react\";\nimport {View} from \"react-native\";\nimport {Shapes} from \"react-native-background-shapes\";\n\nexport const example () =\u003e {\nreturn (\n    \u003cView\u003e\n        \u003cShapes /\u003e\n    \u003c/View\u003e\n    );\n}\n```\n\n### Options\n\n```javascript\n// Advance\n \u003cShapes\n    primaryColor=\"#416DF8\"\n    secondaryColor=\"#2F53D5\"\n    height={3}\n    borderRadius={20}\n    figures={[\n      {name: 'circle', position: 'center', size: 60},\n      {name: 'donut', position: 'flex-start', axis: 'top', size: 80},\n      {name: 'circle', position: 'center', axis: 'right', size: 100},\n    ]}\n /\u003e\n```\n\n- **primaryColor**: String, HEX color.\n- **secondaryColor**: String, HEX color.\n- **height**: Number, 1 = full screen, default (3.5)\n- **borderRadius**: Number, default 30\n- **figures**: Array\n- - **name**: String = \"circle\",\"donut, \"triangle\", \"diamondNarrow\", \"cutDiamond\"\n- - **position**: String = \"flex-start\", \"center, \"flex-end\", \"baseline\", \"stretch\"\n- - **axis**: String = \"top\", \"right, \"bottom\", \"left\"\n\n## License\n\nMIT © [Leonardo Rico](https://github.com/kevoj/react-native-background-shapes/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytesleo%2Freact-native-background-shapes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytesleo%2Freact-native-background-shapes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytesleo%2Freact-native-background-shapes/lists"}