Tags

The FlexNative Tags is part of the FlexNative and is available under the @flexnative/tags NPM package.

Dependencies

• @flexnative/theme-context
• @flexnative/icons
• @flexnative/ui-constants

Installation

You can installing FlexNative Tags packages using npm:

npm i @flexnative/tags

API

import Tag from '@flexnative/tags';

Component

Tag

Type: React.PureComponent<TagProps>

Properties

INFO

TagProps props extends ViewProps from react-native

Name	Type	Required	Default Value	Description
text	string	true	undefined	Text to display on tag.
textColor	ColorValue	false	theme.color.default	Text Color.
backgroundColor	ColorValue	false	theme.color.default	Background Color.
children	ReactNode	false	undefined	ReactNode to render custom react element.
borderWidth	BorderWidth	false	'none'	Optional borders width.
borderColor	ColorValue	false	undefined	Borders color according react-native ColorValue.
onDelete	(event: React.BaseSyntheticEvent) => void	false	undefined	If provided, will render a Delete icon button, which will call this callback on press.
size	TagSize	false	'default'	Tag Size variable.
type	TagType	false	'default'	Tag type. warning To have appearance for 'ghost', with custom color you should use hex colors.
radius	TagRadius	false	'medium'	Tag border radius.
color	TagColor	false	theme.color.default	Color by theme or a custom color according react-native ColorValue.

BorderWidth

One of 'none' | 'hairline' | 'thin' | 'base' | 'thick' | number

Name	Type	Value
none	number	0
hairline	StyleSheet.hairlineWidth	This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements.
thin	number	1
base	number	2
thick	number	3
	number	Any number value

TagSize

One of 'small' | 'default' | 'medium' | 'large'

Name	Type	Value
small	string	Text size: FONT_SIZE.small Action width: FONT_SIZE.small * 1.18 Padding Vertical: FONT_SIZE.small Padding Horizontal: BASE_SIZE * 0.75 Padding Vertical: BASE_SIZE * 0.25
default	string	Text size: FONT_SIZE.default Action width: FONT_SIZE.default * 1.18 Padding Vertical: FONT_SIZE.default Padding Horizontal: BASE_SIZE * 0.75 Padding Vertical: BASE_SIZE * 0.25
medium	string	Text size: FONT_SIZE.medium Action width: FONT_SIZE.medium * 1.18 Padding Vertical: FONT_SIZE.medium Padding Horizontal: BASE_SIZE * 0.75 Padding Vertical: BASE_SIZE * 0.25
large	string	Text size: FONT_SIZE.large Action width: FONT_SIZE.large * 1.18 Padding Vertical: FONT_SIZE.large Padding Horizontal: BASE_SIZE * 0.75 Padding Vertical: BASE_SIZE * 0.25

TagType

One of 'default' | 'text' | 'ghost'

Name	Type	Description
default	string	Property to fill in solid mode the background color of the Tag component.
ghost	string	Property to fill the background with a transparent color the Tag component.
text	string	Property to fill the background with a transparent color.

TagRadius

One of 'none' | 'small' | 'medium' | 'large' | 'full' | number

Name	Type	Value
none	number	0
small	number	2
medium	number	4
large	number	6
full	number	99999
	number	Any number value.

TagColor

One of 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | ColorValue

Name	Type	Value	Preview
			Light	Dark
background	ColorValue	theme.colors.background	#f8f8f8	#000000
default	ColorValue	theme.colors.default	#f5f5f5	#404040
card	ColorValue	theme.colors.card	#ffffff	#232323
text	ColorValue	theme.colors.text	#424242	#ffffff
border	ColorValue	theme.colors.border	#42424226	#ffffff1A
placeholder	ColorValue	theme.colors.placeholder	#0000001A	#FFFFFF1A
info	ColorValue	theme.colors.info	#3e80ed	#3e80ed
success	ColorValue	theme.colors.success	#5ec232	#5ec232
warning	ColorValue	theme.colors.warning	#ffc107	#ffc107
error	ColorValue	theme.colors.error	#d51923	#d51923
dark	ColorValue	theme.colors.dark	#424242	#424242
secondary	ColorValue	theme.colors.secondary	#666666	#5C5C5C
light	ColorValue	theme.colors.light	#ebebeb	#ebebeb
primary	ColorValue	theme.colors.primary	#ff6358	#ff6358
	ColorValue	Any ColorValue chosen by developer.

