How to divide FlatList items with a vertical and horizontal line in React-Native

Question

I would like to separate the items I have inside my Flatlist with a vertical and horizontal line, between the items, just as the green lines show. I tried with the itemSeparator but it just creates a horizontal line. The data is hardcoded waiting for a database. I also tried it searching it on google but it seems it's a very concrete question. This is the code I have:

render() {

    const { navigate } = this.props.navigation;
    let data = [{
      "equipo": "Equipo 1",
      "nombre": "App de cervezas"
    }, 
    {
      "equipo": "Equipo 2",
      "nombre": "Base de datos"
    }, 
    {
      "equipo": "Equipo 3",
      "nombre": "Anti-bullying"
    },
    {
      "equipo": "Equipo 4",
      "nombre": "No lo se"
    }, {
      "equipo": "Equipo 5",
      "nombre": "Valoracion de apps"
    }, {
      "equipo": "Equipo 6",
      "nombre": "Upcoming"
    },
    {
      "equipo": "Equipo 7",
      "nombre": "Upcoming"
    }, {
      "equipo": "Equipo 8",
      "nombre": "Upcoming"
    },
    ]

    return (
      <View style={styles.mainContainer}>

        <View style={styles.flatlistContainer}>

          <FlatList
            data={data}
            numColumns={2}

            renderItem={({ item }) => 

              <Producto 
                equipo={item.equipo}
                nombre={item.nombre}
              ></Producto>
            }

            keyExtractor={item => item.equipo}
          />

        </View>


        <TouchableOpacity><Text>Volver a intruducir usuario</Text></TouchableOpacity>

      </View>
    );
  }

The styles of the flatlist

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },

  flatlistContainer: {
    flex: 10/9,

    borderWidth: 1,
  },
})

The styles of the items

itemContainer: {
      justifyContent: "center",
      alignItems: "center",

      marginLeft: 10,
      marginRight: 10,
      marginTop: 10,

      borderWidth: 1
    },

    item_LogoContainer: {
      flex: 1/2,
      justifyContent: "center",
      alignItems: "center",
    },

    item_DescriptionContainer: {
      flex: 1/3,
      justifyContent: 'center',
      alignItems: "center",

      marginTop: 5,
    },

My producto code

render() {
        return (
            <View style={styles.mainContainer}>

              <View style={styles.itemContainer}>

                <View style={styles.item_LogoContainer}>
                  <Image source={require('../images/LogoApp.png')} style={{ width: 100, height: 100 }}></Image>
                </View>

                <View style={styles.item_DescriptionContainer}>

                  <Text style={styles.textName}>
                    {this.props.nombre}
                  </Text>

                  <Text style={styles.textTeam}>
                    {this.props.equipo}
                  </Text>

                </View>

              </View>

            </View>
        );
    }

Answer 1

@Aldimir please refer this link, for add Separator in flatlist

https://www.techiediaries.com/react-native-tutorial/flatlist-header-separators/

React Native FlatList separator between columns