I have a FlatList that gets displayed whenever someone inputs text in a TextInput. The issue that I'm facing is that borderRadius is applied on iOS, but not on Android (see what I mean at https://gitlab.com/narcis11/jobzy/uploads/2377b0617461a1ce35e3ae249b28c93c/rounded-edges.png ). The screenshot is from a Google Pixel emulator running API 28.
I am running on Expo 33, which is based on React Native 0.59.8.
I've tried the following:
- Setting borderRadius={6} as a parameter in the FlatList, not in the style (e.g. .
- Enclosing the FlatList in a View and applying style={{borderRadius: 6, overflow: 'hidden'}} to the view
- Setting style={{borderRadius: 6, overflow: 'hidden'}} to my ImageBackground that encloses the FlatList and other UI elements
- Setting borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius to 6.
Needless to say that neither of these solutions solved my problem.
This is my FlatList, which sits in an ImageBackground:
<ImageBackground style={styles.bkgImage} source={require('../assets /homepage_background.jpg')}>
<Text style={styles.header}>{i18n.t('appName')}</Text>
<Text style={styles.descText}>{i18n.t('homepage.header1')}{'\n'}{i18n.t('homepage.header2')}</Text>
<TextInput
style={styles.jobTextInput}
value={this.state.jobInputValue}
placeholder={i18n.t('homepage.jobInput')}
onChangeText={(jobInputValue) => this.setState({jobInputValue}, this.checkJobsDropdown(jobInputValue))}/>
<FlatList
data={this.state.jobsList}
style={this.state.showJobsDropdown ? styles.jobsDropdownStyle : styles.dropdownHiddenStyle}
renderItem={({ item }) => (
<ListItem
title={item}
containerStyle={{paddingBottom: -4}}
titleProps={{style:styles.dropdownItemStyle}}
onPress={() => this.setState({jobInputValue: item}, this.hideJobsDropdown())}
/>
)}
keyExtractor={item => item}
/>
And this is the style applied to it:
jobsDropdownStyle: {
width: 300,
height: 140,
...Platform.select({
ios: {
marginTop: 240
},
android: {
marginTop: 250
}
}),
borderRadius: 6,
zIndex: 1,
position:'absolute'
}
I expect the corners of the FlatList to be rounded on Android. However, they are not.
Any help will be appreciated. :)