react-native-smart-corner-label

A smart corner label for React Native app, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.25 and newer.

Preview

Installation

npm install react-native-smart-corner-label --save

Full Demo

see ReactNativeComponentDemos

Usage

Install the package from npm with npm install react-native-smart-corner-label --save. Then, require it from your app's JavaScript files with import CornerLabel from 'react-native-smart-corner-label'.

import React, {
  Component,
} from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text,
} from 'react-native'

import CornerLabel from 'react-native-smart-corner-label'

import image_shopping from '../images/shopping.png'

export default class CornerLabelDemo extends Component {

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff',}}>
        <View style={{ overflow: 'hidden', //don't forget to set this
                       justifyContent: 'center', alignItems: 'center', height: 100, width: 100,
                       borderWidth: StyleSheet.hairlineWidth, borderColor: '#eee', margin: 5}}>
          <Image source={image_shopping} style={{width: 30, height: 30, marginHorizontal: 10, marginBottom: 10,}}/>
          <Text>shopping</Text>
          <CornerLabel
            cornerRadius={36}
            style={{backgroundColor: 'red', }}
            textStyle={{fontSize: 10, color: '#fff', }}>
            New
          </CornerLabel>
        </View>
        <View style={{ overflow: 'hidden', //don't forget to set this
                       justifyContent: 'center', alignItems: 'center', height: 100, width: 100,
                       borderWidth: StyleSheet.hairlineWidth, borderColor: '#eee', margin: 5}}>
          <Image source={image_shopping} style={{width: 30, height: 30, marginHorizontal: 10, marginBottom: 10,}}/>
          <Text>购物</Text>
          <CornerLabel
            alignment={'right'}
            cornerRadius={36}
            style={{backgroundColor: 'red', }}
            textStyle={{fontSize: 12, color: '#fff', }}>
            新
          </CornerLabel>
        </View>
        <View style={{ overflow: 'hidden', //don't forget to set this
                       justifyContent: 'center', alignItems: 'center', height: 100, width: 100,
                       borderWidth: StyleSheet.hairlineWidth, borderColor: '#eee', margin: 5}}>
          <Image source={image_shopping} style={{width: 30, height: 30, marginHorizontal: 10, marginBottom: 10,}}/>
          <Text>shopping</Text>
          <CornerLabel
            cornerRadius={54}
            style={{backgroundColor: 'red', height: 24,}}
            textStyle={{color: '#fff', }}>
            30% off
          </CornerLabel>
        </View>
        <View style={{ overflow: 'hidden', //don't forget to set this
                       justifyContent: 'center', alignItems: 'center', height: 100, width: 100,
                       borderWidth: StyleSheet.hairlineWidth, borderColor: '#eee', margin: 5}}>
          <Image source={image_shopping} style={{width: 30, height: 30, marginHorizontal: 10, marginBottom: 10,}}/>
          <Text>购物</Text>
          <CornerLabel
            cornerRadius={54}
            alignment={'right'}
            style={{backgroundColor: 'red', height: 24,}}
            textStyle={{color: '#fff', fontSize: 12,}}>
            7折优惠
          </CornerLabel>
        </View>
      </View>
    )
  }

}

Props

Prop	Type	Optional	Default	Description
alignment	string	Yes	'left'	determines the position of the corner label(keep left or right).
cornerRadius	number	No		determines the value of the corner's radius.
style	style	Yes		see react-native documents
textStyle	style	Yes		see react-native documents