Usecase Examples

The following example demonstrates the FlexNative Tags in action.

Colors

Preview

primary

secondary

success

info

warning

error

default

dark

light

crimson

#ed143d

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 22:06:32
 * @ Description: Examples of Tag component with colors.
 */

import React from 'react';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  public render() {
    return (
      <div className='example-block'>
        <Tag text='primary' color='primary'/>
        <Tag text='secondary' color='secondary'/>
        <Tag text='success' color='success'/>
        <Tag text='info' color='info'/>
        <Tag text='warning' color='warning' />
        <Tag text='error' color='error'/>
        <Tag text='default' color='default'/>
        <Tag text='dark' color='dark'/>
        <Tag text='light' color='light'/>
        <Tag text='crimson' color='crimson'/>
        <Tag text='#ed143d' color='#ed143d'/>
        <Tag text='rgb(237, 20, 61)' color='rgb(237, 20, 61)'/>
        <Tag text='rgba(237, 20, 61, 0.5)' color='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

Background Color

Preview

crimson

#ed143d

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 23:21:07
 * @ Description: Examples of Tag component with background color.
 */

import React from 'react';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Tag text='crimson' backgroundColor='crimson'/>
        <Tag text='#ed143d' backgroundColor='#ed143d'/>
        <Tag text='rgb(237, 20, 61)' backgroundColor='rgb(237, 20, 61)'/>
        <Tag text='rgba(237, 20, 61, 0.5)' backgroundColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

Border Color

Preview

crimson

#ed143d

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 21:47:12
 * @ Description: Examples of Tag component with borders color.
 */

import React from 'react';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Tag color='primary' borderWidth='thin' type='ghost' text='crimson' borderColor='crimson'/>
        <Tag color='primary' borderWidth='thin' type='ghost' text='#ed143d' borderColor='#ed143d'/>
        <Tag color='primary' borderWidth='thin' type='ghost' text='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)'/>
        <Tag color='primary' borderWidth='thin' type='ghost' text='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

Border Width

Preview

none (default)

hairline

thin

base

thick

2

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 21:50:14
 * @ Description: Examples of Tag component with background width.
 */

import React from 'react';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Tag color='primary' text='none (default)' type='ghost' borderWidth='none' />
        <Tag color='primary' text='hairline' type='ghost' borderWidth='hairline' />
        <Tag color='primary' text='thin' type='ghost' borderWidth='thin' />
        <Tag color='primary' text='base' type='ghost' borderWidth='base' />
        <Tag color='primary' text='thick' type='ghost' borderWidth='thick' />
        <Tag color='primary' text='2' type='ghost' borderWidth={2} />
      </div>
    );
  }
}

Children

Preview



Custom Children Render

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 22:03:44
 * @ Description: Examples of Tag component with custom element.
 */

import React from 'react';
import { Text, StyleSheet, View } from "react-native";
import Icon from "@flexnative/icons";
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  public render() {
    return (
      <div className='example-block'>
        <Tag color='primary' text='Custom Loader'>
            <View style={styles.row}>
              <Icon name='star' size={22} />
              <Text style={styles.text}>Custom Children Render</Text>
            </View>
          </Tag>
      </div>
    );
  }
}


const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    width: '100%',
    backgroundColor: 'transparent'
  },
  text: {
    color: '#fff',
    fontSize: 18,
    paddingLeft: 12,
    fontFamily: 'Bold',
    width: '100%',
    textAlign: 'center',
    justifyContent: 'center'
  }
});

