react-native-button-spinner

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

Usage no npm install needed!

<script type="module">
  import reactNativeButtonSpinner from 'https://cdn.skypack.dev/react-native-button-spinner';
</script>

README

react-native-button-spinner npm version

npm npm Package Quality Platform - Android and iOS MIT licensed

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';
  1. 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)
    })
  }

Props

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