Package Exports

react-native-button-spinner

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-button-spinner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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