I’m working on a simple app in React Native and Expo. The idea is based on how Tinder looks like, but in my app there’s list of questions. User answer for them by swiping left or right. If you swipe right, the text on that particular item is pushed to another array. When you answer the last question, you’ll get a simple listview component with all items you’ve swiped right.

I have 150 items in my JSON file, so I generate 150 tiles, but to keep it more alive I use split function to always load current and current + 1 file.
My problem is – after 15, 20 questions performance drops. Moving tiles around the screen is smooth, but they disappear from the screen for about 1s.

I’ve been stuck for a few days. I have tried many solutions, searched in Google, but still cannot solve it.

Thanks for any suggestions.

Main file:

import React, { useState, useEffect, useCallback } from 'react';
import { View } from 'react-native';
import styles from './theme';
import Reload from './Reload';
import questionsList from './full';
import SingleCard from './SingleCard';

const db = questionsList;

function CardsTwo() {
  const [collectedList, setCollectedList] = useState([]);
  const [progressBar, setProgressBar] = useState(0);
  const [preparedData, setPreparedData] = useState([]);

  const updateParentState = () => {
    setCollectedList([]);
    setProgressBar(0);
  };

  const handleCardSwipe = useCallback((direction, cardContent) => {
    setProgressBar((prev) => {
      const newProgress = prev + 1;
      if (direction === 'right' && prev >= 1) {
        setCollectedList((prevList) => [...prevList, cardContent]);
      }
      return newProgress;
    });
  }, []);

  useEffect(() => {
    if (progressBar === db.length) {
      updateParentState();
    }
  }, [progressBar]);

  useEffect(() => {
    if (progressBar < db.length) {
      const newData = db.slice(progressBar, progressBar + 2).reverse();
      setPreparedData((prevData) => [...prevData, ...newData]);
    }
  }, [progressBar]);

  return (
    <View style={styles.container}>
      {progressBar < questionsList.length ? (
        <View style={styles.cardContainer}>
          <SingleCard
            data={preparedData}
            progress={progressBar}
            swiped={handleCardSwipe}
          />
        </View>
      ) : (
        <Reload values={collectedList} updateParentState={updateParentState} />
      )}
    </View>
  );
}

export default CardsTwo;

Single card:

import React from 'react';
import { Text, View } from 'react-native';
import TinderCard from 'react-tinder-card';
import styles from './theme'

function SingleCard(props) {
    
    const swiped = (dir, question) => {
        props.swiped(dir, question)        
    }
    
    return (
        <View>
            {props.data.map((question, index) => (
                <TinderCard key={index} onSwipe={(dir) => swiped(dir, question.tresc)} preventSwipe={['up', 'down']}>
                    <View style={styles.card}>
                        <View style={styles.addonTitle}>
                            <Text style={styles.cardTitle}>{question.addon}</Text>
                        </View>
                        <Text style={styles.cardContent}>{question.tresc}</Text>
                        <Text style={styles.progress}>{props.progress + " / " + props.data.length}</Text>
                    </View>
                </TinderCard>
            ))}
        </View>
    );
}

export default SingleCard;

I need to improve performance. Till today I use split array to generate components, I split file to smaller components and add improvements in lines execte when user swipe card.

New contributor

Dellow is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.