Buttons

FlexNative Buttons package is part of FlexNative for React Native, it provides a clickable UI library and functionality.

The package include a variety of button types and styles that have extensive styles options. This flexibility allows you to quickly and easily create the exact button you need to fit your specific requirements for functionality and appearance.

Dependencies

Installation

You can installing FlexNative Buttons packages using npm:

npm i @flexnative/buttons

API

import Button from '@flexnative/buttons';

Component

Button

Type: React.Component<IButtonProps>

Properties

info

IButtonProps props extends PressableProps from react-native so any Pressable propertie from React Native it is applicable also in Buttons of @flexnative/buttons package.

Name	Type	Required	Default Value	Description
radius	`BorderRadius`	false	`medium`	Button border radius. One of `BorderRadius` type
borderWidth	`BorderWidth`	false	`none`	Optional button borders width. One of `BorderWidth` type
loading	`boolean`	false	false	It true the button it is in disabled state and it shows loading spinner while it is on loading state.
renderLoading	`React.ReactElement`	false	`false`	`React.ReactElement` to render a custom element as loading indicator component.
disabled	`boolean`	false	`false`	Set the button as disabled.
type	`ButtonType`	false	`default`	warning To have appearance for `'text'`, `'link'`, `'ghost'`, with custom color you should use hex colors.
size	`Sizes`	false	`default`	Button Sizes. One of `Sizes` type.
color	`ButtonColor`	false	`theme.color.default`	Color by theme or a custom color according `react-native` ColorValue.
activeColor	`ColorValue`	false	`undefined`	Button color on active state, according `react-native` ColorValue.
backgroundColor	`ColorValue`	false	`undefined`	Button background color.
borderColor	`ColorValue`	false	`undefined`	Button borders color according `react-native` ColorValue.
activeBorderColor	`ColorValue`	false	`undefined`	Border color for active state according `react-native` ColorValue.
text	`string`	`ITextProps`	true	`undefined`
iconLeft	`keyof IconName \| IconProps \| React.ReactElement`	false	`undefined`	`keyof IconName` to display an icon on left side of button, or `IconProps` or `React.ReactElement`, to render a custom element at left side of button. warning If children it is set the text property will be ignored.
iconRight	`keyof IconName \| IconProps \| React.ReactElement`	false	`undefined`	`keyof IconName` to display an icon on right side of button, or `IconProps` or `React.ReactElement`, to render a custom element at right side of button. warning If children it is set the text property will be ignored.

BorderRadius

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

BorderWidth

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

ButtonType

One of 'default' | 'ghost' | 'inverse' | 'link' | 'text'

Name	Type	Description
default	`string`	Property to fill in solid mode the background color of the button component.
ghost	`string`	Property to fill the background with a transparent color the button component.
inverse	`string`	Property to set transparent background of the button component and with solid background on press.
link	`string`	Property to set transparent background of the button component width borders and with underllined text.
text	`string`	Property to fill the background with a transparent color the button component and with `ghost` background on press.

Sizes

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

Name	Type	Value
small	`string`	Fonts size: FONT_SIZE.small Icon size: FONT_SIZE.small Padding Vertical: FONT_SIZE.small Padding Horizontal: FONT_SIZE.small * 0.6
default	`string`	Fonts size: FONT_SIZE.default Icon size: FONT_SIZE.default Padding Vertical: FONT_SIZE.default Padding Horizontal: FONT_SIZE.default * 0.6
medium	`string`	Fonts size: FONT_SIZE.medium Icon size: FONT_SIZE.medium Padding Vertical: FONT_SIZE.medium Padding Horizontal: FONT_SIZE.medium * 0.6
large	`string`	Fonts size: FONT_SIZE.large Icon size: FONT_SIZE.large Padding Vertical: FONT_SIZE.large Padding Horizontal: FONT_SIZE.large * 0.6

ButtonColor

Name	Type	Value	Preview
Name	Type	Value	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.

ITextProps

info

