customers.tsx

gistfile1.txt

```
export const Customers = () => {
  const { colors } = useColorScheme();
  
  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Customers",
      headerLargeTitle: true,
      headerSearchBarOptions: {
        placeholder: "Search",
        hideWhenScrolling: false,
      },
    });
  }, [navigation]);
  
  return (
    <List
      variant="full-width"
      data={DATA}
      contentInsetAdjustmentBehavior={"automatic"}
      estimatedItemSize={ESTIMATED_ITEM_HEIGHT.withSubTitle}
      renderItem={(info) => {
        if (typeof info.item === "string") {
          return <ListSectionHeader {...info} />;
        }
        return (
          <ListItem
            leftView={
              <View className="flex-1 justify-center px-4">
                <Icon name="bell-outline" color={colors.primary} />
              </View>
            }
            rightView={
              <View className="flex-1 flex-row items-center px-4">
                <Text className="ios:opacity-100 text-muted-foreground opacity-0">
                  Detail
                </Text>
                <Icon
                  ios={{ name: "chevron.right" }}
                  materialIcon={{
                    type: "MaterialIcons",
                    name: "arrow-right",
                  }}
                  color={colors.grey}
                  size={Platform.OS === "ios" ? 18 : 21}
                />
              </View>
            }
            {...info}
            onPress={() => console.log("onPress")}
          />
        );
      }}
      keyExtractor={keyExtractor}
      stickyHeaderIndices={[0]}
    />
  );
};

function keyExtractor(
  item: (Omit<ListDataItem, string> & { id: string }) | string,
) {
  return typeof item === "string" ? item : item.id;
}

const DATA = [
  "A",
  {
    id: "1",
    title: "Alice Anderson",
    subTitle: "Project Manager",
  },
  {
    id: "2",
    title: "Amanda Blake",
    subTitle: "UI/UX Designer",
  },
  {
    id: "3",
    title: "Albert Brown",
    subTitle: "Backend Developer",
  },

  "B",
  {
    id: "4",
    title: "Ben Carter",
    subTitle: "Frontend Developer",
  },
  {
    id: "5",
    title: "Bill Davis",
    subTitle: "Database Administrator",
  },
  {
    id: "6",
    title: "Bella Edwards",
    subTitle: "QA Engineer",
  },

  "C",
  {
    id: "7",
    title: "Chris Foster",
    subTitle: "Full-Stack Developer",
  },
  {
    id: "8",
    title: "Claire Green",
    subTitle: "Product Owner",
  },
  {
    id: "9",
    title: "Colin Hall",
    subTitle: "Mobile Developer",
  },

  "D",
  {
    id: "10",
    title: "David Johnson",
    subTitle: "DevOps Engineer",
  },
  {
    id: "11",
    title: "Diana King",
    subTitle: "Business Analyst",
  },
];

```