Package Exports

react-native-fill-up-button

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-fill-up-button) 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 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:

fillUpButton

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