{"id":18369912,"url":"https://github.com/cawfree/react-native-label","last_synced_at":"2025-08-25T01:40:25.642Z","repository":{"id":40764269,"uuid":"272658057","full_name":"cawfree/react-native-label","owner":"cawfree","description":"🥇Apply a label to anything in React Native.","archived":false,"fork":false,"pushed_at":"2023-01-06T09:04:44.000Z","size":1405,"stargazers_count":23,"open_issues_count":15,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-23T12:44:37.081Z","etag":null,"topics":["banner","label","react-native","ui"],"latest_commit_sha":null,"homepage":null,"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/cawfree.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-06-16T08:52:58.000Z","updated_at":"2022-10-18T04:16:34.000Z","dependencies_parsed_at":"2023-02-05T18:32:08.928Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-label","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cawfree/react-native-label","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-label","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-label/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-label/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-label/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-label/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-label/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263677006,"owners_count":23494615,"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":["banner","label","react-native","ui"],"created_at":"2024-11-05T23:33:34.433Z","updated_at":"2025-07-05T03:35:32.779Z","avatar_url":"https://github.com/cawfree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-label\n🥇Apply a label to anything in React Native. Supports [**Android**](), [**iOS**]() and [**Web**]().\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://twitter.com/cawfree\"\u003e\n    \u003cimg src=\"./public/logo.png\" width=\"486\" height=\"746\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n  - [1. Do I need react-native-label?](#do-i-need)\n  - [2. Getting Started](#getting-started)\n    - [2.1 Example](#example)\n  - [3. Props and Documentation](#props)\n  - [4. License](#license)\n\n## \u003ca name=\"do-i-need\"\u003e\u003c/a\u003e1. 🤔 Do I need `react-native-label`?\n\nLet's answer your question with a slightly different, much more biased set of questions:\n\n  - Do you want fully customizable labels?\n  - Do you want to embed stateful components in your labels?\n  - Do you want to label your labels?\n  - Do you want to label your label's labels?\n\nIf you have answered **any or none** of the above, then this repository is for _you_!\n\n## \u003ca name=\"getting-started\"\u003e\u003c/a\u003e2. 🚀 Getting Started\n\nUsing [`npm`]():\n\n```bash\nnpm install --save react-native-label\n```\n\nUsing [`yarn`]():\n\n```bash\nyarn add react-native-label\n```\n\nThat's all.\n\n### \u003ca name=\"example\"\u003e\u003c/a\u003e2.1 ✍️ Example\n\nA [**React Native Label**](https://github.com/cawfree/react-native-label) can be applied to any component you want. You can pass either a text `String` to the `title` prop, or provide a custom component to render. \n\n```javascript\nimport React from \"react\";\nimport {View} from \"react-native\";\nimport Label, {Orientation} from \"react-native-label\";\n\nexport default () =\u003e (\n  \u003cLabel\n    orientation={Orientation.TOP_RIGHT}\n    containerStyle={{\n      width: 300,\n      height: 300,\n    }}\n    title=\"Hello, world!\"\n    color=\"orange\"\n    distance={250}\n  \u003e\n    \u003cView\n      style={{\n        flex: 1,\n        backgroundColor: \"green\",\n      }}\n    /\u003e\n  \u003c/Label\u003e\n);\n```\n\nThis code yields the following result:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/result.png\" width=\"284\" height=\"291\"/\u003e\n\u003c/p\u003e\n\n\nCheck out the complete list of available [**Prop Types**](#props) in the section below.\n\n## \u003ca name=\"props\"\u003e\u003c/a\u003e3. 📜 Props and Documentation\n\n| Prop Name      | Type                      | Initial Value                                                                                                    | Description                                                    |\n|----------------|---------------------------|------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|\n| orientation    | `Orientation`             | `Orientation.TOP_RIGHT`                                                                                          | Where to position the label over the nested view.              |\n| distance       | `Number`                  | `100`                                                                                                            | How far to render the label from the corner.                   |\n| containerStyle | `shape({})`               | `{flex:1}`                                                                                                             | How to style the container of the parent.                      |\n| style          | `shape({})`               | `{fontSize: 30, color: 'white', textAlign: 'center', alignItems: 'center', justifyContent: 'center'}`            | How to style the label's `title`.                              |\n| title          | `String \\|\\| ElementType` | `undefined`                                                                                                      | The label child. This is either a string or a React Component. |\n| color          | `String`                  | `\"#C2185B\"`                                                                                                      | The color of the label.                                        |\n| ratio          | `Number`                  | `0.8`                                                                                                            | The ratio of label point height to banner height.              |\n| extent         | `Number`                  | `0.5`                                                                                                            | The level of stretching to apply to the label ribbons.         |\n| shadowProps    | `shape({})`               | `{shadowColor: \"#000\", shadowOffset: { width: 0, height: 12, }, shadowOpacity: 0.2, shadowRadius: 8, elevation: 24}` | The style of the label's shadows.                              |\n\n## \u003ca name=\"license\"\u003e\u003c/a\u003e4. ✌️ License\n[**MIT**](./LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-label","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-label","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-label/lists"}