How do I create a swipeable card stack in React Native?

You can create a swipeable card stack in React Native using libraries like react-native-gesture-handler and react-native-reanimated to handle gestures and animations. This method builds an engaging UI for actions similar to popular dating apps, allowing users to swipe through cards effortlessly.

What libraries do I need for swipeable cards?

To build swipeable cards, install the following libraries:

• react-native-gesture-handler (version 2.0 or newer)
• react-native-reanimated (version 2.3 or newer)
• react-native-paper or any other UI library for design components (optional)

Install these via npm:

npm install react-native-gesture-handler react-native-reanimated react-native-paper

Ensure you follow the setup instructions for both gesture-handler and reanimated, particularly adding them as dependencies in your main app file.

How do I set up the swipeable card stack?

Set up the swipeable card stack using a combination of the PanGestureHandler from react-native-gesture-handler and animated values from react-native-reanimated. Here’s how:

1. Import necessary libraries:

   import React, { useState } from 'react';
   import { View, Text, StyleSheet } from 'react-native';
   import { PanGestureHandler } from 'react-native-gesture-handler';
   import Animated, { useCode, set, cond, eq, add, event } from 'react-native-reanimated';
   

2. Create a basic card component:

   const Card = ({ item }) => {
     return (
       <View style={styles.card}>  
         <Text style={styles.cardText}>{item.title}</Text>
       </View>
     );
   };
   

3. Implement the swipeable logic:

   const SwipeableCardStack = ({ data }) => {
     const [currentIndex, setCurrentIndex] = useState(0);
   
     const onSwipe = (event) => {
       const translationX = event.nativeEvent.translationX;
       const swipingLeft = translationX < 0;
   
       // Only update index if swiped
       if (Math.abs(translationX) > 100) {
         setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, data.length - 1));
       }
     };
   
     return (
       <View style={styles.container}>
         {data.map((item, index) => (
           <PanGestureHandler onGestureEvent={onSwipe} key={index}>
             <Animated.View style={[styles.card, { opacity: index === currentIndex ? 1 : 0 }]}>
               <Card item={item} />
             </Animated.View>
           </PanGestureHandler>
         ))}
       </View>
     );
   };
   

4. Style your component:

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
     card: {
       width: 300,
       height: 400,
       borderRadius: 10,
       borderWidth: 1,
       borderColor: '#ccc',
       margin: 10,
       justifyContent: 'center',
       alignItems: 'center',
     },
     cardText: {
       fontSize: 18,
       fontWeight: 'bold',
     },
   });
   

Why might my swipeable card stack feel laggy?

Lag in a swipeable card stack is often due to heavy animations or the use of too many components at once on lower-end devices. To improve performance:

• Limit the number of rendering cards to only two or three at a time.
• Optimize animations by using react-native-reanimated instead of standard Animated API. Additionally, ensure you're using the shouldComponentUpdate lifecycle method or React.memo for functional components to prevent unnecessary re-renders.

How do I handle swipe thresholds and directions?

To improve swipe detection, implement a threshold for when a swipe action should occur. This can be adjusted based on user preference or application needs:

const swipeThreshold = 100;

const onSwipe = (event) => {
  const translationX = event.nativeEvent.translationX;
  if (Math.abs(translationX) >= swipeThreshold) {
    // Handle swipe actions accordingly
  }
};

Can I customize the card appearance?

Yes, customize card appearance using styles or react-native-paper components. Adjust UI elements, colors, images, and fonts within the Card component to match your app's design language. For example:

const Card = ({ item }) => {
  return (
    <View style={[styles.card, { backgroundColor: item.color }]}>  
      <Text style={styles.cardText}>{item.title}</Text>
      <Image source={item.image} style={styles.cardImage} />
    </View>
  );
};

How do I switch between different swipeable cards?

Switching between different swipeable cards is done through updating the currentIndex state, as shown in the swipe logic. To ensure user experience is smooth, consider adding animation to the card transition:

<Animated.View style={{ opacity: interpolate(...) }}>  
  <Card item={data[currentIndex]} />
</Animated.View>

What are some performance considerations for Android?

On mid-range Android devices, be aware that rendering too many animated components can cause frame drops. Limit the number of animated cards on-screen and avoid complex animations (e.g., background images or large vector images) to maintain smooth performance. Instead, use simple solid colors or gradients where appropriate.

How do I integrate AI to enhance my card swiping experience?

Integrating AI can enhance your swiping experience by using algorithms to personalize card recommendations based on user preference. You can run background analysis on user selections and serve them optimized content, tailoring the cards shown based on their interactions.

What next?

Now that you have the basics of creating a swipeable card stack, consider experimenting with animations, transitions, and user interactions to refine your app further. If you're looking for code examples or entire flows, check out Clevens for ready-made snippets that fit right into your project.