Display buttons after swiping an element
Use React Native Swipeout to display hidden elements after swiping
I found this cool package while making my first app that would let me swipe an element to display more elements such as a button or an icon. I had some trouble using it and wanted to share the code I used to make it work properly.
I’m going to use my app as an example. It’s a shopping list app, you swipe right and see a delete and edit button, swipe left and you see a button to complete the list or share the list. It looks like this
Packages
yarn add react-native-swipeout
npm install react-native-swipeout
Styling
I use StyleSheet from the react-native package to do all component styling.
const styles = StyleSheet.create({
swipeoutSide: {
backgroundColor: '#fff',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
listContainer: {
borderRadius: 2,
borderWidth: 1.5,
borderColor: '#6772e5',
marginLeft: 15,
marginRight: 15,
marginTop: 5,
marginBottom: 5,
height: 124
},
listHeader: {
flex: 1,
justifyContent: 'center',
marginLeft: 20
},
listTitle: {
fontSize: 22,
color: '#999999',
marginBottom: 2
},
listSubTitle: {
fontSize: 14,
color: '#a6a6a6'
}
});Code
To make this example concise, I will only be including the code for the box and the swipeout component.
import { Icon } from 'expo';
import React from 'react';
import Swipeout from 'react-native-swipeout';
import {
Platform,
StyleSheet,
TouchableOpacity,
View
} from 'react-native';
const styles = StyleSheet.create({
....
});
var swipeoutRightBtns = [
{
backgroundColor: '#fff',
component: (
<View style={styles.swipeoutSide}>
<Icon.Ionicons
size={40}
onPress={() => alert("Edit")}
color='#ffc107'
name= {
Platform.OS === 'ios'
? `ios-create-outline`
: 'md-create'
}/>
</View>
)
},
{
backgroundColor: '#fff',
component: (
<View style={styles.swipeoutSide}>
<Icon.Ionicons
size={40}
onPress={() => alert("Delete")}
color='#dc3545'
name= {
Platform.OS === 'ios'
? `ios-trash-outline`
: 'md-trash'
}
/>
</View>
)
}
];
var swipeoutLeftBtns = [
{
backgroundColor: '#fff',
component: (
<View style={styles.swipeoutSide}>
<Icon.Ionicons
size={40}
onPress={() => alert("Complete")}
color='#28a745'
name= {
Platform.OS === 'ios'
? `ios-checkmark-circle-outline`
: 'md-checkmark-circle-outline'
}/>
</View>
)
},
{
backgroundColor: '#fff',
component: (
<View style={styles.swipeoutSide}>
<Icon.Ionicons
size={40}
onPress={() => alert("Share")}
color='#007bff'
name= {
Platform.OS === 'ios'
? `ios-share-outline`
: 'md-share-alt'
}/>
</View>
)
}
];
export default class HomeScreen extends React.Component {
render() {
return (
<Swipeout left={swipeoutLeftBtns} right={swipeoutRightBtns} backgroundColor="#fff">
<TouchableOpacity style={styles.listContainer}>
<View style={styles.listHeader}>
<Text style={styles.listTitle}>Test Store</Text>
<Text style={styles.listSubTitle}>Test Item</Text>
</View>
</TouchableOpacity>
</Swipeout>
)
}
}Swipeout
The swipeout component has a couple of props that are worth setting. The backgroundColor is important, if we don’t set it to a color it defaults to a nasty gray background. My app has a white background so ‘#fff’(white) works for it, you can also set the backgroundColor to transparent.
The left and right prop takes an array of elements to display on its respective side. You’ll notice from my code that I also set the backgroundColor to white as well. If you don’t set the color, the buttons will have a gray background which is what I didn’t want. The component attribute can be any react component that you would like to use. I wanted buttons that display an icon, so I opted for using an Icon class from the Expo package that has onPress props to be clickable.
Once you compile your code, you should be able to swipe right or left to display the icon buttons.
