Create A Custom List View In React Native Using Mac Visual Studio Code

Introduction

React Native list view is a view component, and it contains list of items. ListView DataSource is the minimum API to create list view. It populates array of data blobs with list view components and its data source. React native data item can be able to display in a vertically scrollable list. The render row takes a blob from data array and returns renderable component.

There are a few performance operations designed to make Listview scroll smoothly while dynamically loading potentially very large data sets:

• Only re-render changed rows the rowHasChanged function provided to the data source tells the Listview if it needs to rerender row because source data has changed.
• Rate limited row rendering, by default, only one row is rendered per event loop. This breaks up the work into smaller chunks to reduce the chance of dropping frames while rendering rows.

Note
React Native Listview component has been deprecated and implement list component use new list of components for FlatList or SectionList.

Step 1

Create new react native expo project via terminal with help of below comments

expo init Customelist
npm start

Step 2

Next step is to write the below code for assigning the custom list view item details

const DATA = [{
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'Manikandan M',
}, {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Arnold',
}, {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Vin Diseal',
}, {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Jack Sparrow',
}, {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Angliana',
}, ];

Step 3

Next step is to bind the created list item in view group and makes all the individual item are bind within view.

function Item({
    title
}) {
    return (
          <View style={styles.item}>
              <Image style={{height:50,width:50}} source={{uri:'https://source.unsplash.com/random'}} />
              <Text style={styles.title2}>{title}</Text>
          </View>
    );
}

Step 4

Next is to create a style sheet to design the binded view items with properties like font family, color, width, height…etc.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Constants.statusBarHeight,
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
        flexDirection: 'row'
    },
    title: {
        fontSize: 10,
    },
    title2: {
        fontSize: 18,
        marginLeft: 20,
        marginTop: 15,
        color: 'black',
        fontWeight: 'bold'
    }
});

Step 5

Next is to create a FlatList or SectionList and call the Item function to retrieve all the binded records which will be shown in the user interface.

export default function App() {
    return (
      <SafeAreaView style={styles.container}>
         <FlatList data={DATA} renderItem={({ item })=>
         <Item title={item.title} />} keyExtractor={item => item.id} />
    </SafeAreaView>
    );
}

Output

Conclusion

Hopefully, this article has given you sufficient information for you to create a react native custom list view and run the app on both Android/iOS. Feel free to leave a comment if you would like me to further elaborate on anything within this article