Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cawfree/react-native-label
🥇Apply a label to anything in React Native.
https://github.com/cawfree/react-native-label
banner label react-native ui
Last synced: 3 months ago
JSON representation
🥇Apply a label to anything in React Native.
- Host: GitHub
- URL: https://github.com/cawfree/react-native-label
- Owner: cawfree
- License: mit
- Created: 2020-06-16T08:52:58.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:04:44.000Z (about 2 years ago)
- Last Synced: 2024-05-01T14:49:29.552Z (9 months ago)
- Topics: banner, label, react-native, ui
- Language: JavaScript
- Size: 1.34 MB
- Stars: 23
- Watchers: 2
- Forks: 4
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-label
🥇Apply a label to anything in React Native. Supports [**Android**](), [**iOS**]() and [**Web**]().
## Table of Contents
- [1. Do I need react-native-label?](#do-i-need)
- [2. Getting Started](#getting-started)
- [2.1 Example](#example)
- [3. Props and Documentation](#props)
- [4. License](#license)
## 1. 🤔 Do I need `react-native-label`?
Let's answer your question with a slightly different, much more biased set of questions:
- Do you want fully customizable labels?
- Do you want to embed stateful components in your labels?
- Do you want to label your labels?
- Do you want to label your label's labels?
If you have answered **any or none** of the above, then this repository is for _you_!
Using [`npm`]():
```bash
npm install --save react-native-label
```
Using [`yarn`]():
```bash
yarn add react-native-label
```
That's all.
A [**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.
```javascript
import React from "react";
import {View} from "react-native";
import Label, {Orientation} from "react-native-label";
export default () => (
);
```
This code yields the following result:
Check out the complete list of available [**Prop Types**](#props) in the section below.
## 3. 📜 Props and Documentation
| Prop Name | Type | Initial Value | Description |
|----------------|---------------------------|------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|
| orientation | `Orientation` | `Orientation.TOP_RIGHT` | Where to position the label over the nested view. |
| distance | `Number` | `100` | How far to render the label from the corner. |
| containerStyle | `shape({})` | `{flex:1}` | How to style the container of the parent. |
| style | `shape({})` | `{fontSize: 30, color: 'white', textAlign: 'center', alignItems: 'center', justifyContent: 'center'}` | How to style the label's `title`. |
| title | `String \|\| ElementType` | `undefined` | The label child. This is either a string or a React Component. |
| color | `String` | `"#C2185B"` | The color of the label. |
| ratio | `Number` | `0.8` | The ratio of label point height to banner height. |
| extent | `Number` | `0.5` | The level of stretching to apply to the label ribbons. |
| shadowProps | `shape({})` | `{shadowColor: "#000", shadowOffset: { width: 0, height: 12, }, shadowOpacity: 0.2, shadowRadius: 8, elevation: 24}` | The style of the label's shadows. |