@arelstone/react-native-swipe-button

A UI component for displaying a button that can be swiped.

Usage no npm install needed!

<script type="module">
  import arelstoneReactNativeSwipeButton from 'https://cdn.skypack.dev/@arelstone/react-native-swipe-button';
</script>

README

@arelstone/react-native-swipe-button

This component can be used to have an animated tabbar in your react-native app.

A lot of app use the swipe to complete. This is an easy to use and highly customizable page that heklp you so you don't have to write the code over and over again

npm npm (scoped) GitHub issues GitHub pull requests

@arelstone/react-native-swipe-button

Install

npm i @arelstone/react-native-swipe-button
// or
yarn add @arelstone/react-native-swipe-button

Props

Prop Type Description
title string Required The text that will be displayed inside the button
onComplete () => void Required Callback function that will be invoked when the button has reached the final state
height number The height of the container. Default 70
width number The width of the container. Default 90% of the screen width
borderRadius number The border radius of the container and button (default: height / 2)
completeThresholdPercentage number Determinates when onComplete should be invoked (defualt: 70)
onSwipeStart () => void Callback that will be invoked when the user starts swiping
onSwipeEnd () => void Callback that will be invoked when the user ends swiping
containerStyle StyleProp Styling for the container
underlayStyle StyleProp Styling for the underlay container
titleContainerProps ViewProps Additonal Props for the title container
titleContainerStyle StyleProp Styling for the title container
titleProps TextProps Additonal Props for the title text
titleStyle StyleProp Styling for the title text
circleBackgroundColor string Background color for the circle
goBackToStart bololean If set to TRUE, after swipe is completed, the circle goes back to the start position