React Native Fill Up Button

A React Native Button component with fills up animation on press and hold.

Installation.

using NPM

npm install react-native-fill-up-button --save

Or with YARN

yarn install react-native-fill-up-button

How to use.

All you have to is just import the component to your javascript file using:

import FillUpButton from 'react-native-fill-up-button';

Then using it as the project can is as simple as the following:

import FillUpButton from 'react-native-fill-up-button';
 
export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        buttontext: "Not Pressed"
    }
  }
 
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: "center"}}>
        <Text>{this.state.buttontext}</Text>
        <FillUpButton increment={0.01}
                      buttonBackgroundColor={'blue'}
                      fillupColor={'green'}
                      height={60}
                      width={200}
                      buttonText= "PRESS AND HOLD"
                      incrementSpeed={10}
                      buttonTextStyle={{ fontSize: 20, color: 'white', fontWeight: 'bold'}}
                      activeOpacity={0.7}
                      onFilled={ () => this.setState({buttontext: "PRESSED!"}) }
        />
      </View>
    );
  }
}

This will result in the following:

Props

Property	Type	Required	Description	Default
height	number	yes	Height of the button	-
width	number	yes	Width of the button	-
buttonText	string	no	Text inside the button	-
onFilled	func	no	The function to be executed once the button is completely filled.	-
activeOpacity	number	no	Determines what the opacity of the wrapped view should be when touch is active	0.2
buttonBackgroundColor	string	no	The color of the button before filling up	'#292929'
fillupColor	string	no	The color of which the button is filled up with when is pressed down.	'#000000'
buttonTextStyle	style	no	The style for the text inside the button	-
increment	number	no	The percentage of which the button filling is incremented by.	0.05
incrementSpeed	number	no	The time between each filling increment in milliseconds. The smaller the number the faster the filling up.	10