React Native : Conditional Views-CodePudding

I want to make it so that depending on my result(the number of elements of my data), I could add a certain number of row to my code. For exemple if this number is 0=>1row, 1=>1row, 2=>2row,3=>2row, 4=>3row, ... I did try but the result is always on 1 line :

              let count = 0;
              let reste = 0;
              let total = 1;
              let same = 0;
...
//I'm doing a map of my data here so this code is used as many time as there is of elements //in my data
                    if (total !== same) {
                      return (
                        <View style={{ width: "40%", marginLeft: 70 }}>
                          <Text
                            style={{
                              fontSize: 18,
                              fontWeight: "600",
                              marginTop: 25,
                              width: "50%",
                            }}
                          >
                            {count  }
                            {(reste = count % 2)}
                            {(total = (count   reste) / 2)}
                            {letter.data[index]}
                            {"\n"}
                          </Text>
                          <Text style={{ marginTop: 50, width: "50%" }}>
                            {letter.description[index]}
                            {"\n"}
                          </Text>
                        </View>
                      );
                    } else {
                      return (
                        <View style={{ flexDirection: "column" }}>
                          <View style={{ width: "40%", marginLeft: 70 }}>
                            <Text
                              style={{
                                fontSize: 18,
                                fontWeight: "600",
                                marginTop: 25,
                                width: "50%",
                              }}
                            >
                              {count  }
                              {(reste = count % 2)}
                              {(total = (count   reste) / 2)}
                              {letter.data[index]}
                              {"\n"}
                            </Text>
                            <Text style={{ marginTop: 50, width: "50%" }}>
                              {letter.description[index]}
                              {"\n"}
                            </Text>
                          </View>
                        </View>
                      );
                    }

Is there any solution ? I didn't find anything.

CodePudding user response：

Judging from the answer to my question in the comments, you want to have 2 columns and n rows.

You could use FlatList with numColumns set to 2 and the row handling will be done automatically by the component.

Here is a minimal example, in which data is your data array. I removed the styles for the sake of simplicity.

<FlatList
    data={data}
    numColumns={2}
    keyExtractor={(_, index) => index.toString()}
    renderItem={({item}) => {
        return <View>
            <Text>
                {letter.description[index]}   
            </Text>
        </View>
    }}
/>