BusinessCategoryScreen.tsx

import * as React from "react";
import { StyleSheet } from "react-native";
import { View } from "../../components/Themed";
import Colors from "../../constants/Colors";
import AlphabetGroupList from "../../components/GroupList/AlphabetGroupList";
import { useState, useEffect } from "react";
import { getCategoriesAsIData } from "../../helpers/alphabetConverter";
import { IData } from "react-native-section-alphabet-list";

const BusinessCategoryScreen = () => {
  const [data, setData] = useState<IData[]>([]);
  useEffect(() => {
    getCategoriesAsIData().then((res) => setData(res));
  });

  return (
    <View style={styles.container}>
      <AlphabetGroupList data={data} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Colors.background,
    padding: 24,
  },
});

export default BusinessCategoryScreen;