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?
• 2. Getting Started
  • 2.1 Example
• 3. Props and Documentation
• 4. 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!

2. 🚀 Getting Started

Using npm:

npm install --save react-native-label

Using yarn:

yarn add react-native-label

That's all.

2.1 ✍️ Example

A 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.

import React from "react";
import {View} from "react-native";
import Label, {Orientation} from "react-native-label";

export default () => (
  <Label
    orientation={Orientation.TOP_RIGHT}
    containerStyle={{
      width: 300,
      height: 300,
    }}
    title="Hello, world!"
    color="orange"
    distance={250}
  >
    <View
      style={{
        flex: 1,
        backgroundColor: "green",
      }}
    />
  </Label>
);

This code yields the following result:

Check out the complete list of available Prop Types 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. |

4. ✌️ License

MIT