react-native-button-spinner v0.1.4

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)

How to use props children:

	<ButtonSpinner>My Default Button</ButtonSpinner>

OR

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

textButton

Text Button (use children or textButton)

How to use props children:

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

disabled

Disabled button

opacity

Default opacity button

opacityDisabled

Default opacity button when the state is disabled

pendingRequest

Waiting for function to complete

automaticTimeEnable

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

Example set 2s. automaticTimeEnable={2000}

style

add additional styling for button component (optional)

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

styleSpinner

Style for button spinner if the customSpinnerComponent is not used

the sizes have the following options:

• small

• large

typeSpinner

The types of the spinner (optional):

• defaut
• custom

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.

customSpinnerComponent

Custom button spinner component

onPress

Your function for click

License

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

Copyright (c) 2019 Igor Rosliakov