We will be building a simple contacts list screen in React Native. This is how the final version of the app will look like.

Couple of things to notice here, sections are based on first letter of the first name and that letter is displayed as section header at the top.

We will be using SectionList component of react-native to implement this.

This is how the contacts data looks like. Usually you would fetch these contacts from a remote URI, but I have kept it as static for simplicity purposes.

Now in order to feed this data to our section list, we need to modify couple of things in data first.

Formatting data for SectionList

In comments you will see how formatted data is expected in SectionList (keys name can change). In our getData() function we are changing the structure of data and also adding another field called title which will serve the purpose of our section’s header title. Also, we have sorted data according to names under each title, as contacts list is also sorted.

#javascript #reactjs #react #react-native