react native how to add alphabet order on side in section list

user_7783344 0
Viewed 6086

How to add alphabet order on side in section list? I checked out some packages such as react-native-atoz and react-native-selectedsectionlist. What is the best one? or how do I implement one from the scratch? Here is an example from the iOS contacts app:

Contacts app

react-native listview android ios
2 Answers

If you have a list of names what i would do is to split it up by name and made the list you have above. See my example

So now you can run .map on the array made and display the letter and the names accordingly!

const names = [
  "Ned Stark",
  "Robert Baratheon",
  "Jaime Lannister",
  "Catelyn Stark",
  "Cersei Lannister",
  "Daenerys Targaryen",
  "Jorah Mormont",
  "Jon Snow"
]

function getFirstLetterFrom(value) {
  return value.slice(0, 1).toUpperCase();
}

const newNames = names
  .reduce(function (list, name, index) {
      let listItem = list.find((item) => item.letter && item.letter === getFirstLetterFrom(name));
      if (!listItem) {
        list.push({"letter": getFirstLetterFrom(name), "names": [name]})
      } else {
        listItem.names.push(name)
      }

      return list;
  }, []);

console.log(newNames)
user_60674250

Use Address Book library for React Native to achieve this.

Suggested css styles will look like this:

sideView: {
    width: 40,
    position: 'absolute',
    height: '100%',
    alignItems: 'center',
    justifyContent:'center',
    right: 0,
}
user_115810040
Related