borderRadius not applied on FlatList

Question

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:

1. Setting borderRadius={6} as a parameter in the FlatList, not in the style (e.g. .
2. Enclosing the FlatList in a View and applying style={{borderRadius: 6, overflow: 'hidden'}} to the view
3. Setting style={{borderRadius: 6, overflow: 'hidden'}} to my ImageBackground that encloses the FlatList and other UI elements
4. 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. :)

Answer 1

I finally managed to get it working by adding contentContainerStyle={{borderRadius: 6, overflow: 'hidden'}} to the FlatList.

Answer 2

Recreated the structure and for me its working fine with border radius Snack link: https://snack.expo.io/@msbot01/disrespectful-chocolate

<View style={styles.container}>
        <ImageBackground source={{uri: 'https://artofislamicpattern.com/wp-content/uploads/2012/10/3.jpg'}} style={{width: '100%', height: '100%',opacity:0.8, alignItems:'center', justifyContent:'center'}}>
          <FlatList
            data={[{key: 'a', value: 'Australia'}, {key: 'b', value:'Canada'}]}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            style={{backgroundColor:'white', width:'90%', borderRadius:10, margin:10, marginBottom:10, paddingTop:10, paddingBottom:10, paddingLeft:10, position:'absolute', zIndex: 1}}
          />
        </ImageBackground>
      </View>

Answer 3

To add styles use like this:

<ListItem containerStyle={{ borderRadius: 8, overflow: 'hidden', }} />