react-native-button-spinner

This is a Javascript button indicator (spinner) plugin for react-native. Which will allow you to customize and disable the button. So the plug-in stops the indicator after completing the function or interrupting it after a certain time.

Getting Started

npm i react-native-button-spinner --save

Usage

1. Import plugin

import ButtonSpinner from 'react-native-button-spinner';

2. Add button component

<ButtonSpinner>
    My text button 1
</ButtonSpinner>

<ButtonSpinner
    disabled={true}
>
    My text button 2
</ButtonSpinner>

<ButtonSpinner
    style={{ backgroundColor: 'blue' }}
    disabled={true}
    opacityDisabled={0.1}
>
    My text button 3
</ButtonSpinner>

<ButtonSpinner
    onPress={this.myFunction}
>
    My text button 4
</ButtonSpinner>

Demo & Example

See the full source demo code in example project

<ButtonSpinner />

<ButtonSpinner textButton={'Text Button'}/>

<ButtonSpinner>My Default Button</ButtonSpinner>

<ButtonSpinner disabled={true}>Default Disable btn</ButtonSpinner>

 <ButtonSpinner
		style={{ backgroundColor: 'blue' }}
		styleText={{ color: 'red' }}
		disabled={true}>Customize Disable btn</ButtonSpinner>

<ButtonSpinner
	onPress={sendRequest}
>
	My functin use Promise
</ButtonSpinner>

<ButtonSpinner
	onPress={awaitSendRequest}
>
	Await Promise Resolve
</ButtonSpinner>

<ButtonSpinner
	onPress={awaitSendRequest}
>
	<Text style={{ color: 'orange' }}>Await response</Text>
</ButtonSpinner>

<ButtonSpinner
	onPress={awaitSendRequest}
	typeSpinner='custom'
	customSpinnerComponent={<Text style={{ color: 'red' }}>Loading</Text>}
>
	<Text style={{ color: 'green' }}>Custom spinner</Text>
</ButtonSpinner>

<ButtonSpinner
	disabled={true}
	onPress={sendRequest}
	pendingRequest={false}
	automaticTimeEnable={10000}
 >
 	<Text>Disabled btn and enable</Text>
 </ButtonSpinner>

<ButtonSpinner
 	onPress={sendRequest}
 	pendingRequest={false}
 	automaticTimeEnable={4000}
 	typeSpinner='custom'
 	customSpinnerComponent={<Text style={{ color: 'red' }}>Loading</Text>}
 >
 	<Text style={{ color: 'green' }}>Custom spinner</Text>
 </ButtonSpinner>

<ButtonSpinner
	onPress={sendRequest}
>
	<Text>Position Left</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'right'}
	onPress={sendRequest}
>
	<Text>Position right</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'centered-over-text'}
	onPress={sendRequest}
>
	<Text>Position centered-over-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'centered-without-text'}
	onPress={sendRequest}
>
	<Text>Position centered-without-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'left-without-text'}
	onPress={sendRequest}
>
	<Text>Position left-without-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'right-without-text'}
	onPress={sendRequest}
>
	<Text>Position right-without-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'above-text'}
	onPress={sendRequest}
>
	<Text>Position above-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'below-text'}
	onPress={sendRequest}
>
	<Text>Position below-text</Text>
</ButtonSpinner>

<ButtonSpinner
	onPress={sendRequest}
>
	<Icon name="qrcode" size={20} color="green" />
	<Text style={{ color: 'green' }}>Get QR code</Text>
</ButtonSpinner>

<ButtonSpinner
	onPress={sendRequest}
>
	<Icon name="shoppingcart" size={20} color="#900" style={{ marginRight: 10 }} />
	<Text>Add to cart</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'centered-without-text'}
	onPress={sendRequest}
>
	<Icon name="hearto" size={20} color="#900" />
</ButtonSpinner>

  const functinReturnString = () => {
    return 'kamikadze'
  }

  const functinReturnObject = () => {
    return { a: 'kamikadze' }
  }

  const functinReturnNumber = () => {
    return 12
  }

  const sendRequest = () => {
    return new Promise(() => { })
  }

  const awaitSendRequest = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("api ok")
      }, 2500)
    })
  }

Props

• children
• textButton
• disabled
• opacity
• opacityDisabled
• pendingRequest
• automaticTimeEnable
• style
• styleText
• styleSpinner
• typeSpinner
• positionSpinner
• customSpinnerComponent
• onPress

Reference

children

Text Button (use textButton or children)

| Type | Default | | :-----------------: | :-----: | | React Native Component (React.ReactElement) | none |

How to use props children:

	<ButtonSpinner>My Default Button</ButtonSpinner>

OR

	<ButtonSpinner>
		<Text>My Text</Text>
	</ButtonSpinner>

textButton

Text Button (use children or textButton)

| Type | Default | | :-----------------: | :-----: | | string | My Button text |

How to use props children:

 <ButtonSpinner textButton={'Text Button'}/>

disabled

Disabled button

| Type | Default | | :-----------------: | :-----: | | boolean | false |

opacity

Default opacity button

| Type | Default | | :-----------------: | :-----: | | number | 1 |

opacityDisabled

Default opacity button when the state is disabled

| Type | Default | | :-----------------: | :-----: | | number | 0.35 |

pendingRequest

Waiting for function to complete

| Type | Default | | :-----------------: | :-----: | | boolean | true |

automaticTimeEnable

Time after which the button becomes active without waiting for the function to complete after number second(s).

Example set 2s. automaticTimeEnable={2000}

| Type | Default | | :-----------------: | :-----: | | number | 0 |

style

add additional styling for button component (optional)

| Type | Default | | :-----------------: | :-----: | | View style (object) | see code below |

{
        alignItems: 'center',
        backgroundColor: 'f5f5f5',
        color: '#dddddd',
        paddingVertical: 10,
        paddingHorizontal: 25,
        margin: 10,
        borderColor: '#c2c2c2',
        borderRadius: 5,
        borderWidth: 1,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
    }

styleText

add additional styling for button text (optional)

| Type | Default | | :-----------------: | :-----: | | View style (object) | { color: '#000000' } |

styleSpinner

Style for button spinner if the customSpinnerComponent is not used

the sizes have the following options:

• small

• large

| Type | Default | | :-----------------: | :-----: | | View style (object) | { style: { marginRight: 15, }, color: '#a6a6a6', size: 'small' } |

typeSpinner

The types of the spinner (optional):

• defaut
• custom

| Type | Default | | :-----------------: | :-----: | | defaut, custom | defaut |

positionSpinner

The positions of the button spinner (optional):

• left
• right
• centered-over-text
• centered-without-text
• left-without-text
• right-without-text
• above-text
• below-text

The positions of the button spinner if the customSpinnerComponent is not used.

| Type | Default | | :-----------------: | :-----: | | left, right, centered-over-text, centered-without-text, left-without-text, right-without-text, above-text, below-text | left |

customSpinnerComponent

Custom button spinner component

| Type | Default | | :-----------------: | :-----: | | React Native Component (React.ReactElement) | none |

onPress

Your function for click

| Type | Default | | :-----------------: | :-----: | | function | () => {} |

License

This project is licensed under the MIT License - see the LICENSE file for details

Copyright (c) 2019 Igor Rosliakov