Neurological Phenomenon Multiplexer

    @nghinv/react-native-badge
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    @nghinv/react-native-badge

    React Native Badge Library


    CircleCI Version MIT License All Contributors PRs Welcome

    Installation

    yarn add @nghinv/react-native-badge

    or

    npm install @nghinv/react-native-badge

    Usage

    import React from 'react';
    import { View, StyleSheet } from 'react-native';
    import Badge from '@nghinv/react-native-badge';
    
    function App() {
      return (
        <View style={styles.container}>
          <Badge 
            backgroundColor='green' 
            containerStyle={styles.badge} 
            label="3" 
            size={20} 
            labelFormatterLimit={2} 
          />
          <Badge 
            backgroundColor='orange' 
            containerStyle={styles.badge} size='pimpleSmall' 
            labelFormatterLimit={2} 
          />
          <Badge 
            containerStyle={styles.badge} 
            label="1234" 
            size='large' 
            labelFormatterLimit={2} 
          />
          <Badge 
            containerStyle={styles.badge} 
            label="9999" 
            size={20} 
            labelFormatterLimit={3} 
          />
          <Badge 
            containerStyle={styles.badge} 
            label="84" 
            size={20} 
            labelFormatterLimit={2} 
          />
          <Badge 
            backgroundColor='tomato' 
            containerStyle={styles.badge} 
            label="1234" 
            size={20} 
            labelFormatterLimit={4} 
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      badge: {
        margin: 16,
      },
    });
    
    export default App;

    Property

    Property Type Default Description
    label string undefined
    size BadgeSizes | number 20
    labelColor string white
    backgroundColor string #f44336
    containerStyle StyleProp<ViewStyle>
    labelStyle TextStyle undefined
    labelFormatterLimit 0 | 1 | 2 | 3 | 4 undefined
    labelProps TextProps undefined

    BadgeSizes = pimpleSmall | pimpleBig | pimpleHuge | small | default | large


    Credits

    Install

    npm i @nghinv/react-native-badge

    DownloadsWeekly Downloads

    3

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    29.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • nghinv