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-complete

Or if you use npm:

npm install react-native-animated-slide-to-complete

But 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