Home > OS >  How to change header text when item id is change in Flatlist in react native
How to change header text when item id is change in Flatlist in react native

Time:01-18

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??

  • Related