4

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. :)

Narcis
  • 196
  • 4
  • 14
  • Added flat list in the background image wrapper and used borderRadius its working fine. Here is the working example https://snack.expo.io/@msbot01/disrespectful-chocolate – Pramod Jul 18 '19 at 06:18
  • @Pramod I get an error when I access the snack - Device: (101:391) Invariant Violation: Text strings must be rendered within a component. I tried to modify the snack, but the error doesn't go away. Could you please check the snack? – Narcis Jul 18 '19 at 20:19

3 Answers3

8

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

Narcis
  • 196
  • 4
  • 14
0

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>

snapshot

Pramod
  • 1,835
  • 8
  • 14
  • 1
    Thanks for the edit! I finally managed to get it working by setting `contentContainerStyle={{borderRadius: 6, overflow: 'hidden'}}` on the FlatList. – Narcis Jul 20 '19 at 12:51
0

To add styles use like this:

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

Angel Brun
  • 11
  • 3