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

Import plugin

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

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

Default button

<ButtonSpinner />

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

<ButtonSpinner>My Default Button</ButtonSpinner>

Disable button

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

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

Callback Value Function

<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>

Position right-without-text

<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>

Example Customize

<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>

All the examples of functions from the demo

  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)
    })
  }

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>

    <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