Size

Preview

small

default

medium

large

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 23:13:59
 * @ Description: Examples of Tag component with sizes.
 */

import React from 'react';
import Tag from '@flexnative/tags';

export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <div>
          <Tag color='primary' size='small' text='small' />
        </div>
        <div>
          <Tag color='primary' size='default' text='default' />
          </div>
        <div>
          <Tag color='primary' size='medium' text='medium' />
        </div>
        <div>
          <Tag color='primary' size='large'text='large' />
        </div>
      </div>
    );
  }
}

OnDelete

Preview

small



default



medium



large



Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 23:10:56
 * @ Description: Examples of Tag component with delete action.
 */

import React from 'react';
import { Alert, Platform } from 'react-native';

import Tag from '@flexnative/tags';

export default class extends React.PureComponent {
  constructor(props: {}) {
    super(props);
    this.openAlert = this.openAlert.bind(this);
  }

  openAlert = () => {
    if (Platform.OS === 'web') {
      alert("Delete...")
    } else {
      Alert.alert("FlexNative", "Delete...")
    }
  };

  render() {
    return (
      <div className='example-block'>
        <div>
          <Tag color='primary' size='small' text='small' onDelete={this.openAlert} />
        </div>
        <div>
          <Tag color='primary' size='default' text='default' onDelete={this.openAlert} />
          </div>
        <div>
          <Tag color='primary' size='medium' text='medium' onDelete={this.openAlert} />
        </div>
        <div>
          <Tag color='primary' size='large'text='large' onDelete={this.openAlert} />
        </div>
      </div>
    );
  }
}

Border Radius

Preview

none

small

medium (default)

large

full

5

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 23:17:44
 * @ Description: Examples of Tag component with borders radius.
 */

import React from 'react';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Tag color='primary' text='none' radius='none' />
        <Tag color='primary' text='small' radius='small' />
        <Tag color='primary' text='medium (default)' radius='medium' />
        <Tag color='primary' text='large' radius='large' />
        <Tag color='primary' text='full' radius='full' />
        <Tag color='primary' text='5' radius={5} />
      </div>
    );
  }
}

Text Color

Preview

crimson

#ed143d

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 23:20:49
 * @ Description: Examples of Tag component with Text Color.
 */

import React from 'react';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Tag text='crimson' textColor='crimson'/>
        <Tag text='#ed143d' textColor='#ed143d'/>
        <Tag text='rgb(237, 20, 61)' textColor='rgb(237, 20, 61)'/>
        <Tag text='rgba(237, 20, 61, 0.5)' textColor='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

TextProps

Preview

TextProps

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 23:25:34
 * @ Description: Examples of Tag component with Text Props.
 */

import React from 'react';
import { Alert, Platform } from 'react-native';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
constructor(props: {}) {
    super(props);
    this.openAlert = this.openAlert.bind(this);
  }

  openAlert = () => {
    if (Platform.OS === 'web') {
      alert("Tag pressed...")
    } else {
      Alert.alert("FlexNative", "Tag pressed...")
    }
  };

  render() {
    return (
      <div className='example-block'>
        <Tag color='primary' text='TextProps' textProps={{onPress: this.openAlert, allowFontScaling: true}} />
      </div>
    );
  }
}

Types

Preview

default

ghost

text

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 23:17:52
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-18 23:28:03
 * @ Description: Examples of Tag component with Types.
 */

import React from 'react';
import Tag from '@flexnative/tags';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Tag color='primary' text='default' type='default' />
        <Tag color='primary' text='ghost' type='ghost' />
        <Tag color='primary' text='text' type='text' />
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

render(<Tag color='primary' borderWidth='thin' type='ghost' text='Playground Tag Component' borderColor='#ed143d'/>);

Result

Loading...