1.0.2 • Published 5 months ago
react-native-animated-slide-to-complete v1.0.2
react-native-animated-slide-to-complete
React native slide to complete component for iOS + Android. Component is developed with react-native-reanimated
Installation
Launch a project Terminal and run:
yarn add react-native-animated-slide-to-completeOr if you use npm:
npm install react-native-animated-slide-to-completeBut also we need to install react-native-reanimated and react-native-gesture-handler
Usage
\\...
export default function App() {
return (
<View style={styles.container}>
<SlideToCompleteButton style={styles.animated} />
<OverlayToComplete style={styles.animated} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
animated: {
width: 340,
},
});Properties
| Props | type | Description |
|---|---|---|
style | ViewStyle | It's a prop for arranging and styling button layouts. |
SelfView | ReactElement | It allows you to create a custom appearance for the sliding button's thumb view. |
selfStyle | ViewStyle | It's a prop employed to customize the appearance of the thumb view; otherwise, the default style will be applied. |
startTitle | String | Specify a text to appear on the left side when sliding the thumb to the right. |
endTitle | String | Specify a text to appear on the right side when sliding the thumb to the left. |
startStyle | TextStyle | Apply a style to the startTitle. |
endStyle | TextStyle | Apply a style to the endTitle. |
isReset | Boolean | Setting to true resets the thumb when sliding to the end of the button. |
Methods
| Name | Description |
|---|---|
reset | Invoke method to reset thumb appearance, returning to default state. |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library