Question page realesed

api/_client.ts

@@ -1,12 +1,12 @@
 import axiosInstance from "./_axiosInstance";
-import { AuthLoginResponse, Pagination, QuestionResponse, UserResponse } from "./types";
+import { AuthLoginResponse, CategoryResponse, Pagination, QuestionResponse, UserResponse } from "./types";
 
-export const get_questions = async (page: number, test_id?: number, question_id?: number) => {
+export const get_questions = async (page: number, test_id?: number, category_id?: number) => {
   const response = await axiosInstance.get<Pagination<QuestionResponse>>("/api/questions/", {
     params: {
       page,
       test_id,
-      question_id
+      category_id
     }
   })
 
@@ -29,6 +29,14 @@ export const get_current_user = async () => {
   return response.data;
 }
 
+export const get_categories = async () => {
+  const response = await axiosInstance.get<{
+    data: CategoryResponse[]
+  }>("/api/categories/");
+
+  return response.data;
+} 
+
 export const post_login = async (email: string, password: string) => {
   const response = await axiosInstance.post<AuthLoginResponse>("/api/auth/login/", {
     email,

api/categories.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { get_categories } from "./_client";
+
+export const useCategories = () => {
+  return useQuery({
+    queryKey: ['categories'],
+    queryFn: async () => {
+      const response = await get_categories();
+      return response.data;
+    }
+  });
+}

api/questions.ts

@@ -4,12 +4,12 @@ import { get_question, get_questions } from "./_client";
 interface useQuestionsAttr {
   page?: number;
   test_id?: number;
-  question_id?: number;
+  category_id?: number;
 }
-export const useQuestions = ({ page = 1, test_id, question_id }: useQuestionsAttr = { }) => {
+export const useQuestions = ({ page = 1, test_id, category_id }: useQuestionsAttr = { }) => {
   return useQuery({
-    queryKey: ['questions', page, test_id, question_id],
-    queryFn: () => get_questions(page, test_id, question_id)
+    queryKey: ['questions', page, test_id, category_id],
+    queryFn: () => get_questions(page, test_id, category_id)
   })
 }
 

app/(tabs)/questions.tsx

@@ -1,34 +1,66 @@
-import { View } from 'react-native';
+import { ScrollView, View } from "react-native";
 
-import { useQuestions } from '@/api';
-import Question from '@/components/question';
-import Content from '@/components/ui/content';
-import { ThemedText } from '@/components/ui/themed-text';
-import { router } from 'expo-router';
+import { useQuestions } from "@/api";
+import { QuestionResponse } from "@/api/types";
+import useTaxonomyContext from "@/components/providers/taxonomy-provider/hook";
+import Question from "@/components/question";
+import Content from "@/components/ui/content";
+import CustomSelect from "@/components/ui/custom-select";
+import PaginationList from "@/components/ui/pagination-list";
+import { ThemedText } from "@/components/ui/themed-text";
+import { router } from "expo-router";
+import { useRef, useState } from "react";
 
 export default function QuestionsScreen() {
-  const { data: questions, isLoading: isLoadingQuestions } = useQuestions();
+  const [category, setCategory] = useState<undefined|number>(undefined);
+  const [page, setPage] = useState<number>(1);
+  const { categories } = useTaxonomyContext();
+  const scrollRef = useRef<ScrollView>(null);
+  const { data: questionsPagination, isLoading } = useQuestions({
+    page: page,
+    category_id: category
+  });
 
-  const questionsLoaded = !isLoadingQuestions && questions && questions.meta.total > 0;
+  const categoryOptions = categories.map((cat) => {
+    return {
+      label: cat.name,
+      value: String(cat.id),
+    };
+  });
+  const handleChangeCategory = (value: string) => {
+    setPage(1);
+    if(value === "all")
+      setCategory(undefined);
+    else
+      setCategory(+value);
+  }
 
   return (
-    <Content>
-      <ThemedText type="title" className='mb-3'>Questions</ThemedText>
+    <Content ref={scrollRef}>
+      <ThemedText type="title" className="mb-3">
+        Questions
+      </ThemedText>
 
-      <View className='gap-3'>
-        {questionsLoaded &&
-        questions.data.map((question) => (
-          <Question
-            key={question.id}
-            question={question}
-            onPress={() => router.push(`/questions/${question.id}`)}
-          />
-        ))}
-        {isLoadingQuestions && Array.from({ length: 5 }).map((_, i) => (
-          <Question key={i} />
-        ))}
+      <View className="mb-4">
+        <CustomSelect 
+          options={categoryOptions}
+          noneOption={{ label: "All categories", value: "all" }}
+          selectedValue={category ? `${category}` : undefined}
+          onValueChange={handleChangeCategory}
+          placeholder="Select category" />
       </View>
-      
+
+      <PaginationList<QuestionResponse>
+        pagination={questionsPagination}
+        renderItem={(item) => (
+          <Question question={item} onPress={() => router.push(`/questions/${item.id}`)} />
+        )}
+        skeleton={<Question />}
+        currentPage={page}
+        setCurrentPage={setPage}
+        scrollView={scrollRef}
+        isLoadingPage={isLoading}
+      />
     </Content>
-  )
-}
+  );
+}

app/_layout.tsx

@@ -1,50 +1,26 @@
-import {
-  DarkTheme,
-  DefaultTheme,
-  ThemeProvider,
-} from "@react-navigation/native";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
 
-import { useColorScheme } from "@/hooks/use-color-scheme";
 
-import AuthProvider from "@/components/providers/auth-provider";
-import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
+import IndexProvider from "@/components/providers/index-provider";
 import "@/global.css";
-import { ToastProvider } from 'react-native-toast-notifications';
 
 export const unstable_settings = {
   anchor: "(tabs)",
 };
 
-const queryClient = new QueryClient();
-
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
-  const mode = colorScheme === "dark" ? "dark" : "light";
-
   return (
-    <GluestackUIProvider mode={mode}>
-      <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <ToastProvider>
-            <ThemeProvider
-              value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
-            >
-              <Stack>
-                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-                <Stack.Screen
-                  name="modal"
-                  options={{ presentation: "modal", title: "Modal" }}
-                />
-              </Stack>
-              <StatusBar style="auto" />
-            </ThemeProvider>
-          </ToastProvider>
-        </AuthProvider>
-      </QueryClientProvider>
-    </GluestackUIProvider>
+    <IndexProvider>
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="modal"
+          options={{ presentation: "modal", title: "Modal" }}
+        />
+      </Stack>
+      <StatusBar style="auto" />
+    </IndexProvider>
   );
 }

components/providers/index-provider/index.tsx

@@ -0,0 +1,46 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "react-native-reanimated";
+
+import AuthProvider from "@/components/providers/auth-provider";
+import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
+import "@/global.css";
+import { useColorScheme } from "@/hooks/use-color-scheme";
+import { ReactNode } from "react";
+import { ToastProvider } from "react-native-toast-notifications";
+import TaxonomyProvider from "../taxonomy-provider";
+
+interface IndexProviderProps {
+  children: ReactNode;
+}
+const queryClient = new QueryClient();
+
+const IndexProvider = ({ children }: IndexProviderProps) => {
+  const colorScheme = useColorScheme();
+  const mode = colorScheme === "dark" ? "dark" : "light";
+
+  return (
+    <GluestackUIProvider mode={mode}>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <TaxonomyProvider>
+            <ToastProvider>
+              <ThemeProvider
+                value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
+              >
+                {children}
+              </ThemeProvider>
+            </ToastProvider>
+          </TaxonomyProvider>
+        </AuthProvider>
+      </QueryClientProvider>
+    </GluestackUIProvider>
+  );
+};
+
+
+export default IndexProvider;

components/providers/taxonomy-provider/context.ts

@@ -0,0 +1,12 @@
+import { CategoryResponse } from "@/api/types";
+import { createContext } from "react";
+
+interface TaxonomyContextType {
+  categories: CategoryResponse[];
+}
+
+const TaxonomyContext = createContext<TaxonomyContextType>({
+  categories: []
+});
+
+export default TaxonomyContext;

components/providers/taxonomy-provider/hook.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import TaxonomyContext from "./context";
+
+const useTaxonomyContext = () => useContext(TaxonomyContext);
+
+export default useTaxonomyContext;

components/providers/taxonomy-provider/index.tsx

@@ -0,0 +1,29 @@
+import { useCategories } from "@/api/categories";
+import { CategoryResponse } from "@/api/types";
+import { ReactNode, useMemo } from "react";
+import TaxonomyContext from "./context";
+
+interface TaxonomyProviderProps {
+  children: ReactNode;
+}
+
+const TaxonomyProvider = ({children}: TaxonomyProviderProps) => {
+  const { data: categories } = useCategories();
+
+  const cats = useMemo<CategoryResponse[]>(() => {
+    if(categories)
+      return categories;
+
+    return [];
+  }, [categories])
+
+  return (
+    <TaxonomyContext.Provider value={{
+      categories: cats
+    }}>
+      {children}
+    </TaxonomyContext.Provider>
+  )
+}
+
+export default TaxonomyProvider;

components/ui/content.tsx

@@ -1,14 +1,20 @@
 import { ContentPadding } from "@/constants/theme";
-import { ReactNode } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { forwardRef } from "react";
+import { ScrollView, ScrollViewProps, StyleSheet } from "react-native";
 
-interface ContentProps {
-  children?: ReactNode
+interface ContentProps extends ScrollViewProps {
+  children?: React.ReactNode;
 }
 
-const Content = ({ children }: ContentProps) => {
-  return <ScrollView style={styles.content}>{ children }</ScrollView>
-}
+const Content = forwardRef<ScrollView, ContentProps>(({ children, ...rest }, ref) => {
+  return (
+    <ScrollView ref={ref} style={styles.content} {...rest}>
+      {children}
+    </ScrollView>
+  );
+});
+
+Content.displayName = "Content";
 
 const styles = StyleSheet.create({
   content: {

components/ui/custom-select/index.tsx

@@ -0,0 +1,56 @@
+import { useThemeColor } from "@/hooks/use-theme-color";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { useMemo } from "react";
+import { Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectItem, SelectPortal, SelectTrigger } from "../select";
+
+type SelectOption = {
+  label: string;
+  value: string;
+}
+interface CustomSelectProps {
+  placeholder?: string;
+  options: SelectOption[],
+  noneOption?: SelectOption;
+  defaultValue?: string;
+  selectedValue?:string;
+  onValueChange?: (value: string) => void;
+}
+
+const CustomSelect = ({
+  options,
+  onValueChange,
+  defaultValue,
+  selectedValue,
+  noneOption,
+  placeholder = "Select option"
+}: CustomSelectProps) => {
+  const optionsComputed = useMemo(() => {
+    if(noneOption)
+      return [noneOption, ...options];
+
+    return options;
+  }, [options, noneOption]);
+  const backgroundColor = useThemeColor({ }, "background");
+
+  return (
+    <Select onValueChange={onValueChange} selectedValue={selectedValue} defaultValue={defaultValue}>
+      <SelectTrigger variant="outline" size="md" style={{ backgroundColor }}>
+        <SelectInput placeholder={placeholder} />
+        <FontAwesome5 className="mr-3" name="chevron-down" />
+      </SelectTrigger>
+      <SelectPortal>
+        <SelectBackdrop />
+        <SelectContent>
+          <SelectDragIndicatorWrapper>
+            <SelectDragIndicator />
+          </SelectDragIndicatorWrapper>
+          {optionsComputed.map((opt, i) => (
+            <SelectItem key={i} label={opt.label} value={opt.value} />
+          ))}
+        </SelectContent>
+      </SelectPortal>
+    </Select>
+  )
+}
+
+export default CustomSelect;

components/ui/pagination-list/index.tsx

@@ -0,0 +1,86 @@
+import { Pagination } from "@/api/types";
+import { ReactElement, RefObject } from "react";
+import { ScrollView, View } from "react-native";
+import { Button, ButtonText } from "../button";
+import { ThemedText } from "../themed-text";
+
+type CustomFlatListProps<T> = {
+  pagination?: Pagination<T>;
+  skeleton: ReactElement;
+  skeletonStartCount?: number;
+  currentPage: number;
+  setCurrentPage: (v: number) => void;
+  isLoadingPage: boolean;
+  renderItem: (item: T) => ReactElement;
+  pagesRadius?: number;
+  dividerHeight?: number;
+  scrollView?: RefObject<ScrollView | null>;
+};
+
+const PaginationList = <T,>({
+  pagination,
+  skeleton,
+  currentPage,
+  setCurrentPage,
+  isLoadingPage,
+  renderItem,
+  scrollView,
+  pagesRadius = 3,
+  skeletonStartCount = 4,
+  dividerHeight = 16,
+}: CustomFlatListProps<T>) => {
+  const renderSkeleton = () => {
+    const skeletonCount = pagination
+      ? pagination.meta.per_page
+      : skeletonStartCount;
+    return Array.from({ length: skeletonCount }).map((_, i) => (
+      <View key={i} style={{ marginBottom: dividerHeight }}>
+        {skeleton}
+      </View>
+    ));
+  };
+  const handlePagePress = (page: number) => {
+    if (page === currentPage) return;
+    setCurrentPage(page);
+    scrollView?.current?.scrollTo({ y: 0, animated: false });
+  };
+
+  if (!pagination || isLoadingPage) return renderSkeleton();
+
+  return (
+    <View>
+      {pagination.data.map((item, index) => (
+        <View key={index}>
+          {renderItem(item)}
+          <View style={{ height: dividerHeight }} />
+        </View>
+      ))}
+      {pagination.data.length === 0 && (
+        <ThemedText className="pt-4 text-center">No items found.</ThemedText>
+      )}
+      <View className="flex-row gap-3">
+        {currentPage > 1 && (
+          <Button
+            className="flex-1"
+            onPress={() => handlePagePress(currentPage - 1)}
+            action="secondary"
+          >
+            <ButtonText>Prev</ButtonText>
+          </Button>
+        )}
+
+        {currentPage !== pagination.meta.last_page && (
+          <Button
+            className="flex-1"
+            onPress={() => handlePagePress(currentPage + 1)}
+            action="secondary"
+          >
+            <ButtonText>Next</ButtonText>
+          </Button>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default PaginationList;

components/ui/select/index.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import React from 'react';
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/utils/nativewind-utils';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { createSelect } from '@gluestack-ui/core/select/creator';
+import { cssInterop } from 'nativewind';
+import {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+  ActionsheetScrollView,
+  ActionsheetVirtualizedList,
+  ActionsheetFlatList,
+  ActionsheetSectionList,
+  ActionsheetSectionHeaderText,
+} from './select-actionsheet';
+import { Pressable, View, TextInput } from 'react-native';
+
+const SelectTriggerWrapper = React.forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  React.ComponentProps<typeof Pressable>
+>(function SelectTriggerWrapper({ ...props }, ref) {
+  return <Pressable {...props} ref={ref} />;
+});
+
+const selectIconStyle = tva({
+  base: 'text-background-500 fill-none',
+  parentVariants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+const selectStyle = tva({
+  base: '',
+});
+
+const selectTriggerStyle = tva({
+  base: 'border border-background-300 rounded flex-row items-center overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300',
+  variants: {
+    size: {
+      xl: 'h-12',
+      lg: 'h-11',
+      md: 'h-10',
+      sm: 'h-9',
+    },
+    variant: {
+      underlined:
+        'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
+      outline:
+        'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700',
+      rounded:
+        'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
+    },
+  },
+});
+
+const selectInputStyle = tva({
+  base: 'px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px] py-0',
+  parentVariants: {
+    size: {
+      xl: 'text-xl',
+      lg: 'text-lg',
+      md: 'text-base',
+      sm: 'text-sm',
+    },
+    variant: {
+      underlined: 'px-0',
+      outline: '',
+      rounded: 'px-4',
+    },
+  },
+});
+
+const UISelect = createSelect(
+  {
+    Root: View,
+    Trigger: withStyleContext(SelectTriggerWrapper),
+    Input: TextInput,
+    Icon: UIIcon,
+  },
+  {
+    Portal: Actionsheet,
+    Backdrop: ActionsheetBackdrop,
+    Content: ActionsheetContent,
+    DragIndicator: ActionsheetDragIndicator,
+    DragIndicatorWrapper: ActionsheetDragIndicatorWrapper,
+    Item: ActionsheetItem,
+    ItemText: ActionsheetItemText,
+    ScrollView: ActionsheetScrollView,
+    VirtualizedList: ActionsheetVirtualizedList,
+    FlatList: ActionsheetFlatList,
+    SectionList: ActionsheetSectionList,
+    SectionHeaderText: ActionsheetSectionHeaderText,
+  }
+);
+
+cssInterop(UISelect, { className: 'style' });
+cssInterop(UISelect.Input, {
+  className: { target: 'style', nativeStyleToProp: { textAlign: true } },
+});
+cssInterop(SelectTriggerWrapper, { className: 'style' });
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+type ISelectProps = VariantProps<typeof selectStyle> &
+  React.ComponentProps<typeof UISelect> & { className?: string };
+
+const Select = React.forwardRef<
+  React.ComponentRef<typeof UISelect>,
+  ISelectProps
+>(function Select({ className, ...props }, ref) {
+  return (
+    <UISelect
+      className={selectStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type ISelectTriggerProps = VariantProps<typeof selectTriggerStyle> &
+  React.ComponentProps<typeof UISelect.Trigger> & { className?: string };
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Trigger>,
+  ISelectTriggerProps
+>(function SelectTrigger(
+  { className, size = 'md', variant = 'outline', ...props },
+  ref
+) {
+  return (
+    <UISelect.Trigger
+      className={selectTriggerStyle({
+        class: className,
+        size,
+        variant,
+      })}
+      ref={ref}
+      context={{ size, variant }}
+      {...props}
+    />
+  );
+});
+
+type ISelectInputProps = VariantProps<typeof selectInputStyle> &
+  React.ComponentProps<typeof UISelect.Input> & { className?: string };
+
+const SelectInput = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Input>,
+  ISelectInputProps
+>(function SelectInput({ className, ...props }, ref) {
+  const { size: parentSize, variant: parentVariant } = useStyleContext();
+  return (
+    <UISelect.Input
+      className={selectInputStyle({
+        class: className,
+        parentVariants: {
+          size: parentSize,
+          variant: parentVariant,
+        },
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type ISelectIcon = VariantProps<typeof selectIconStyle> &
+  React.ComponentProps<typeof UISelect.Icon> & { className?: string };
+
+const SelectIcon = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Icon>,
+  ISelectIcon
+>(function SelectIcon({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext();
+  if (typeof size === 'number') {
+    return (
+      <UISelect.Icon
+        ref={ref}
+        {...props}
+        className={selectIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    //@ts-expect-error : web only
+    (props?.height !== undefined || props?.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UISelect.Icon
+        ref={ref}
+        {...props}
+        className={selectIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UISelect.Icon
+      className={selectIconStyle({
+        class: className,
+        size,
+        parentVariants: {
+          size: parentSize,
+        },
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Select.displayName = 'Select';
+SelectTrigger.displayName = 'SelectTrigger';
+SelectInput.displayName = 'SelectInput';
+SelectIcon.displayName = 'SelectIcon';
+
+// Actionsheet Components
+const SelectPortal = UISelect.Portal;
+const SelectBackdrop = UISelect.Backdrop;
+const SelectContent = UISelect.Content;
+const SelectDragIndicator = UISelect.DragIndicator;
+const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper;
+const SelectItem = UISelect.Item;
+const SelectScrollView = UISelect.ScrollView;
+const SelectVirtualizedList = UISelect.VirtualizedList;
+const SelectFlatList = UISelect.FlatList;
+const SelectSectionList = UISelect.SectionList;
+const SelectSectionHeaderText = UISelect.SectionHeaderText;
+
+export {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectItem,
+  SelectScrollView,
+  SelectVirtualizedList,
+  SelectFlatList,
+  SelectSectionList,
+  SelectSectionHeaderText,
+};

components/ui/select/select-actionsheet.tsx

@@ -0,0 +1,562 @@
+'use client';
+
+import { H4 } from '@expo/html-elements';
+import { createActionsheet } from '@gluestack-ui/core/actionsheet/creator';
+import {
+  Pressable,
+  View,
+  Text,
+  ScrollView,
+  VirtualizedList,
+  FlatList,
+  SectionList,
+  ViewStyle,
+} from 'react-native';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { withStyleContext } from '@gluestack-ui/utils/nativewind-utils';
+import { cssInterop } from 'nativewind';
+import {
+  Motion,
+  AnimatePresence,
+  createMotionAnimatedComponent,
+  MotionComponentProps,
+} from '@legendapp/motion';
+
+import React from 'react';
+
+type IAnimatedPressableProps = React.ComponentProps<typeof Pressable> &
+  MotionComponentProps<typeof Pressable, ViewStyle, unknown, unknown, unknown>;
+
+const AnimatedPressable = createMotionAnimatedComponent(
+  Pressable
+) as React.ComponentType<IAnimatedPressableProps>;
+
+type IMotionViewProps = React.ComponentProps<typeof View> &
+  MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;
+
+const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;
+
+export const UIActionsheet = createActionsheet({
+  Root: View,
+  Content: withStyleContext(MotionView),
+  Item: withStyleContext(Pressable),
+  ItemText: Text,
+  DragIndicator: View,
+  IndicatorWrapper: View,
+  Backdrop: AnimatedPressable,
+  ScrollView: ScrollView,
+  VirtualizedList: VirtualizedList,
+  FlatList: FlatList,
+  SectionList: SectionList,
+  SectionHeaderText: H4,
+  Icon: UIIcon,
+  AnimatePresence: AnimatePresence,
+});
+
+cssInterop(UIActionsheet, { className: 'style' });
+cssInterop(UIActionsheet.Content, { className: 'style' });
+cssInterop(UIActionsheet.Item, { className: 'style' });
+cssInterop(UIActionsheet.ItemText, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
+cssInterop(UIActionsheet.Backdrop, { className: 'style' });
+cssInterop(UIActionsheet.ScrollView, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.VirtualizedList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.FlatList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  columnWrapperClassName: 'columnWrapperStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.SectionList, { className: 'style' });
+cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
+
+const actionsheetContentStyle = tva({
+  base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg pb-safe',
+});
+
+const actionsheetItemStyle = tva({
+  base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 data-[checked=true]:bg-background-100',
+});
+
+const actionsheetItemTextStyle = tva({
+  base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const actionsheetDragIndicatorStyle = tva({
+  base: 'w-16 h-1 bg-background-400 rounded-full',
+});
+
+const actionsheetDragIndicatorWrapperStyle = tva({
+  base: 'w-full py-1 items-center',
+});
+
+const actionsheetBackdropStyle = tva({
+  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto',
+});
+
+const actionsheetScrollViewStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetVirtualizedListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetFlatListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionHeaderTextStyle = tva({
+  base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '5xl': 'text-5xl',
+      '4xl': 'text-4xl',
+      '3xl': 'text-3xl',
+      '2xl': 'text-2xl',
+      'xl': 'text-xl',
+      'lg': 'text-lg',
+      'md': 'text-base',
+      'sm': 'text-sm',
+      'xs': 'text-xs',
+    },
+
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow500',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+const actionsheetIconStyle = tva({
+  base: 'text-typography-900',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'w-4 h-4',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+type IActionsheetProps = VariantProps<typeof actionsheetStyle> &
+  React.ComponentProps<typeof UIActionsheet> & { className?: string };
+
+type IActionsheetContentProps = VariantProps<typeof actionsheetContentStyle> &
+  React.ComponentProps<typeof UIActionsheet.Content> & { className?: string };
+
+type IActionsheetItemProps = VariantProps<typeof actionsheetItemStyle> &
+  React.ComponentProps<typeof UIActionsheet.Item> & { className?: string };
+
+type IActionsheetItemTextProps = VariantProps<typeof actionsheetItemTextStyle> &
+  React.ComponentProps<typeof UIActionsheet.ItemText> & { className?: string };
+
+type IActionsheetDragIndicatorProps = VariantProps<
+  typeof actionsheetDragIndicatorStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.DragIndicator> & {
+    className?: string;
+  };
+
+type IActionsheetDragIndicatorWrapperProps = VariantProps<
+  typeof actionsheetDragIndicatorWrapperStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.DragIndicatorWrapper> & {
+    className?: string;
+  };
+
+type IActionsheetBackdropProps = VariantProps<typeof actionsheetBackdropStyle> &
+  React.ComponentProps<typeof UIActionsheet.Backdrop> & {
+    className?: string;
+  };
+
+type IActionsheetScrollViewProps = VariantProps<
+  typeof actionsheetScrollViewStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.ScrollView> & {
+    className?: string;
+  };
+
+type IActionsheetVirtualizedListProps = VariantProps<
+  typeof actionsheetVirtualizedListStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.VirtualizedList> & {
+    className?: string;
+  };
+
+type IActionsheetFlatListProps = VariantProps<typeof actionsheetFlatListStyle> &
+  React.ComponentProps<typeof UIActionsheet.FlatList> & {
+    className?: string;
+  };
+
+type IActionsheetSectionListProps = VariantProps<
+  typeof actionsheetSectionListStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.SectionList> & {
+    className?: string;
+  };
+
+type IActionsheetSectionHeaderTextProps = VariantProps<
+  typeof actionsheetSectionHeaderTextStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.SectionHeaderText> & {
+    className?: string;
+  };
+
+type IActionsheetIconProps = VariantProps<typeof actionsheetIconStyle> &
+  React.ComponentProps<typeof UIActionsheet.Icon> & {
+    className?: string;
+    as?: React.ElementType;
+  };
+
+const Actionsheet = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet>,
+  IActionsheetProps
+>(function Actionsheet({ className, ...props }, ref) {
+  return (
+    <UIActionsheet
+      className={actionsheetStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetContent = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Content>,
+  IActionsheetContentProps & { className?: string }
+>(function ActionsheetContent({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Content
+      className={actionsheetContentStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItem = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Item>,
+  IActionsheetItemProps
+>(function ActionsheetItem({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Item
+      className={actionsheetItemStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItemText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ItemText>,
+  IActionsheetItemTextProps
+>(function ActionsheetItemText(
+  { className, isTruncated, bold, underline, strikeThrough, size, ...props },
+  ref
+) {
+  return (
+    <UIActionsheet.ItemText
+      className={actionsheetItemTextStyle({
+        class: className,
+        isTruncated: isTruncated as boolean,
+        bold: bold as boolean,
+        underline: underline as boolean,
+        strikeThrough: strikeThrough as boolean,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicator = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicator>,
+  IActionsheetDragIndicatorProps
+>(function ActionsheetDragIndicator({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicator
+      className={actionsheetDragIndicatorStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicatorWrapper = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicatorWrapper>,
+  IActionsheetDragIndicatorWrapperProps
+>(function ActionsheetDragIndicatorWrapper({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicatorWrapper
+      className={actionsheetDragIndicatorWrapperStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetBackdrop = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Backdrop>,
+  IActionsheetBackdropProps
+>(function ActionsheetBackdrop({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Backdrop
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 0.5,
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      {...props}
+      className={actionsheetBackdropStyle({
+        class: className,
+      })}
+      ref={ref}
+    />
+  );
+});
+
+const ActionsheetScrollView = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ScrollView>,
+  IActionsheetScrollViewProps
+>(function ActionsheetScrollView({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.ScrollView
+      className={actionsheetScrollViewStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetVirtualizedList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.VirtualizedList>,
+  IActionsheetVirtualizedListProps
+>(function ActionsheetVirtualizedList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.VirtualizedList
+      className={actionsheetVirtualizedListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetFlatList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.FlatList>,
+  IActionsheetFlatListProps
+>(function ActionsheetFlatList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.FlatList
+      className={actionsheetFlatListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionList>,
+  IActionsheetSectionListProps
+>(function ActionsheetSectionList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.SectionList
+      className={actionsheetSectionListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionHeaderText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionHeaderText>,
+  IActionsheetSectionHeaderTextProps
+>(function ActionsheetSectionHeaderText(
+  {
+    className,
+    isTruncated,
+    bold,
+    underline,
+    strikeThrough,
+    size,
+    sub,
+    italic,
+    highlight,
+    ...props
+  },
+  ref
+) {
+  return (
+    <UIActionsheet.SectionHeaderText
+      className={actionsheetSectionHeaderTextStyle({
+        class: className,
+        isTruncated: isTruncated as boolean,
+        bold: bold as boolean,
+        underline: underline as boolean,
+        strikeThrough: strikeThrough as boolean,
+        size,
+        sub: sub as boolean,
+        italic: italic as boolean,
+        highlight: highlight as boolean,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetIcon = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Icon>,
+  IActionsheetIconProps
+>(function ActionsheetIcon(
+  { className, as: AsComp, size = 'sm', ...props },
+  ref
+) {
+  if (AsComp) {
+    return (
+      <AsComp
+        className={actionsheetIconStyle({
+          class: className,
+          size,
+        })}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+  return (
+    <UIActionsheet.Icon
+      className={actionsheetIconStyle({
+        class: className,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+  ActionsheetScrollView,
+  ActionsheetVirtualizedList,
+  ActionsheetFlatList,
+  ActionsheetSectionList,
+  ActionsheetSectionHeaderText,
+  ActionsheetIcon,
+};