ITextProps props extends TextProps from react-native so any TextProps propertie from React Native it is applicable also in text propery.

Name	Type	Required	Default Value	Description
color	`ColorValue`	false	`undefined`	Button text color.
activeColor	`ColorValue`	false	`undefined`	Button text color when button it is pressed.
value	`string`	false	`undefined`	Text value to display on button component.

IconProps

info

IconProps props extends TextProps from react-native so any TextProps propertie from React Native it is applicable also in text propery.

Name	Type	Required	Default Value	Description
color	`ColorValue`	false	`undefined`	Button icon color.
activeColor	`ColorValue`	false	`undefined`	Button text icon when button it is pressed.
name	`keyof IconName`	false	`undefined`	Icon (name) to display on button component.

Usecase Examples

The following example demonstrates the FlexNative Buttons in action.

Caution

In documentation apprence of components may not be in correct way. To view the component in exact design please view the demo app.

Colors

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Button text='primary' color='primary'/>
        <Button text='info' color='info'/>
        <Button text='warning' color='warning'/>
        <Button text='default' color='default'/>
        <Button text='secondary' color='secondary'/>
        <Button text='success' color='success'/>
        <Button text='error' color='error'/>
        <Button text='light' color='light'/>
        <Button text='dark' color='dark'/>

        <Button text='crimson' color='crimson'/>
        <Button text='#ed143d' color='#ed143d'/>
        <Button text='rgb(237, 20, 61)' color='rgb(237, 20, 61)'/>
        <Button text='rgba(237, 20, 61, 0.5)' color='rgba(237, 20, 61, 0.5)'/>
      </div>
    );
  }
}

Active Colors

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Type

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Border Color

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Active Border Color

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Border Radius

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Border Width

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Disabled

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Icons

Preview
Code

Icon on left side

import React from 'react';

import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <>
        <p className='session-title'>Icon on left side</p>

        <div className='example-block'>
          <Button color='primary' iconLeft='star' />
          <Button color='primary' radius='full' iconLeft='star' />

          <Button text='default' color='primary' iconLeft='star' />
          <Button text='Custom colors' color='primary' iconLeft={{name: 'star', color: '#072541', activeColor: '#FFAE10'}} />
        </div>

        <p className='session-title'>Icon on left side</p>

        <div className='example-block'>
          <Button color='primary' iconRight='star' />
          <Button color='primary' radius='full' iconRight='star' />

          <Button text='default' color='primary' iconRight='star' />
          <Button text='Custom colors' color='primary' iconRight={{name: 'star', color: '#072541', activeColor: '#FFAE10'}} />
        </div>
      </>
    );
  }
}

Loading

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';
import { Spinner } from '@flexnative/icons';

type State = {
  isLoading: boolean;
}

export default class extends React.PureComponent<{}, State> {
  constructor(props: {}) {
    super(props);

    this.state = {
      isLoading: false
    }
    
    this.setLoading = this.setLoading.bind(this);
  }

  private setLoading() {
    this.setState({isLoading: true});
    setTimeout(() => {
      this.setState({isLoading: false});
    }, 2000);
  }

  render() {
    return (
      <div className='example-block'>
        <Button color='primary'
                iconLeft='star'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />
        <Button color='primary'
                radius='full'
                iconLeft='star'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />
        <Button text='text'
                color='primary'
                type='text'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />
        <Button text='ghost'
                color='primary'
                type='ghost'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />
        <Button color='primary'
                iconRight='star'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />
        <Button color='primary'
                radius='full'
                iconLeft='star'
                text='Left icon'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />
        <Button color='primary'
                radius='full'
                iconRight='star'
                text='Right icon'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />
        <Button color='primary'
                radius='full'
                iconRight='star'
                loading={this.state.isLoading}
                onPress={this.setLoading}
        />

        <Button text='link'
                  color='primary'
                  type='link'
                  loading={this.state.isLoading}
                  onPress={this.setLoading}
          />
          <Button text='inverse'
                  color='primary'
                  type='inverse'
                  loading={this.state.isLoading}
                  onPress={this.setLoading}
          />
          <Button text='default'
                  color='primary'
                  loading={this.state.isLoading}
                  renderLoading={<Spinner name="spinner"/>}
                  onPress={this.setLoading}
          />
      </div>
    );
  }
}

