React-native issue performance

Question

So today i want to create exam app and display answer (and where user mark answer) . So i used that library for radio buttons. My code so far (part of it) -

                   <FlatList
                    // key={stepRef}
                    data={questions}
                    renderItem={(data) => {
                      let i = data && data.index;
                      let questionStyle = {};
                      if (i != stepRef) questionStyle = { display: "none" };
                      return (
                        <RadioButtonRN
                          key={i}
                          style={questionStyle}
                          textStyle={{ color: "white" }}
                          boxStyle={{ backgroundColor: "#1b1b36" }}
                          deactiveColor="#5a5c75"
                          // animationTypes={["shake"]}
                          activeColor="#25c79c"
                          data={questions[i].answers.map((item, index) => ({
                            label: item.text,
                            id: index,
                          }))}
                          selectedBtn={(e) => {
                            // questions[i].answers[e.id].userInput = true;
                            // questions[stepRef].isAnswered = true;
                            // for (let j = 0; j <= 3; j++) {
                            //   if (j != e.id) {
                            //     questions[i].answers[j].userInput = false;
                            //   }
                            // }
                            // setQuestions(questions);
                          }}
                        />
                      );
                    }}
                  />

But i recommend to visit stack expo for full code . So my problem here is that i have performance issue! In web test everything works fine but when i ran this code on the android phone (from 2018 for example) it lagging (change step very slowly) when i click next question. I think thats because it load many data at once. For that reason i used FlatList but nothing happened again? Now i dont know how to fix that. See video example. And now i dont know how to fix this delay when switching steps?

Answer 1

You are using the wrong approach.

There is no need to use a flatlist if you need to show just few items.

A scrollview will be good with great performance:

  const [answers, setAnswers] = React.useState([]);

    <View style={styles.container}>
    <ScrollView>
        <RadioButtonRN
          textStyle={{ color: "white" }}
          boxStyle={{ backgroundColor: "#1b1b36" }}
          deactiveColor="#5a5c75"
          // animationTypes={["shake"]}
          activeColor="#25c79c"
          data={questions[stepRef].answers.map((item, index) => ({
            label: item.text,
            id: index,
          }))}
          selectedBtn={(e) => {
            if (e) {
              const newAnswersList = [...answers];
              newAnswersList[stepRef] = Number(e.id)+1;
              setAnswers(newAnswersList);
            }
          }}
        />
      </ScrollView>
      <Button title="Next question" onPress={() => nextEle()} />
      <Button title="Prev question" onPress={() => prevEle()} />
      <Text>current question is {stepRef}</Text>
    </View>