React native border radius around sectionList

Question

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

Answer 1

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>

Answer 2

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 3

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',
  },
});