mobile - Create a gridlayout without using flatlist with React

Question

What I'm trying to do is a dashboard screen with fixed cardviews, that is, I won't have to pull data from an api all the time and they would redirect to other screens, using touchableopacity. I found several references on the internet but none made it clear how to do this without using a flatlist and they always pulled data from some api. Here below is a reference that I found, but instead of pulling an api I would like something static, I thought about using a scrollview but I didn't understand how I can do it leaving it similar to a flatlist (the advantage of the flatlist is that it has the numColumns parameter).

renderItem = ({ item, index }) => {
    let url = item.url;
    const idPokemon = url.split('https://pokeapi.co/api/v2/pokemon/');
    const link = urlImage + idPokemon[1].substring(0, idPokemon[1].length - 1) + ".png";
    console.log('link', link)
    return <View style={styles.item}>
      <Image
        style={styles.image}
        resizeMode="contain"
        source={{ uri: link }}
      />
      <Text style={styles.text}>{item.name}</Text>
    </View>
  }

  render() {
    const { data } = this.state;
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          numColumns={2}
          style={styles.container}
          data={data}
          renderItem={this.renderItem}
          keyExtractor={item => `key-${item.name}`}
        />
      </SafeAreaView>
    );
  }

question from:https://stackoverflow.com/questions/65898664/create-a-gridlayout-without-using-flatlist-with-react

Answer 1

Waitting for answers