DEV Community: Sergei

React Native: Swipeable Row component with actions

Sergei — Sat, 02 Mar 2024 12:41:28 +0000

In this tutorial I will explain how to implement a UI element popular on iOS devices - swipeable row with actions. We will use the react-native-gesture-handler library.

Let's look at a singular row component:



<View style={styles.container}>
        <TouchableOpacity style={styles.cardContainer} activeOpacity={1}>
          <Image
            source={{
              uri: product?.images?.length
                ? product.images[0]
                : settings.PRODUCT_IMAGE_PLACEHOLDER,
            }}
            style={styles.imageMini}
          />

          <View style={styles.rightSide}>
            <Text style={styles.title} numberOfLines={2}>
              {product.title}
            </Text>

            <View style={styles.buttonAndPriceContainer}>
              <MiniProductButton
                quantity={
                  product.inCartCount ? (product.inCartCount as number) : 0
                }
                onPressAdd={() => {}}
                onPressRemove={() => {}}
              />

              <Text style={styles.priceText} numberOfLines={1}>
                {formatPrice(product)}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>

The view should have a background color (or obscure the background in some other way), otherwise left and right actions will be visible on the screen the moment the user starts swiping!



container: {
    alignSelf: 'stretch',
    padding: 12,
    flex: 1,
    backgroundColor: palette.screenBackground,
  },

First, we need to wrap this view in <Swipeable>.
Then, we need to create a function that will return a view that will be rendered when the user swipes to the left.



const renderRightActions = () => {
    return (
      <View style={styles.rightActions}>
        <TouchableOpacity
          style={styles.favoriteButton}
          onPress={onFavoritePressed}>
          <IconFavoriteBig />
          <Text style={styles.textInSwipe}>Favorite</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.deleteButton}
          onPress={onDeleteItemPressed}>
          <IconDelete />
          <Text style={styles.textInSwipe}>Remove</Text>
        </TouchableOpacity>
      </View>
    );
  };

Now, we need to pass this function to <Swipeable> as renderRightActions prop. The complete code of the component:



return (
    <Swipeable renderRightActions={renderRightActions}>
      <View style={styles.container}>
        <TouchableOpacity style={styles.cardContainer} activeOpacity={1}>
          <Image
            source={{
              uri: product?.images?.length
                ? product.images[0]
                : settings.PRODUCT_IMAGE_PLACEHOLDER,
            }}
            style={styles.imageMini}
          />

          <View style={styles.rightSide}>
            <Text style={styles.title} numberOfLines={2}>
              {product.title}
            </Text>

            <View style={styles.buttonAndPriceContainer}>
              <MiniProductButton
                quantity={
                  product.inCartCount ? (product.inCartCount as number) : 0
                }
                onPressAdd={() => {}}
                onPressRemove={() => {}}
              />

              <Text style={styles.priceText} numberOfLines={1}>
                {formatPrice(product)}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    </Swipeable>

This is it! The actions will appear after the user swipes the component:

You can create left actions in the same way and pass them as renderLeftActions.

There are also some useful props and methods that you should check out, such as friction or overshootLeft/Right.

Information about all available props and methods can be found here.

If you have any suggestions on how to improve this article, I'd love to hear them in the comments!

Simple shimmer placeholder in React Native

Sergei — Sat, 03 Feb 2024 18:47:17 +0000

In this short tutorial I will show you how to create a simple placeholder with a shimmering effect for your React Native app.

The libraries

We will be using two libraries: react-native-linear-gradient and react-native-gradient-shimmer.

Run these two commands to install them:
yarn add react-native-linear-gradient@next yarn add react-native-gradient-shimmer
or, for npm:
npm install react-native-linear-gradient@next npm install react-native-gradient-shimmer

Important! Why do we use @next? There is an open issue with the current stable version (as of February 2024) of react-native-linear-gradient library that causes problems when trying to create a shimmer placeholder, so we are using the pre-release 3.0.0-alpha.1 version. You can check if the new stable version is available here: Github page

Creating the shimmer component

I suggest that you use the library to create a single custom component that you can use anywhere in your app.

An example of a component:

import React, { FC } from 'react';
import LinearGradient from 'react-native-linear-gradient';
import GradientShimmer from 'react-native-gradient-shimmer';

interface PlaceholderWithShimmerProps {
  height?: number;
  width?: number;
  style?: any;
}

const PlaceholderWithShimmer: FC<PlaceholderWithShimmerProps> = React.memo(
  ({ height, width, style }) => {
    return (
      <GradientShimmer
        LinearGradientComponent={LinearGradient}
        backgroundColor={'gray'}
        highlightColor={'white'}
        height={height}
        width={width}
        style={style}
      />
);},);

export default PlaceholderWithShimmer;

Important! The library component requires a specified width and height (as a number) to work correctly. Your placeholder may look a bit different from the component it's supposed to replace - that's not a problem as long as it serves its purpose of informing the user that the content is loading.

There is also room for customisation! There are a few additional props that can change the look of your placeholder:
duration - the time it takes for the animation to play;
highlightWidth - the width of the highlighted area.
You can also set your own colors changing the values of the backgroundColor and highlightColor props.

Now, you can use this component anywhere in your app by setting different width, height and style.

Creating the placeholder

When creating a placeholder, the first thing I do is look at the styles of the original component that it is replacing and try to replicate the position of the elements.

Here I have a simple item card component:

I've used the same structure as the original component for my placeholder, replacing the Text and Button elements with the custom shimmering placeholder we created:

const ProductCardSkeleton: FC = () => {
  return (
    <View style={cardStyles.cardContainer}>
      <View style={cardStyles.image} />

      <View style={cardStyles.bottomHalfContainer}>
        <PlaceholderWithShimmer style={cardStyles.productTitle} />
        <PlaceholderWithShimmer style={cardStyles.productTitle2} />
        <PlaceholderWithShimmer style={cardStyles.priceLabel} />
        <PlaceholderWithShimmer style={cardStyles.button} />
      </View>
    </View>
  );
};

Tip! You can set up width and height of a component using style. Also, be careful not to make the components too big - they may not fit inside the parent component on smaller devices.

productTitle: {
    height: 18,
    backgroundColor: 'gray',
    borderRadius: 12,
    marginBottom: 4,
    width: 120,
  }

This is what the placeholder looks like now (not an animated gif, sorry!):

I recommend that you reload the application after changing the components, as not doing this can cause the shimmering animation to appear out of sync.

This is it! I hope this post was helpful! If there are better ways to create a shimmering effect component in React Native, I'd love to hear about it in the comments!

You can also use the component without specifying the width and height (in case you need to size your shimmering elements using other methods, like flex or alignSelf), but this will cause errors when running the app and may lead to unexpected problems.