Render Loading

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';
import { Spinner } from '@flexnative/icons';

type State = {
  isLoading: boolean;
}

export default class extends React.PureComponent<{}, State> {
  constructor(props: {}) {
    super(props);

    this.state = {
      isLoading: false
    }
    
    this.setLoading = this.setLoading.bind(this);
  }

  private setLoading() {
    this.setState({isLoading: true});
    setTimeout(() => {
      this.setState({isLoading: false});
    }, 2000);
  }

  render() {
    return (
      <div className='example-block'>
        <Button color='primary'
                radius='full'
                iconRight='star'
                loading={this.state.isLoading}
                onPress={this.setLoading}
                renderLoading={<Spinner name="star" />}
        />
        
        <Button color='primary'
                text='Custom Loader'
                onPress={this.setLoading}
                loading={this.state.isLoading}
                renderLoading={<Spinner name="star" />} />
      </div>
    );
  }
}

Sizes

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


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

Text

Preview
Code

import React from 'react';

import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Button text='default' color='primary' />
        <Button color='primary' text={{value: 'Custom colors', color: '#072541', activeColor: '#FFCD4B'}} />
      </div>
    );
  }
}

Render Children

Preview
Code

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

import Button from '@flexnative/buttons';
import Icon from '@flexnative/icons';

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

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

Styling with StyleSheet

Preview
Code

import React from 'react';
import { StyleSheet } from 'react-native';

import Button from '@flexnative/buttons';

export default class extends React.PureComponent<{}> {
  render() {
    return (
      <div className='example-block'>
        <Button text={{value: 'Text', style: styles.customBtnText}}
                iconLeft={{name: 'image', style: styles.customBtnLeftIcon}}
                iconRight={{name: 'star', style: styles.customBtnRightIcon}}
                style={styles.customBtn}
        />
      </div>
    );
  }
}

const styles = StyleSheet.create({
  customBtnText: {
    fontSize: 18,
    color: '#EF0003',
    fontFamily: 'Bold',
    alignSelf: 'center',
    paddingHorizontal: 25,
  },
  customBtnLeftIcon: {
    fontSize: 32,
    color: '#EF0003',
    height: 32,
    width: 32
  },
  customBtnRightIcon: {
    fontSize: 18,
    color: '#EF0003',
    height: 32,
    width: 32,
    borderRadius: 16,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    paddingTop: 6
  },
  customBtn: {
    flex: 1,
    borderColor: '#EF0003',
    borderWidth: 5,
    paddingVertical: 16,
    backgroundColor: '#FFAE10'
  },
});

Playground

Live Editor

//Play with props to see live changes;

render(
  <Button
    text='Button'
    color='primary'
    activeColor='#ed143d'
    radius='full'
    size='large'
    iconLeft='star'
  />
);

Result

Dependencies​

Installation​

API​

Component​

Properties​

BorderRadius​

BorderWidth​

ButtonType​

Sizes​

ButtonColor​

ITextProps​

IconProps​

Usecase Examples​

Colors​

Active Colors​

Type​

Border Color​

Active Border Color​

Border Radius​

Border Width​

Disabled​

Icons​

Loading​

Render Loading​

Sizes​

Text​

Render Children​

Styling with StyleSheet​

Playground​

Dependencies

Installation

API

Component

Properties

BorderRadius

BorderWidth

ButtonType

Sizes

ButtonColor

ITextProps

IconProps

Usecase Examples

Colors

Active Colors

Type

Border Color

Active Border Color

Border Radius

Border Width

Disabled

Icons

Loading

Render Loading

Sizes

Text

Render Children

Styling with StyleSheet

Playground