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

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 a sticky Header but I want 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 to do that but it gives me an error

anyone can help me??🐼

You can do something like this:

import React from "react";
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from "react-native";

const DATA = [
  {
    id: "0",
    title: "Zero Item",
  },
  {
    id: "1",
    title: "First Item",
  },
  {
    id: "2",
    title: "second Item",
  },
  {
    id: "3",
    title: "Third Item",
  },
  {
    id: "4",
    title: "Fourth Item",
  },
  {
    id: "5",
    title: "Fifth Item",
  },
  {
    id: "6",
    title: "Sixth Item",
  },
  {
    id: "7",
    title: "Seventh Item",
  },
  {
    id: "8",
    title: "Eighth Item",
  },
  {
    id: "9",
    title: "Nineth Item",
  },
  {
    id: "10",
    title: "Tenth Item",
  },
  {
    id: "11",
    title: "Eleventh Item",
  },
  {
    id: "12",
    title: "Twelveth Item",
  },
  {
    id: "13",
    title: "Thirteenth Item",
  },
  {
    id: "14",
    title: "Fourteenth Item",
  },
  {
    id: "15",
    title: "Fifteenth Item",
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const [Viewable, SetViewable] = React.useState(null);
  const ref = React.useRef(null);

  const onViewRef = React.useRef((viewableItems) => {
     console.log(viewableItems.viewableItems[0]) //<-----here log
       //viewableItems<-- it is all items which are currently visible to you.
    SetViewable(viewableItems.viewableItems[0].item);
  });

  const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 80 });

  const Render_FlatList_Sticky_header = () => {
    return (
      <>
        <Text>hello{Viewable?.id}</Text>
      </>
    );
  };
  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}
        ref={ref}
        onViewableItemsChanged={onViewRef.current}
        viewabilityConfig={viewConfigRef.current}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

You can play with the visible item and get desired output you want.

You want this if Item.id=1 then my sticky Header text is "A", Then now you have the top item so add the switch case in Render_FlatList_Sticky_header based on the Viewable variable.

as this:

const checkSwitch = (param) => {
    switch (param) {
      case "1":
        return "A";
        break;

      case "2":
        return "B";
        break;

      case "3":
        return "C";
        break;

      case "4":
        return "D";
        break;

      default:
        return "AA";
    }
  };

  const Render_FlatList_Sticky_header = () => {
    return (
      <>
        <Text>hello{checkSwitch(Viewable?.id)}</Text>
      </>
    );
  };