React native border radius around sectionList - react-native

Question

How can I put a border radius around my sectionList like in the image?

Answer 1

Something you can do is use the index and the number of items in the section list section to know when a border-radius is needed.
<SectionList
sections={sections}
renderItem={({ item, section, index }) => (
<ListItem
navigation={this.props.navigation}
section={section}
item={item}
index={index}
/>
)}
/>
Inside the ListItem component do the following with the index and the section that was passed through to the ListItem.
We know that the first item in our list will always have an index of 0 thus we can set the borderTopLeftRadius and Right borderTopRightRadius to 10 when the index is 0. When the index reaches the amountOfItemsInSection(it's -1 because index always starts at 0) we know that we're at the end of the list and we need to close the borders.
function ListItem({
navigation,
section
item,
index,
}) {
const amountOfItemsInSection = section.data.length - 1
return (
<View
style={{
height: 50,
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 20,
backgroundColor: "grey",
borderWidth: 1,
borderBottomWidth: index === amountOfItemsInSection ? 1 : 0,
borderColor: 'grey',
borderTopLeftRadius: index === 0 ? 10 : 0,
borderTopRightRadius: index === 0 ? 10 : 0,
borderBottomLeftRadius: index === amountOfItemsInSection ? 10 : 0,
borderBottomRightRadius: index === amountOfItemsInSection ? 10 : 0
}}
>
{/* Left */}
<View>
<Text>{heading}</Text>
<Text>{description}</Text>
</View>
</View>
)
}
Image showing the result

Answer 2

Example
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
SectionList,
Alert,
TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import colors from '../Component/Color';
export default class SectonLists extends Component {
GetSectionListItem = item => {
Alert.alert(item);
};
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{
title: 'City Name Starts with A',
data: ['Agra', 'Alinager', 'Amritsar'],
},
{
title: 'City Name Starts with B',
data: ['Barabanki', 'Bombay', 'Bangalore'],
},
{
title: 'City Name Starts with C',
data: ['Chakia', 'Chandauli', 'Chouk'],
},
]}
renderSectionHeader={({section}) => (
<Text style={styles.SectionHeader}> {section.title} </Text>
)}
renderItem={({item}) => (
<Text
style={styles.SectionListItemS}
onPress={this.GetSectionListItem.bind(this, item)}>
{' '}
{item}{' '}
</Text>
)}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
SectionHeader: {
backgroundColor: colors.primary,
fontSize: 20,
marginTop: 10,
padding: 5,
color: '#fff',
fontWeight: 'bold',
},
SectionListItemS: {
fontSize: 20,
padding: 6,
color: '#000',
backgroundColor: '#F5F5F5',
},
});

Answer 3

If you wrap your sectionList in a View with the desired borderRadius and with the overflow: 'hidden' style property then all of the content in the sectionList will be contained within a view with the desired borderRadius.
Example
<View style={{
width: '80%',
backgroundColor: 'white',
borderRadius: 10, ,
overflow: 'hidden'}} >
<SectionList
sections = {sections}
renderItem = {renderItem}
renderSectionHeader={renderSectionHeader}
keyExtractor = {(item, index) => index.toString()}
ListEmptyComponent={listEmptyComponent}
/>
</View>