5
A swipe button ready-to-use and highly customizable
source link: https://reactnativeexample.com/a-swipe-button-ready-to-use-and-highly-customizable/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-native-expo-swipe-button
A swipe button ready-to-use and highly customizable. This component is intended to be used on expo managed app because it uses the expo-linear-gradient package.
Installations
npm install react-native-expo-swipe-button --save
yarn add 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
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK