How to set header in Alphabetic way in react native? - reactjs

Question

output
code
import React from 'react';
import {
Text,
View,
FlatList,
ScrollView,
SafeAreaView
} from 'react-native';
import { nameData } from './dummydata';
const windowSize = FlatList.length > 50 ? FlatList.length / 4 : 21;
const Main = () => {
return (
<View style={{}}>
<SafeAreaView style={{}}>
<ScrollView style={{}}>
<FlatList
disableVirtualization={true}
//data={nameData.sort((a, b) => a.name.localeCompare(b.name))}
data={nameData.sort(function (a, b) {
return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0;
})}
renderItem={({ item }) => (
<Text style={{ fontSize: 20,marginLeft:10,padding:5 }}>{item.name}</Text>
)}
getItemLayout={(data, index) => ({
length: 80,
offset: 80 * index,
index,
})}
removeClippedSubviews={true}
maxToRenderPerBatch={windowSize}
windowSize={windowSize}
numColumns={1}
keyExtractor={(item, index) => String(index)}
contentContainerStyle={{ paddingBottom: 10 }}
/>
</ScrollView>
</SafeAreaView>
</View>
);
};
export default Main;
I have given the code above
my data is sorted , I want like this if data is started A alphabet then this data contain in A header section if data is started B alphabet then this data contain in B header section.
like this D header contain only D Starting data C header contain only C Starting data
but I don't know how to set header and how to set data in header section.
in sort I want like this data
anybody can give me solution?
thank you!🐼

Answer 1

Method 1
Try this package react-native-section-alphabet-list
A simple React Native component that takes an array of data and renders a SectionList with alphabetically (or custom) sorted data.
Method 2
Update your code like below and try
import React, { useEffect, useState } from "react";
import { Text, View, FlatList, SafeAreaView } from "react-native";
import { nameData } from "./duumydata";
const windowSize = FlatList.length > 50 ? FlatList.length / 4 : 21;
const Main = () => {
let listData = new Array(26).fill([]);
const headerArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
const [data, setData] = useState([]);
useEffect(() => {
nameData.sort(function (a, b) {
return a.name.toUpperCase() < b.name.toUpperCase()
? -1
: a.name > b.name
? 1
: 0;
});
headerArray.forEach((header, index) => {
nameData.forEach((item) => {
const headerText = item.name.split("")[0].toUpperCase();
if (header == headerText) {
listData[index] = [...listData[index], item];
}
});
});
setData(listData);
}, []);
const renderItem = ({ item, index }) => {
return (
<>
<View style={{ backgroundColor: "grey" }}>
<Text>{headerArray[index]}</Text>
</View>
{item?.map((obj) => renderName(obj))}
</>
);
};
const renderName = (item) => {
return (
<View>
<Text>{item.name}</Text>
</View>
);
};
return (
<View style={{}}>
<SafeAreaView style={{}}>
<FlatList
disableVirtualization={true}
data={data}
renderItem={(item) => renderItem(item)}
getItemLayout={(data, index) => ({
length: 80,
offset: 80 * index,
index
})}
removeClippedSubviews={true}
maxToRenderPerBatch={windowSize}
windowSize={windowSize}
numColumns={1}
keyExtractor={(item, index) => String(index)}
contentContainerStyle={{ paddingBottom: 10 }}
/>
</SafeAreaView>
</View>
);
};
export default Main;