React-native-label NPM

react-native-label

🥇Apply a label to anything in React Native. Supports Android, iOS and Web.

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.