1.5.0 • Published 4 months ago
react-native-ripple-btn v1.5.0
This is a custom button with ripple effect. My build versions: 1- react-native-gesture-handler: 2.9.0 2- react-native-reanimated: 2.14.4
Installation
npm install react-native-ripple-btn
Doc
Usage
//App.js
import { GestureHandlerRootView } from "react-native-gesture-handler";
<GestureHandlerRootView style={{flex: 1}}>
//Your codes in here
</GestureHandlerRootView>
//Usage in screen
import RippleButton from "react-native-ripple-btn";
<RippleButton
duration={800}
opacity={0.8}
opacityColor={'white'}
width={'70%'}
height={50}
text={'Button text'}
textSize={20}
textColor={'white'}
bgColor={'purple'}
borderRadius={10}
onPress={onPress}
/>
API
prop | type | description | default |
---|---|---|---|
duration | Number | Duration in ms. | 800 |
opacity | Number | Ripple effect opacity. | 0.8 |
opacityColor | String | Ripple effect color. | "white" |
width | String | Button width. | "70%" |
height | Number | Button height. | 50 |
text | String | Button text. | "Text" |
textSize | Number | Button textSize. | 20 |
textColor | String | Button textColor. | "white" |
borderRadius | Number | Button borderRadius. | 10 |
bgColor | String | Button backgroundColor. | "purple" |
onPress | Func | Button func. | null |