I have a ScrollView in my React Native app that doesn't scroll. I've read all the questions regarding this subject here, but no answer is the right one for me. Here's my component, which doesn't have a parent component :
const SearchBarScreen = () => {
return (
<ScrollView style={{
borderRadius: radius.m,
backgroundColor: colors.darkPurple,
paddingHorizontal: sizes.side,
paddingVertical: 50,
flexGrow: 1
}}>
<BackButton style={{
position: 'static',
top: 0,
left: 0
}} />
<SearchBar />
</ScrollView>
)
}
Here's the return of the SearchBar component :
return (
<View style={{
height: 100,
...boxShadow(0, 4, 12, colors.grayscale.black, 0.6),
zIndex: 100,
}}>
<InputText
onChange={setQuery}
placeholder="Your search"
placeholderTextColor={colors.fifth}
style={{ backgroundColor: colors.forth }}
/>
{showResults && query ? (
<View style={styles.usersColumn}>
{users.map((user) => {
return <CustomCard item={user} key={user.uid} navigation={navigation} />
})}
</View>
) :
null
}
</View>
)
And here's the CustomCard return :
return (
<TouchableOpacity style={{
flexDirection: 'row',
height: 90,
width: '100%',
backgroundColor: colors.grayscale.white,
borderRadius: 10,
justifyContent: 'space-evenly',
alignItems: 'center',
paddingHorizontal: 15,
marginBottom: 20
}}
onPress={onPress}>
<UserAvatar user={user} size={50} />
<View style={styles.customCard.infoContainer}>
<Text
style={styles.customCard.name}
numberOfLines={1}
ellipsizeMode="tail">
{displayName}
</Text>
<Text
style={styles.customCard.address}
numberOfLines={2}
ellipsizeMode="tail">
{user?.location.description}
</Text>
</View>
<Ionicons name='arrow-forward-sharp' size={25} color={colors.primary} />
</TouchableOpacity>
)
I've tried adding a View around my ScrollView as suggested in certain answers here or replacing the style prop on my view by a contentContainerStyle prop, but it doesn't help. So why is my ScrollView not scrolling ?
The solution was to remove the height property of the outer View inside the SearchBar component.
return (
<View style={{
...boxShadow(0, 4, 12, colors.grayscale.black, 0.6),
zIndex: 100,
}}>
<InputText
onChange={setQuery}
placeholder="Your search"
placeholderTextColor={colors.fifth}
style={{ backgroundColor: colors.forth }}
/>
{showResults && query ? (
<View style={styles.usersColumn}>
{users.map((user) => {
return <CustomCard item={user} key={user.uid} navigation={navigation} />
})}
</View>
) :
null
}
</View>
)