tamanho/cor do grid de item | React Native: Design System no seu app

Boa tarde!

Estou acompanhando as aulas mas o meu grid ao redor dos produtos não está ocupando a tela toda do cel, e tem um pedaço em branco na parte inferior.

Esse é o código:

import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native'

const estilos = StyleSheet.create({
    imagem: {
        height: 84,
    },

    containerItem: {
        height: 168,
        borderRadius: 10,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 8,
        backgroundColor: 'white',
    },

    textoItem: {
        marginTop: 8,
        fontSize: 14,
        color: '#848486'
    }
})

function Produto({titulo, imagem}) {
        return(
            <View style={estilos.containerItem}>
                <Image
                    source={imagem}
                    style={estilos.imagem}
                    resizeMode='contain'
                />
                <Text style={estilos.textoItem}>{titulo}</Text>
            </View>
        );
}

export default Produto

import { FlatList, View, StyleSheet } from "react-native";
import { DATA } from "../../../../assets/utils/data.js";
import React from "react";
import Body from "../BodyHome";
import Produto from "../Produto";

const estilos = StyleSheet.create({
    lista: {
        backgroundColor: '#d5d5d5',
    },

    container: {
        backgroundColor: '#d5d5d5',
        padding: 5,

    }
})
function ListaProdutos() {
  return (
    <View style={estilos.container}>
      <FlatList
        numColumns={2}
        data={DATA}
        renderItem={({ item }) => <Produto {...item} />}
        keyExtractor={(item) => item.id}
        ListHeaderComponent={<Body />}
        style={estilos.lista}
      />
    </View>
  );
}

export default ListaProdutos;

import React from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

const estilos = StyleSheet.create({
  containerInicial: {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "black",
    alignItems: "center",
    paddingHorizontal: 25,
    paddingVertical: 15,
  },

  containerSecundario: {
    flexDirection: "row",
    justifyContent: 'flex-end',
    padding: 10,
    alignItems: 'center', 
  },

  botaoMatricular: {
    color: 'white',
    fontSize: 14,
    padding: 14,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 20
  },

  botaoLogin: {
    marginLeft: 15,
    color: 'white',
    fontSize: 14,
    padding: 14,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 20,
},

  textoLogo: {
    color: "white",
    fontSize: 10,
  },
});

function Cabecalho() {
  return (
    <View style={estilos.containerInicial}>
      <Text style={estilos.textoLogo}>Logo</Text>
      <View style={estilos.containerSecundario}>
      <TouchableOpacity>
        <Text style={estilos.botaoMatricular}>Matricule-se</Text>
      </TouchableOpacity>
      <TouchableOpacity>
        <Text style={estilos.botaoLogin}>Login</Text>
      </TouchableOpacity>
      </View>
    </View>
  );
}

export default Cabecalho;

import { FlatList, View, StyleSheet } from 'react-native';
import {DATA} from '../../../../assets/utils/data'
import Produto from '../Produto';
import React from 'react';

function Body() {
    return (<View>
           </View>
            );
}

export default Body

import React from "react";
import Body from "./Componentes/BodyHome";
import Cabecalho from "./Componentes/CabecalhoHome";
import ListaProdutos from "./Componentes/ListaProdutos";

function Home() {
  return (
    <>
      <Cabecalho />
      <ListaProdutos />
    </>
  );
}

export default Home;

import React from "react";
import { SafeAreaView, StatusBar, Text, View, StyleSheet} from "react-native";
import Home from './src/telas/Home'

const estilos = StyleSheet.create({
  global: {

  }
});

export default function App() {
  return (
    <SafeAreaView>
      <StatusBar/>
        <Home style={estilos.global}/>
    </SafeAreaView>
  );
}

Alguma idéia do porquê ter um pedaço de brackground branco atrás do grid cinza?

Obrigado

Mergulhe em programação