Display buttons after swiping an element

Use React Native Swipeout to display hidden elements after swiping

Mon, 12 Nov 2018

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

IMG 1758

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.

Loading...
Edward Beazer

Edward Beazer - I just like to build shit. Sometimes I get stuck for hours, even days while trying to figure out how to solve an issue or implement a new feature. Hope my tips and tutorials can save you some time.