I can't figure out why borderRadius is not working on a flatList component

Question

I am making a chat in react native that is done by using a FlatList component to display the messages. I'm trying to style the messages so they are round but the borderRadius isn't working (Left, Right, Top or Bottom). I found this: borderRadius not applied on FlatList but even after adding overflow: 'hidden' to my code I can't get it to show anything but rectangles.

The code:

render(){
        return(
              <View style={styles.container}>
                  <View style={styles.messages}>
                      <FlatList
                          data={this.state.messages}
                          renderItem={({ item }) =>    this.renderTextItem(item)}
                          keyExtractor={(item, index) => index.toString()}
                          extraData={this.state.messages}
                      />
                  </View>
                  <KeyboardAvoidingView
                    style={styles.inputContainer}
                    behavior={(Platform.OS === 'ios') ? "padding" : null} enabled
                    keyboardVerticalOffset={Platform.select({ios: 80, android: 500})}
                  >
                        <TextInput
                            onChangeText={(text) => this.setState({userInput: text})}
                            value={this.state.userInput}
                            style={styles.textInput}
                            editable={this.state.inputEnabled}
                            placeholder={'Type something'}
                            autoFocus={true}
                            multiline={true}
                            onSubmitEditing={this.handleTextSubmit.bind(this)}
                        />
                  </KeyboardAvoidingView>
              </View>

          )
    }

The styles:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.WHITE
    },
    messages: {
        flex: 1,
        marginTop: 20,
        overflow: "hidden"
    },
    botMessages: {
        color: colors.BLACK,
        backgroundColor: '#EEE',
        padding: 10,
        borderBottomLeftRadius: 90,
        borderBottomRightRadius: 90,
        borderTopLeftRadius: 90,
        marginBottom: 0,
        borderTopRightRadius:90,
        alignSelf: 'flex-start',
        bottom: 23,
        textAlign: 'left',
        width: '75%'
    },
    userMessages: {
        backgroundColor: colors.CHATREPLY,
        color: colors.WHITE,
        padding: 10,
        marginBottom: 10,
        marginRight: 5,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 0,
        borderTopLeftRadius: 80,
        borderTopRightRadius: 20,
        width: '45%',
        alignSelf: 'flex-end',
        textAlign: 'left'
    },
    responseContainer : {
        flexDirection: 'row',
        marginTop: 20,
        marginBottom: 0,
    },
    inputContainer: {
        flex: 1/7,
        flexDirection: 'row',
        backgroundColor: '#FFF',
        borderTopWidth:1,
        borderColor: "#c9c9c9"
    },
    textInput: {
        paddingLeft: 20,
        marginBottom: 35,
    },
})

Adding renderTextItem()

renderTextItem(item) {
        let style,
            responseStyle
        if (item.from === 'bot') {
            style = styles.botMessages
            responseStyle = styles.responseContainer
        } else {
            style = styles.userMessages
            responseStyle = {}
        }
        return (
            <View style={responseStyle}>
                <Text style={style}>{item.msg}</Text>
            </View>
        )
    }

You want to give border-radius to whole flatlist or each items of it? — Karan Mehta, Jan 17 '20 at 06:45
Could also show us the code of the function `renderTextItem` — Vagtse, Jan 17 '20 at 08:02
@KaranMehta just the items (i.e. the messages from the user and the bot) — , Jan 17 '20 at 14:47
Could you add a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? I don't have a React boilerplate ready here, and your code seems incomplete since a quick paste into Stackblitz throws a lot of errors. Nonetheless, I have a hunch on where the error is but want to see for myself before I post a potentially incorrect answer. — CGundlach, Jan 17 '20 at 15:14

score 4 · Answer 1 · answered May 12 '20 at 14:56

4

Try this: style={{borderRadius:6,overflow: 'hidden'}}

answered May 12 '20 at 14:56

Josymar De Leon

147
4
11

1

overflow: 'hidden' did the trick in this case. It will clip the image being overflow. – Charith Nidarsha May 21 '21 at 08:51

score 0 · Answer 2 · answered Jan 17 '20 at 11:52

0

I think you need to use borderWidth when you use borderRadius.

answered Jan 17 '20 at 11:52

Çağlar Durmuş

106
7

I tried doing that but it just adds the width without the radius affecting anything – Jan 17 '20 at 14:47

I can't figure out why borderRadius is not working on a flatList component

2 Answers2