Cannot scroll to Flat List

Question

I’m building a recipe app with React Native, Expo and Firebase... I’m creating a Flatlist to render cards from an array of objects, but when the cards exceed the height of the screen I can’t see them or scroll down. I will pass the screen code, styles and Component.

Canvas:

import React, { useState } from 'react';
import { View, Text, KeyboardAvoidingView, FlatList } from 'react-native'
import Icon from 'react-native-vector-icons/Feather'

import firebase from '../database/firebase'

import RecipeCard from '../components/RecipeCard'

import homeScreenStyles from '../styles/home'


export default function Home() {
  
  const [currentUsername, setCurrentUsername] = useState('')

  firebase.db.collection('users').doc(firebase.a.currentUser.uid).get().then(doc => {setCurrentUsername(doc.data().username)})

  const recipes = [
    {
      id: 'DCpOUeYJPfB2ZxhM07MP',
      author: ['Vininha', '337hqUeV38Oo2vsFyXfhmOE4Q4s2'],
      ingredients: '6 colheres de sopa de azeite, 1 pimentão amarelo cortado em tiras, 2 talos de alho poró picados, ervas secas como tomilho e hortelã a gosto, 1 brócolis comum cortado em florete cozido, 500 gramas de macarrão talharim cozido al dente',
      likes: 0,
      name: 'Macarrão com Brócolis',
      preparationMode: '1. Em uma panela em fogo médio aquecida com azeite, coloque 1 pimentão amarelo cortado em tiras e refogue por 7 minutos.2. Adicione 2 talos de alho poró picados e deixe dourar levemente por 1 minuto e meio.3. Acrescente as ervas secas a gosto, 1 brócolis comum cortado em florete e cozido, o macarrão cozido, o cominho em pó e as raspas de limão a gosto.4. Desligue o fogo e sirva com alho frito.'
    },

    {
      id: 'fDE9o5sr2rwxeLHsCjAM',
      author: ['Simone', 'GDklJVSsSXRbGOwTp3DnPO0BXTE3'],
      ingredients: '6 fatias de peito de peru',
      likes: 0,
      name: 'Chips Crocantes de Peito de Peru',
      preparationMode: '1. Em um prato forrado com 3 folhas de papel toalha, coloque 3 fatias de peito de peru defumado, cubra com mais 3 folhas de papel toalha e mais 3 fatias de peito de peru defumado.2. Cubra novamente com mais 3 folhas de papel toalha e leve ao micro-ondas por 6 minutos.3. Retire do micro-ondas e sirva em seguida.'
    }
  ]

  return (
    <View style={homeScreenStyles.container}>
      <KeyboardAvoidingView behavior='padding-'>

        <View style={homeScreenStyles.header}>
          <Icon name='log-out' size={25} color='black' onPress={() => firebase.a.signOut()}/>
          <Text style={homeScreenStyles.title}>Olá, {currentUsername}</Text>
          <Text style={homeScreenStyles.description}>Está na hora de cozinhar com a alma</Text>
        

          <View style={homeScreenStyles.searchInputArea}>
            <View style={homeScreenStyles.searchInput}>
              <Icon name='search' size={20} color='#686868'/>
            </View>
          </View>

        </View>

        <View style={homeScreenStyles.popularRecipesArea}>

          <Text style={homeScreenStyles.popularRecipesDescription}>Veja as receitas mais populares do momento</Text>

          <FlatList 
          data={recipes}
          keyExtractor={(item) => {item.id}}
          renderItem={({ item }) => {
            return(
              <RecipeCard 
              thumbnail={require('../../assets/macarrao.jpg')}
              title={item.name}
              author={item.author[0]}
              numberOfLikes={item.likes}
              />
            )
          }}
          />

        </View>

      </KeyboardAvoidingView>
    </View>
  )
}

Styles:

import { StyleSheet } from 'react-native'

const homeScreenStyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF'
    },

    header: {
        marginTop: 70,
        marginLeft: 30,
    },

    title: {
        fontFamily: 'Poppins_700Bold',
        fontSize: 24,
        marginTop: 15
    },

    description: {
        fontFamily: 'DMSans_700Bold',
        fontSize: 16,
        color: '#FF4600',
        marginTop: 10,
    },

    searchInputArea:{
        marginTop: 30,
    },  

    searchInput: {
        backgroundColor: "#E5E5E5",
        borderRadius: 10,
        width: 350,
        height: 50,
        marginTop: 5,
        padding: 15,
    },

    popularRecipesArea: {
        backgroundColor: '#FAF6F1',
        marginTop: 35,
        borderTopRightRadius: 30,
        borderTopLeftRadius: 30,
        paddingTop: 25,
        alignItems: 'center'
    },

    popularRecipesDescription: {
        fontSize: 13,
        color: '#686868',
        fontFamily: 'DMSans_400Regular',
        marginBottom: 40,
    }

})

export default homeScreenStyles

Card Component:

import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/Feather'

import globalStyles from '../styles/global'

export default function RecipeCard(props) {
    return (
        <TouchableOpacity style={globalStyles.recipeCard} >
              <Image 
              source={props.thumbnail} 
              style={globalStyles.recipeCardThumbnail} 
              resizeMode='cover' 
              width={315}
              height={115}
              />

              <View style={globalStyles.recipeCardInfo}>

                <View>
                  <Text style={globalStyles.recipeCardTitle}>{props.title}</Text>
                  <Text style={globalStyles.recipeCardAuthor}>{props.author}</Text>
                </View>

                <View style={globalStyles.recipeCardLikes}>
                  <Icon name='heart' size={15} color='black' />
                  <Text style={globalStyles.recipeCardNumberOfLikes}>{props.numberOfLikes}</Text>
                </View>
              </View>

            </TouchableOpacity>
    )
    
}

Answer 1

Hello, Is there a special reason you’re using Keyboardavoidingview? If so, you need to add flex:1 the stylisation of this component, in styleor in the contentContainerStyle. I look forward to your feedback, thank you :).