App.js
import React from 'react';
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
} from 'react-native';
const DATA = [
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const Render_FlatList_Sticky_header = () => {
return (
<>
<Text>hello</Text>
</>
);
};
const App = () => {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={(item) => item.id}
stickyHeaderIndices={[0]}
ListHeaderComponent={Render_FlatList_Sticky_header}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
it's working with sticky Header but I want different different header when item.id is different
like
if Item.id=1 then my sticky Header text is "A" ,
if Item.id=2 then my sticky Header text is "B" ,
if Item.id=3 then my sticky Header text is "B"
I try yo do that but it's give me error
anyone can help me??