Alphabet group list

package.json

@@ -56,6 +56,7 @@
     "react-native-reanimated": "~2.2.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.4.0",
+    "react-native-section-alphabet-list": "^2.0.7",
     "react-native-web": "~0.13.12",
     "react-redux": "^7.2.5",
     "redux": "^4.1.1",

src/components/GroupList/AlphabetGroupList.tsx

+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { AlphabetList } from "react-native-section-alphabet-list";
+import PlainButton from "../button/PlainButton";
+import Colors from "../../constants/Colors";
+import { IData, ISectionData } from "../../types/alphabetGroupList";
+
+type props = {
+  data: IData[];
+};
+
+const AlphabetGroupList = ({ data }: props) => {
+  return (
+    <View style={styles.container}>
+      <AlphabetList
+        data={data}
+        indexLetterStyle={styles.indexLetter}
+        renderCustomItem={(item: IData) => (
+          <View style={styles.listItemContainer}>
+            <PlainButton text={item.value} onPress={() => {}} />
+          </View>
+        )}
+        renderCustomSectionHeader={(section: ISectionData) => (
+          <View style={styles.sectionHeaderContainer}>
+            <Text style={styles.sectionHeaderLabel}>{section.title}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
+
+export default AlphabetGroupList;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  indexLetter: {
+    width: 0,
+    height: 0,
+  },
+  listItemContainer: {
+    paddingVertical: 8,
+    paddingHorizontal: 5,
+  },
+  sectionHeaderContainer: {
+    paddingVertical: 8,
+    paddingHorizontal: 5,
+  },
+  sectionHeaderLabel: {
+    backgroundColor: Colors.background,
+  },
+});

src/screens/ecosystem/BusinessCategoryScreen.tsx

@@ -3,15 +3,40 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
+import AlphabetGroupList from "../../components/GroupList/AlphabetGroupList";
 
 const BusinessCategoryScreen = () => {
   const nav = useNavigation();
+  const data = [
+    { value: "Accomodation and Food Services", key: "1" },
+    {
+      value:
+        "Administrative and Support and Waste Management and Remediation Services",
+      key: "2",
+    },
+    { value: "Agriculture, Forestry, Fishing, and Hunting", key: "3" },
+    { value: "Arts, Entertainment, and Recreation", key: "4" },
+    { value: "Construction", key: "5" },
+    { value: "Educational Services", key: "6" },
+    { value: "Finance and Insurance", key: "7" },
+    { value: "Health Care and Social Assistance", key: "8" },
+    { value: "Management of Companies and Enterprises", key: "9" },
+    { value: "Manufacturing", key: "10" },
+    { value: "Mining, Quarrying, and Oil and Gas Extraction ", key: "11" },
+    { value: "Other Services (Except Public Administration)", key: "12" },
+    { value: "Professional, Scientific, and Technical Services", key: "13" },
+    { value: "Public Administration", key: "14" },
+    { value: "Real Estate and Rental and Leasing", key: "15" },
+    { value: "Retail Trade", key: "16" },
+    { value: "Transportation and Warehousing", key: "17" },
+    { value: "Utilities", key: "18" },
+    { value: "Umum", key: "19" },
+    { value: "Wholesale Trade", key: "20" },
+  ];
 
   return (
     <View style={styles.container}>
-      <View>
-        <Text>Layar Kategori Bisnis</Text>
-      </View>
+      <AlphabetGroupList data={data} />
     </View>
   );
 };
@@ -19,9 +44,10 @@ const BusinessCategoryScreen = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.background,
-    paddingHorizontal: 24,
+    alignItems: "center",
     justifyContent: "center",
+    backgroundColor: Colors.background,
+    padding: 24,
   },
 });
 

src/types/alphabetGroupList.ts

+export type IData = {
+  value: string;
+  key: string;
+};
+
+export type ISectionData = {
+  title: string;
+  data: IData[];
+  index?: number;
+};

yarn.lock

@@ -8416,6 +8416,18 @@ react-native-screens@~3.4.0:
   dependencies:
     warn-once "^0.1.0"
 
+react-native-section-alphabet-list@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/react-native-section-alphabet-list/-/react-native-section-alphabet-list-2.0.7.tgz#36e08148e8aae99bd3102101b4a589b7fe649a0c"
+  integrity sha512-iqHzyCVgzMc4YsmJlONo3uxd7x9LApmAZDhh0YtMht+qGJ0j+L+NJ2eFT8ZUrUgvMNb64OqQlNvMqHu/IhUvUw==
+  dependencies:
+    react-native-section-list-get-item-layout "^2.2.3"
+
+react-native-section-list-get-item-layout@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-native-section-list-get-item-layout/-/react-native-section-list-get-item-layout-2.2.3.tgz#152a8efdcb3847dbcbeb04cd2d0de4312d3d2fcb"
+  integrity sha512-fzCW5SiYP6qCZyDHebaElHonIFr8NFrZK9JDkxFLnpxMJih4d+HQ4rHyOs0Z4Gb/FjyCVbRH7RtEnjeQ0XffMg==
+
 react-native-size-matters@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"