nx-react-native-cli 2.7.1 → 3.0.0

package/templates/shared/apps/mobile/src/components/atoms/GradientBackground/gradient-background.component.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable no-magic-numbers */
+import { Canvas, Fill, LinearGradient, vec } from '@shopify/react-native-skia';
+import React from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+
+import { useLocalStorageStore } from '@/stores';
+import { colors } from '@/tailwind';
+
+type Props = {
+  variant?: 'bottomSheet' | 'login' | 'welcome';
+};
+
+const DARK_GRADIENTS: Record<string, string[]> = {
+  bottomSheet: [colors.sheet, colors.background],
+  login: [colors.secondary[950], colors.background, colors.secondary[950]],
+  welcome: [colors.background, colors.secondary[950], colors.background],
+};
+
+const LIGHT_GRADIENTS: Record<string, string[]> = {
+  bottomSheet: [colors.gray[100], colors.white],
+  login: [colors.gray[50], colors.white, colors.gray[50]],
+  welcome: [colors.white, colors.gray[50], colors.white],
+};
+
+export function GradientBackground(props: Props) {
+  const { variant = 'login' } = props;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
+  const isDark = colorScheme === 'dark';
+  const { height, width } = useWindowDimensions();
+
+  const gradientColors = isDark ? DARK_GRADIENTS[variant] : LIGHT_GRADIENTS[variant];
+
+  return (
+    <Canvas style={StyleSheet.absoluteFill}>
+      {/* Base linear gradient */}
+      <Fill>
+        <LinearGradient
+          colors={gradientColors}
+          end={vec(width / 2, height)}
+          start={vec(width / 2, 0)}
+        />
+      </Fill>
+    </Canvas>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/GradientBackground/index.ts

@@ -0,0 +1 @@
+export * from './gradient-background.component';

package/templates/shared/apps/mobile/src/components/atoms/InputLayout/input-layout.component.tsx

@@ -9,24 +9,32 @@ type Props = DefaultComponentProps & {
   children?: React.ReactNode;
   isRequired?: boolean;
   label?: string;
+  subtitle?: string;
   textStyle?: StyleProp<TextStyle>;
 };
 
 export function InputLayout(props: Props) {
-  const { children, error, isRequired, label, style, textStyle } = props;
+  const { children, error, isRequired, label, style, subtitle, textStyle } = props;
 
   return (
     <View style={[style]}>
       {label && (
-        <Typography style={[tw`mb-2 text-gray-600`, textStyle]}>
+        <Typography style={[tw`mb-2 text-gray-600 dark:text-gray-300`, textStyle]}>
           {label}
           {isRequired && <Typography style={tw`text-red-600`}>{isRequired && '*'}</Typography>}
         </Typography>
       )}
       {children}
       {!!error && (
-        <View style={tw`items-end`}>
-          <Typography style={tw`text-right text-red-500`}>{error}</Typography>
+        <View style={tw`mt-1 items-start`}>
+          <Typography style={tw`text-right text-xs text-red-500`}>{error}</Typography>
+        </View>
+      )}
+      {!!subtitle && !error && (
+        <View style={tw`mt-1 items-start`}>
+          <Typography style={tw`dark:text-subtitle text-right text-xs text-gray-400`}>
+            {subtitle}
+          </Typography>
         </View>
       )}
     </View>

package/templates/shared/apps/mobile/src/components/atoms/KeyboardAccessory/keyboard-accessory.component.tsx

@@ -15,9 +15,12 @@ export function KeyboardAccessory(props: Props) {
 
   return (
     <InputAccessoryView nativeID={nativeID}>
-      <View style={tw`flex-row items-center justify-end bg-[#313132] px-2`}>
-        <Button buttonStyle={tw`my-2 rounded-lg bg-[#717172]`} onPress={() => Keyboard.dismiss()}>
-          <KeyboardHideIcon style={tw`text-white`} />
+      <View style={tw`flex-row items-center justify-end bg-gray-100 px-2 dark:bg-[#313132]`}>
+        <Button
+          buttonStyle={tw`my-2 rounded-lg bg-gray-200 dark:bg-[#717172]`}
+          onPress={() => Keyboard.dismiss()}
+        >
+          <KeyboardHideIcon style={tw`text-gray-600 dark:text-white`} />
         </Button>
       </View>
     </InputAccessoryView>

package/templates/shared/apps/mobile/src/components/atoms/Modal/modal.component.tsx

@@ -30,6 +30,8 @@ function IOSModal(props: ModalProps) {
 
   return (
     <RNModal
+      hideModalContentWhileAnimating
+      useNativeDriver
       animationIn="fadeIn"
       animationInTiming={FADE_IN_DURATION}
       animationOut="fadeOut"

package/templates/shared/apps/mobile/src/components/atoms/ScreenLoader/screen-loader.component.tsx

@@ -10,7 +10,12 @@ export function ScreenLoader(props: Props) {
   const { style } = props;
 
   return (
-    <View style={[tw`h-full w-full items-center justify-center bg-gray-50 p-8`, style]}>
+    <View
+      style={[
+        tw`dark:bg-background h-full w-full items-center justify-center bg-gray-50 p-8`,
+        style,
+      ]}
+    >
       <ActivityIndicator color={colors.primary[400]} />
     </View>
   );

package/templates/shared/apps/mobile/src/components/atoms/SelectDropdown/index.ts

@@ -0,0 +1 @@
+export * from './select-dropdown.component';

package/templates/shared/apps/mobile/src/components/atoms/SelectDropdown/select-dropdown.component.tsx

@@ -0,0 +1,223 @@
+/* eslint-disable max-params */
+/* eslint-disable no-magic-numbers */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dimensions, Pressable, ScrollView, View } from 'react-native';
+
+import { Modal, Typography } from '@/components';
+import { ChevronDownIcon, ChevronRightIcon } from '@/icons';
+import { colors, defaultInputContainerStyle, defaultInputTextStyle, tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
+
+const DROPDOWN_OFFSET = 8;
+const MAX_MENU_HEIGHT = 320;
+const OPTION_ROW_HEIGHT = 48;
+
+type DropdownOption = {
+  id: string;
+  label: string;
+};
+
+type DropdownLayout = {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+};
+
+type Props = DefaultComponentProps & {
+  label?: string;
+  options: DropdownOption[];
+  placeholder?: string;
+  selectedId?: string;
+  onSelect: (id: string) => void;
+};
+
+type OptionItemProps = {
+  isLast: boolean;
+  isSelected: boolean;
+  label: string;
+  onPress: () => void;
+};
+
+function OptionItem(props: OptionItemProps) {
+  const { isLast, isSelected, label, onPress } = props;
+
+  return (
+    <Pressable
+      style={[
+        tw`flex-row items-center justify-between px-4 py-3`,
+        !isLast && tw`dark:border-divider border-b border-gray-200`,
+      ]}
+      onPress={onPress}
+    >
+      <View style={tw`flex-1`}>
+        <Typography
+          style={[
+            tw`text-base`,
+            isSelected ? tw`text-primary-500 font-medium` : tw`dark:text-foreground text-gray-800`,
+          ]}
+        >
+          {label}
+        </Typography>
+      </View>
+    </Pressable>
+  );
+}
+
+export function SelectDropdown(props: Props) {
+  const { label, onSelect, options, placeholder = 'Select', selectedId, style } = props;
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [dropdownLayout, setDropdownLayout] = useState<DropdownLayout | null>(null);
+  const triggerRef = useRef<View>(null);
+
+  const selectedOption = useMemo(
+    () => options.find((option) => option.id === selectedId),
+    [options, selectedId],
+  );
+  const selectedLabel = selectedOption?.label ?? placeholder;
+  const lastIndex = options.length - 1;
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const handleSelect = useCallback(
+    (optionId: string) => {
+      onSelect(optionId);
+      setIsOpen(false);
+    },
+    [onSelect],
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setDropdownLayout({ height, width, x, y });
+    });
+  }, [isOpen]);
+
+  const optionPressHandlers = useMemo(() => {
+    const handlers: Record<string, () => void> = {};
+
+    options.forEach((option) => {
+      handlers[option.id] = () => handleSelect(option.id);
+    });
+
+    return handlers;
+  }, [handleSelect, options]);
+
+  function renderOption(option: DropdownOption, index: number) {
+    const handlePress = optionPressHandlers[option.id];
+
+    return (
+      <OptionItem
+        key={option.id}
+        isLast={index === lastIndex}
+        isSelected={option.id === selectedId}
+        label={option.label}
+        onPress={handlePress}
+      />
+    );
+  }
+
+  function renderMenu() {
+    if (!dropdownLayout) {
+      return null;
+    }
+
+    const screenHeight = Dimensions.get('window').height;
+    const estimatedMenuHeight = Math.min(MAX_MENU_HEIGHT, options.length * OPTION_ROW_HEIGHT);
+    const spaceBelow = screenHeight - (dropdownLayout.y + dropdownLayout.height) - DROPDOWN_OFFSET;
+    const spaceAbove = dropdownLayout.y - DROPDOWN_OFFSET;
+    const canOpenBelow = spaceBelow >= estimatedMenuHeight;
+    const canOpenAbove = spaceAbove >= estimatedMenuHeight;
+    const shouldOpenBelow =
+      canOpenBelow || (!canOpenBelow && !canOpenAbove && spaceBelow >= spaceAbove);
+    const preferredTop = shouldOpenBelow
+      ? dropdownLayout.y + dropdownLayout.height + DROPDOWN_OFFSET
+      : dropdownLayout.y - estimatedMenuHeight - DROPDOWN_OFFSET;
+    const clampedTop = Math.min(
+      Math.max(0, preferredTop),
+      Math.max(0, screenHeight - estimatedMenuHeight - DROPDOWN_OFFSET),
+    );
+
+    return (
+      <View
+        style={[
+          tw`dark:border-divider dark:bg-sheet absolute z-50 max-h-80 rounded-xl border border-gray-200 bg-white`,
+          {
+            elevation: 5,
+            left: dropdownLayout.x,
+            shadowColor: colors.gray[900],
+            shadowOffset: {
+              height: 2,
+              width: 0,
+            },
+            shadowOpacity: 0.15,
+            shadowRadius: 4,
+            top: clampedTop,
+            width: dropdownLayout.width,
+          },
+        ]}
+      >
+        <ScrollView showsVerticalScrollIndicator={false} style={tw`max-h-80`}>
+          {options.map(renderOption)}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  return (
+    <>
+      {label && (
+        <Typography style={tw`mb-1 text-sm font-medium text-gray-700 dark:text-gray-300`}>
+          {label}
+        </Typography>
+      )}
+      <Pressable
+        ref={triggerRef}
+        style={[
+          defaultInputContainerStyle,
+          tw`dark:border-divider dark:bg-surface items-center justify-between`,
+          style,
+        ]}
+        onPress={handleToggle}
+      >
+        <View style={tw`flex-1`}>
+          <Typography
+            style={[
+              defaultInputTextStyle,
+              tw`dark:text-foreground`,
+              !selectedOption && tw`dark:text-placeholder text-gray-400`,
+            ]}
+          >
+            {selectedLabel}
+          </Typography>
+        </View>
+        {isOpen ? (
+          <ChevronDownIcon height={20} style={tw`dark:text-subtitle text-gray-500`} width={20} />
+        ) : (
+          <ChevronRightIcon height={20} style={tw`dark:text-subtitle text-gray-500`} width={20} />
+        )}
+      </Pressable>
+
+      <Modal
+        containerStyle={tw`flex-1 p-0`}
+        isVisible={isOpen}
+        onBackButtonPress={handleClose}
+        onBackdropPress={handleClose}
+      >
+        <View pointerEvents="box-none" style={tw`flex-1`}>
+          {renderMenu()}
+        </View>
+      </Modal>
+    </>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/Skeleton/skeleton.component.tsx

@@ -36,7 +36,7 @@ export function Skeleton(props: Props) {
   }
 
   return (
-    <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle, style]}>
+    <Animated.View style={[tw`dark:bg-surface rounded-lg bg-gray-200`, animatedStyle, style]}>
       <View style={tw`opacity-0`}>{children}</View>
     </Animated.View>
   );

package/templates/shared/apps/mobile/src/components/atoms/TextInput/bottom-sheet-text-input.component.tsx

@@ -88,6 +88,7 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
     <View
       style={[
         defaultInputContainerStyle,
+        tw`dark:border-divider dark:bg-surface`,
         focusedInputStyle(isFocused),
         disabledInputStyle(isDisabled),
         style,
@@ -100,8 +101,8 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
         multiline={multiline}
         placeholder={placeholder}
         placeholderTextColor={colors.gray[500]}
-        selectionColor={colors.primary}
-        style={[defaultInputTextStyle, textStyle]}
+        selectionColor={colors.primary[400]}
+        style={[defaultInputTextStyle, tw`dark:text-foreground`, textStyle]}
         value={value}
         onBlur={(e) => handleOnBlur(e as NativeSyntheticEvent<TextInputFocusEventData>)}
         onChangeText={handleOnChangeText}
@@ -115,7 +116,7 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
           testID="clear-button"
           onPress={handleOnClearPress}
         >
-          <CrossIcon />
+          <CrossIcon style={tw`text-subtitle`} />
         </Pressable>
       )}
     </View>

package/templates/shared/apps/mobile/src/components/atoms/TextInput/text-input.component.tsx

@@ -11,6 +11,7 @@ import {
 import { DefaultNameInputProps } from './constants';
 
 import { CrossIcon } from '@/icons';
+import { useLocalStorageStore } from '@/stores';
 import {
   colors,
   defaultInputContainerStyle,
@@ -43,6 +44,7 @@ export function TextInput(props: TextInputProps) {
     value,
     ...extraProps
   } = props;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
   const [isClearButtonVisible, setIsClearButtonVisible] = useState<boolean>(false);
   const [isFocused, setFocused] = useState<boolean>(false);
 
@@ -81,6 +83,7 @@ export function TextInput(props: TextInputProps) {
     <View
       style={[
         defaultInputContainerStyle,
+        tw`dark:border-divider dark:bg-surface`,
         focusedInputStyle(isFocused),
         disabledInputStyle(isDisabled),
         style,
@@ -89,12 +92,13 @@ export function TextInput(props: TextInputProps) {
       <RNTextInput
         {...DefaultNameInputProps}
         ref={textInputRef}
+        cursorColor={colors.primary[400]}
         editable={!isDisabled}
         multiline={multiline}
         placeholder={placeholder}
-        placeholderTextColor={colors.gray[500]}
-        selectionColor={colors.primary}
-        style={[defaultInputTextStyle, textStyle]}
+        placeholderTextColor={colorScheme === 'dark' ? colors.placeholder : colors.gray[400]}
+        selectionColor={colors.primary[400]}
+        style={[defaultInputTextStyle, tw`dark:text-foreground`, textStyle]}
         value={value}
         onBlur={handleOnBlur}
         onChangeText={handleOnChangeText}
@@ -108,7 +112,7 @@ export function TextInput(props: TextInputProps) {
           testID="clear-button"
           onPress={handleOnClearPress}
         >
-          <CrossIcon style={tw`text-gray-400`} />
+          <CrossIcon style={tw`dark:text-subtitle text-gray-400`} />
         </Pressable>
       )}
     </View>

package/templates/shared/apps/mobile/src/components/atoms/ThemeManager/index.ts

@@ -0,0 +1 @@
+export * from './theme-manager.component';

package/templates/shared/apps/mobile/src/components/atoms/ThemeManager/theme-manager.component.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+import { useDeviceContext } from 'twrnc';
+
+import CONFIG from '@/config';
+import { useLocalStorageStore } from '@/stores';
+import { tw } from '@/tailwind';
+
+export function ThemeManager() {
+  const storedScheme = useLocalStorageStore((s) => s.colorScheme);
+  useDeviceContext(tw, {
+    initialColorScheme: storedScheme,
+    observeDeviceColorSchemeChanges: false,
+  });
+
+  const isDark = storedScheme === 'dark';
+
+  useEffect(() => {
+    StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content');
+    if (CONFIG.IS_ANDROID) {
+      StatusBar.setBackgroundColor('transparent');
+      StatusBar.setTranslucent(true);
+    }
+  }, [isDark]);
+
+  return null;
+}

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/index.ts

@@ -0,0 +1,3 @@
+export * from './toast-manager.component';
+export * from './toast-manager.types';
+export * from './toast.service';

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/toast-manager.component.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SvgProps } from 'react-native-svg';
+
+import { ToastManagerRef, ToastOptions, ToastVariant } from './toast-manager.types';
+import { Toast } from './toast.service';
+
+import { Typography } from '@/components/atoms/Typography';
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from '@/icons';
+import { colors, tw } from '@/tailwind';
+
+type QueuedToast = ToastOptions & {
+  variant: ToastVariant;
+};
+
+type VariantConfig = {
+  color: string;
+  icon: React.FC<SvgProps>;
+};
+
+const ANIMATION_DURATION = 300;
+const DEFAULT_DURATION = 3000;
+const ICON_SIZE = 20;
+const BOTTOM_PADDING_OFFSET = 16;
+
+const VARIANT_CONFIG: Record<ToastVariant, VariantConfig> = {
+  error: { color: colors.error, icon: XCircleIcon },
+  info: { color: colors.secondary[500], icon: InfoIcon },
+  success: { color: colors.success, icon: CheckCircleIcon },
+  warning: { color: colors.primary[500], icon: AlertTriangleIcon },
+};
+
+export function ToastManager() {
+  const [queue, setQueue] = useState<QueuedToast[]>([]);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const insets = useSafeAreaInsets();
+
+  const currentToast = queue[0];
+
+  const handleDismiss = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setQueue((prev) => prev.slice(1));
+  }, []);
+
+  useEffect(() => {
+    const ref: ToastManagerRef = {
+      show: (variant: ToastVariant, options: ToastOptions) => {
+        setQueue((prev) => [...prev, { ...options, variant }]);
+      },
+    };
+    Toast.setRef(ref);
+  }, []);
+
+  useEffect(() => {
+    if (!currentToast) {
+      return;
+    }
+
+    const duration = currentToast.duration ?? DEFAULT_DURATION;
+    timerRef.current = setTimeout(() => {
+      setQueue((prev) => prev.slice(1));
+    }, duration);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [currentToast]);
+
+  if (!currentToast) {
+    return null;
+  }
+
+  const config = VARIANT_CONFIG[currentToast.variant];
+  const IconComponent = config.icon;
+
+  return (
+    <View pointerEvents="box-none" style={tw`absolute bottom-10 left-6 right-6 z-50 items-center`}>
+      <Animated.View
+        key={`${currentToast.variant}-${currentToast.message}`}
+        entering={SlideInDown.duration(ANIMATION_DURATION)}
+        exiting={SlideOutDown.duration(ANIMATION_DURATION)}
+        style={[tw`mx-4 w-full max-w-sm`, { paddingBottom: insets.bottom + BOTTOM_PADDING_OFFSET }]}
+      >
+        <Pressable
+          style={tw`dark:border-divider dark:bg-sheet flex-row items-center rounded-xl border border-gray-200 bg-white px-4 py-3.5 shadow-sm`}
+          onPress={handleDismiss}
+        >
+          <View style={tw`mr-3`}>
+            <IconComponent color={config.color} height={ICON_SIZE} width={ICON_SIZE} />
+          </View>
+          <Typography
+            numberOfLines={2}
+            style={tw`dark:text-foreground flex-1 text-sm font-medium text-gray-800`}
+          >
+            {currentToast.message}
+          </Typography>
+        </Pressable>
+      </Animated.View>
+    </View>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/toast-manager.types.ts

@@ -0,0 +1,10 @@
+export type ToastVariant = 'error' | 'info' | 'success' | 'warning';
+
+export type ToastOptions = {
+  duration?: number;
+  message: string;
+};
+
+export type ToastManagerRef = {
+  show: (variant: ToastVariant, options: ToastOptions) => void;
+};

package/templates/shared/apps/mobile/src/components/atoms/ToastManager/toast.service.ts

@@ -0,0 +1,27 @@
+import { ToastManagerRef, ToastOptions } from './toast-manager.types';
+
+class ToastService {
+  private static ref: ToastManagerRef | null = null;
+
+  static error(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('error', { message, ...options });
+  }
+
+  static info(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('info', { message, ...options });
+  }
+
+  static setRef(ref: ToastManagerRef) {
+    ToastService.ref = ref;
+  }
+
+  static success(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('success', { message, ...options });
+  }
+
+  static warning(message: string, options?: Omit<ToastOptions, 'message'>) {
+    ToastService.ref?.show('warning', { message, ...options });
+  }
+}
+
+export { ToastService as Toast };

package/templates/shared/apps/mobile/src/components/atoms/Typography/typography.component.tsx

@@ -16,7 +16,7 @@ export function Typography(props: Props): JSX.Element {
   return (
     <RNText
       {...shouldTruncateTextProps}
-      style={[tw`font-sans text-base font-normal text-black`, style]}
+      style={[tw`dark:text-foreground font-sans text-base font-normal text-gray-900`, style]}
       {...extraProps}
     />
   );

package/templates/shared/apps/mobile/src/components/atoms/index.ts

@@ -1,13 +1,21 @@
+export * from './AlertManager';
 export * from './BottomSheet';
 export * from './Button';
+export * from './DateModalInput';
+export * from './DatePicker';
+export * from './DateTextInput';
 export * from './Divider';
 export * from './ExcludedEdges';
+export * from './GradientBackground';
 export * from './InputLayout';
 export * from './KeyboardAccessory';
 export * from './KeyboardAwareScrollView';
 export * from './ListLoadingItem';
 export * from './Modal';
 export * from './ScreenLoader';
+export * from './SelectDropdown';
 export * from './Skeleton';
 export * from './TextInput';
+export * from './ThemeManager';
+export * from './ToastManager';
 export * from './Typography';

package/templates/shared/apps/mobile/src/components/molecules/BackButton/back-button.component.tsx

@@ -51,7 +51,7 @@ export function BackButton(props: Props) {
       onPress={handleOnPress}
     >
       <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
-        <ArrowLeftIcon style={tw`text-gray-950`} />
+        <ArrowLeftIcon style={tw`dark:text-foreground text-gray-900`} />
       </View>
     </TouchableOpacity>
   );