react-native-expo-swipe-button
A swipe button ready-to-use and highly customizable
Installations
npm install react-native-expo-swipe-button --save
yarn install react-native-expo-swipe-button
Usage
import { SwipeButton } from 'react-native-expo-swipe-button';
function Home(): JSX.Element {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
backgroundColor: 'white',
flexDirection: 'column',
}}
>
<SwipeButton
Icon={
<MaterialIcons name="keyboard-arrow-right" size={50} color="white" />
}
onComplete={() => Alert.alert('Completed')}
title="Swipe to complete"
borderRadius={180}
containerStyle={{ backgroundColor: 'gray' }}
underlayTitle="Release to complete"
underlayTitleStyle={{ color: 'white' }}
/>
<SwipeButton
Icon={
<MaterialIcons name="keyboard-arrow-right" size={50} color="white" />
}
onComplete={() => {}}
title="Gradient swipe"
borderRadius={180}
containerGradientProps={{
colors: ['red', 'cyan'],
start: [0, 0.5],
end: [1, 0.5],
}}
underlayTitle="Release to complete"
underlayStyle={{
borderRadius: 180,
}}
underlayContainerGradientProps={{
colors: ['green', 'yellow'],
start: [0, 0.5],
end: [1, 0.5],
}}
/>
<SwipeButton
Icon={
<MaterialIcons name="keyboard-arrow-right" size={50} color="white" />
}
onComplete={() => {}}
title="Custom format swipe"
borderRadius={25}
containerStyle={{
backgroundColor: 'transparent',
borderWidth: 0,
borderColor: 'red',
}}
underlayStyle={{
borderRadius: 0,
borderWidth: 5,
borderColor: 'red',
backgroundColor: 'transparent',
}}
underlayTitle="Release to complete"
underlayTitleStyle={{ color: 'white' }}
completeThresholdPercentage={50}
goBackToStart
titleElement={
<LinearGradient
colors={['red', 'yellow']}
style={[styles.titleContainer, { height: 60, borderRadius: 25 }]}
start={[0, 0.5]}
end={[1, 0.5]}
>
<Text
numberOfLines={2}
allowFontScaling={false}
style={[styles.title]}
>
Full custom swipe
</Text>
</LinearGradient>
}
underlayTitleElement={
<LinearGradient
colors={['pink', 'yellow']}
style={[styles.titleContainer, { height: 60, borderRadius: 25 }]}
start={[0, 0.5]}
end={[1, 0.5]}
>
<Text
numberOfLines={2}
allowFontScaling={false}
style={[styles.title]}
>
Release to complete
</Text>
</LinearGradient>
}
/>
</View>
);
}
Properties
Prop | Description | Type | Default | Is Required |
---|
disabled | If disabled is set to true it will not be possible to interact with the button. | boolean | false | no |
completeThresholdPercentage | Determine when onComplete should be invoked. | number | 70% | no |
goBackToStart | If true, the circle will go back to the start position after swipe is completed. | boolean | false | no |
width | The width of the component. | number | 90% | no |
height | The height of the component. | number | 70 | no |
circleSize | define the size of the circle button | number | 70 | no |
underlayStyle | The styling of the underlay container | StyleProp<ViewStyle> | {position: 'absolute',backgroundColor: '#152228',borderTopStartRadius: DEFAULT_BORDER_RADIUS,borderBottomStartRadius: DEFAULT_BORDER_RADIUS,borderBottomEndRadius: DEFAULT_BORDER_RADIUS, borderTopEndRadius: DEFAULT_BORDER_RADIUS } | no |
containerStyle | Styling of the outer container | StyleProp<ViewStyle> | {backgroundColor: 'white',alignSelf: 'center',justifyContent: 'center', marginVertical: 10 } | no |
iconContainerStyle | The styling of the button | StyleProp<ViewStyle> | { position: 'absolute', backgroundColor: 'black', alignItems: 'center', justifyContent: 'center' } | no |
borderRadius | The border radius of the container and the Icon | number | height / 2 | no |
containerGradientProps | gradient props for the container. Using this will actually use a linear gradient as view | `{ colors?: string[]; } & Omit<LinearGradientProps, 'colors' | 'style'>` | none |
underlayContainerGradientProps | gradient props for the underlayContainer. Using this will actually use a linear gradient as view | `{ colors?: string[]; } & Omit<LinearGradientProps, 'colors' | 'style'>` | none |
Icon | Element that should be displayed inside the button | JSX.Element | none | yes |
circleBackgroundColor | Background color for the circle | string | black | no |
borderRadius | set border radius for the circle | number | none | no |
title | The text that will be displayed in the container | string | none | yes |
titleExtraTextProps | Additional props for the title text | TextProps | none | no |
titleStyle | Additional styling for the title text | StyleProp<TextStyle> | { color: 'black', fontSize: 16, maxWidth: '50%', textAlign: 'center' } | no |
titleContainerExtraViewProps | Additional props for the title container | ViewProps | none | no |
titleContainerStyle | Additional styling for the title container | StyleProp<ViewStyle> | { justifyContent: 'center', alignItems: 'center' } | no |
titleElement | An JSX element you can define to replace the title default component. Using this will omit the others title props | JSX.Element | none | no |
underlayTitle | The text that will be displayed in the underlay container | string | '' | no |
underlayTitleExtraTextProps | Additional props for the underlay title text | TextProps | none | no |
underlayTitleStyle | Additional styling for the underlay title text | StyleProp<TextStyle> | { color: 'black', fontSize: 16, maxWidth: '50%', textAlign: 'center' } | no |
underlayTitleContainerExtraViewProps | Additional props for the underlay title container | ViewProps | none | no |
underlayTitleContainerStyle | Additional styling for the underlay title container | StyleProp<ViewStyle> | { justifyContent: 'center' alignItems: 'center' } | no |
underlayTitleElement | An JSX element you can define to replace the underlay title default component. Using this will omit the others title props | JSX.Element | none | no |
onComplete | Callback that will be invoked when complete threshold has been reached | () => void | none | yes |
onSwipeProgress | callback for swiping in progress | (progress: number) => void | none | no |
onSwipeStart | Callback that will be invoked when the user starts swiping | () => void | none | no |
onSwipeEnd | Callback that will be invoked when the user ends swiping | () => void | none | no |
A complete minimal example can be found Here.
Known issues
Contributing
See the contributing guide to learn how to contribute to the repository.
License
MIT