Flatlist - Set height and scroll - scroll

Question

I need help in setting correctly a Flatlist in my React Native app.
What I need is:
I have a View
Inside that view i have a title on top and a bottom below.
Between I want to insert a Flatlist that displays a list of elements, but i want a fixed height and scroll capability to see all elements from the list.
Part of my code:
return (
<Container theme={theme}>
<TitleContainer theme={theme}>
<Title theme={theme}>Destino da publicação:</Title>
</TitleContainer>
<ButtonContainer>
<Option theme={theme} onPress={() => setView('contacts')}>
<Texto theme={theme}>Contactos</Texto>
</Option>
<Option theme={theme} onPress={() => setView('groups')}>
<Texto theme={theme}>Grupos</Texto>
</Option>
</ButtonContainer>
<ContactContainer>
{view === 'contacts' && (
<FlatList
key="contactList"
data={contactListFiltered}
renderItem={renderItemContact}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Sem contatos
</Text>
)}
keyExtractor={(item) => item.email}
/>
)}
{view === 'groups' && (
<FlatList
key="groupListShare"
data={groupListFiltered}
renderItem={renderItemGroup}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Não existem grupos criados
</Text>
)}
keyExtractor={(item) => item}
/>
)}
<ButtonContainer>
<Option onPress={close} theme={theme}>
<MaterialCommunityIcons
name="cancel"
size={VMHSize(811, 25)}
color={theme.mainColor}
/>
<OptionText theme={theme}>Cancelar</OptionText>
</Option>
</ButtonContainer>
</ContactContainer>
</Container>
);
};
I already tried many suggestions I readed, but or the flatlist appears with the height I want but i cant scroll the content, or the flatlist renders all elements pushing the bellow content of the view to outside the view.
To explain the idea if the code:
I´m building a social media app, something alike facebook. I have a view Posts, where i have a flatlist that displays the posts from the feed for the user.
Then, each post have a Options button with many options, one is to share the post with another friend. In the code above, i need to show in a view with a fixed height, a list with the friends. If i have many friends, i need to scroll that list within the limited size view. I´m using another flatlist to list the friends.
Can anybody help me? Thanks!

Answer 1

Well, I resolved my problem with a ScrollView and nestedScrollEnabled prop.
<ScrollView style={{ height: VMHSize(811, 300) }} nestedScrollEnabled>
{view === 'contacts' && (
<FlatList
key="contactList"
data={contactListFiltered}
renderItem={renderItemContact}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Sem contatos
</Text>
)}
keyExtractor={(item) => item.email}
/>
)}
{view === 'groups' && (
<FlatList
key="groupListShare"
data={groupListFiltered}
renderItem={renderItemGroup}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Não existem grupos criados
</Text>
)}
keyExtractor={(item, index) => item + index}
/>
)}
</ScrollView>