rn-custom-ui 1.0.0

package/src/components/customList/ListEmpty.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { ActivityIndicator, Text, View } from 'react-native';
+
+import { listStyles } from './styles';
+
+type ListEmptyProps = {
+  loading?: boolean;
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+};
+
+const ListEmpty = ({
+  loading = false,
+  title = 'No items found',
+  description = 'There is nothing to show in this list yet.',
+  icon,
+}: ListEmptyProps) => {
+  if (loading) {
+    return (
+      <View style={listStyles.initialLoader}>
+        <ActivityIndicator size="large" color="#0d6efd" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={listStyles.emptyContainer}>
+      {icon}
+      <Text style={listStyles.emptyTitle}>{title}</Text>
+      <Text style={listStyles.emptyDescription}>{description}</Text>
+    </View>
+  );
+};
+
+export default ListEmpty;

package/src/components/customList/ListFooterLoader.tsx

@@ -0,0 +1,11 @@
+import { ActivityIndicator, View } from 'react-native';
+
+import { listStyles } from './styles';
+
+const ListFooterLoader = () => (
+  <View style={listStyles.footerLoader}>
+    <ActivityIndicator size="small" color="#0d6efd" />
+  </View>
+);
+
+export default ListFooterLoader;

package/src/components/customList/defaultKeyExtractor.ts

@@ -0,0 +1,7 @@
+export const defaultKeyExtractor = <T>(item: T, index: number) => {
+  if (item && typeof item === 'object' && 'id' in item) {
+    return String((item as { id: unknown }).id);
+  }
+
+  return String(index);
+};

package/src/components/customList/getFlashList.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react';
+
+type FlashListComponent = ComponentType<Record<string, unknown>>;
+
+let cachedFlashList: FlashListComponent | null | undefined;
+
+export const getFlashList = (): FlashListComponent | null => {
+  if (cachedFlashList !== undefined) {
+    return cachedFlashList;
+  }
+
+  try {
+    // Optional peer dependency — only required when engine="flashList"
+
+    const module = require('@shopify/flash-list') as {
+      FlashList: FlashListComponent;
+    };
+    cachedFlashList = module.FlashList;
+  } catch {
+    cachedFlashList = null;
+  }
+
+  return cachedFlashList;
+};
+
+export const isFlashListAvailable = () => getFlashList() !== null;

package/src/components/customList/index.tsx

@@ -0,0 +1,142 @@
+import { forwardRef, useMemo, type ReactElement } from 'react';
+import { FlatList, View, type FlatListProps } from 'react-native';
+
+import { defaultKeyExtractor } from './defaultKeyExtractor';
+import { getFlashList } from './getFlashList';
+import ListEmpty from './ListEmpty';
+import ListFooterLoader from './ListFooterLoader';
+import { listStyles } from './styles';
+import type { CustomListProps } from './types';
+
+const DEFAULT_ESTIMATED_ITEM_SIZE = 72;
+
+const ItemSeparator = () => <View style={listStyles.separator} />;
+
+function CustomListInner<T>(
+  {
+    data,
+    renderItem,
+    engine = 'flatList',
+    keyExtractor = defaultKeyExtractor,
+    horizontal = false,
+    numColumns = 1,
+    loading = false,
+    loadingMore = false,
+    refreshing = false,
+    onRefresh,
+    onEndReached,
+    onEndReachedThreshold = 0.4,
+    estimatedItemSize = DEFAULT_ESTIMATED_ITEM_SIZE,
+    emptyTitle,
+    emptyDescription,
+    emptyIcon,
+    showSeparator = false,
+    separatorStyle,
+    ListHeaderComponent,
+    ListFooterComponent,
+    ListEmptyComponent,
+    ItemSeparatorComponent,
+    contentContainerStyle,
+    style,
+    showsVerticalScrollIndicator = false,
+    showsHorizontalScrollIndicator = false,
+    ...rest
+  }: CustomListProps<T>,
+  ref: React.Ref<FlatList<T>>
+) {
+  const resolvedSeparator = useMemo(() => {
+    if (ItemSeparatorComponent) {
+      return ItemSeparatorComponent;
+    }
+
+    if (!showSeparator || horizontal) {
+      return undefined;
+    }
+
+    if (separatorStyle) {
+      return () => <View style={[listStyles.separator, separatorStyle]} />;
+    }
+
+    return ItemSeparator;
+  }, [ItemSeparatorComponent, showSeparator, horizontal, separatorStyle]);
+
+  const resolvedEmpty = useMemo(() => {
+    if (ListEmptyComponent) {
+      return ListEmptyComponent;
+    }
+
+    return (
+      <ListEmpty
+        loading={loading}
+        title={emptyTitle}
+        description={emptyDescription}
+        icon={emptyIcon}
+      />
+    );
+  }, [ListEmptyComponent, loading, emptyTitle, emptyDescription, emptyIcon]);
+
+  const resolvedFooter = useMemo(() => {
+    if (loadingMore) {
+      return ListFooterComponent ?? <ListFooterLoader />;
+    }
+
+    return ListFooterComponent;
+  }, [ListFooterComponent, loadingMore]);
+
+  const commonProps = {
+    data: loading && data.length === 0 ? [] : data,
+    renderItem,
+    keyExtractor,
+    horizontal,
+    numColumns: horizontal ? 1 : numColumns,
+    refreshing,
+    onRefresh,
+    onEndReached,
+    onEndReachedThreshold,
+    ListHeaderComponent,
+    ListFooterComponent: resolvedFooter,
+    ListEmptyComponent: resolvedEmpty,
+    ItemSeparatorComponent: resolvedSeparator,
+    contentContainerStyle: [
+      data.length === 0 && listStyles.emptyContainer,
+      contentContainerStyle,
+    ],
+    style: [listStyles.list, style],
+    showsVerticalScrollIndicator,
+    showsHorizontalScrollIndicator,
+    ...rest,
+  } satisfies Partial<FlatListProps<T>>;
+
+  if (engine === 'flashList') {
+    const FlashListComponent = getFlashList();
+
+    if (!FlashListComponent) {
+      console.warn(
+        '[CustomList] @shopify/flash-list is not installed. Falling back to FlatList.'
+      );
+    } else {
+      const flashEstimatedSize = horizontal
+        ? Math.max(estimatedItemSize, 120)
+        : estimatedItemSize;
+
+      return (
+        <FlashListComponent
+          {...commonProps}
+          ref={ref as never}
+          estimatedItemSize={flashEstimatedSize}
+        />
+      );
+    }
+  }
+
+  return <FlatList {...commonProps} ref={ref} />;
+}
+
+const CustomList = forwardRef(CustomListInner) as <T>(
+  props: CustomListProps<T> & { ref?: React.Ref<FlatList<T>> }
+) => ReactElement;
+
+export default CustomList;
+export { defaultKeyExtractor } from './defaultKeyExtractor';
+export { getFlashList, isFlashListAvailable } from './getFlashList';
+export type { CustomListProps, ListEngine } from './types';

package/src/components/customList/styles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+
+export const listStyles = StyleSheet.create({
+  list: {
+    flex: 1,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#e9ecef',
+    marginHorizontal: 16,
+  },
+  emptyContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 48,
+    gap: 8,
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#212529',
+    textAlign: 'center',
+  },
+  emptyDescription: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#6c757d',
+    textAlign: 'center',
+  },
+  footerLoader: {
+    paddingVertical: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  initialLoader: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 48,
+  },
+});

package/src/components/customList/types.ts

@@ -0,0 +1,60 @@
+import type { ReactNode, Ref } from 'react';
+import type {
+  FlatList,
+  FlatListProps,
+  ListRenderItem,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export type ListEngine = 'flatList' | 'flashList';
+
+export type CustomListProps<T> = {
+  data: T[];
+  renderItem: ListRenderItem<T>;
+  engine?: ListEngine;
+  keyExtractor?: (item: T, index: number) => string;
+  horizontal?: boolean;
+  numColumns?: number;
+  loading?: boolean;
+  loadingMore?: boolean;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  estimatedItemSize?: number;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyIcon?: ReactNode;
+  showSeparator?: boolean;
+  separatorStyle?: StyleProp<ViewStyle>;
+  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];
+  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];
+  ListEmptyComponent?: FlatListProps<T>['ListEmptyComponent'];
+  ItemSeparatorComponent?: FlatListProps<T>['ItemSeparatorComponent'];
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  showsVerticalScrollIndicator?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
+} & Omit<
+  FlatListProps<T>,
+  | 'data'
+  | 'renderItem'
+  | 'keyExtractor'
+  | 'horizontal'
+  | 'numColumns'
+  | 'refreshing'
+  | 'onRefresh'
+  | 'onEndReached'
+  | 'onEndReachedThreshold'
+  | 'ListHeaderComponent'
+  | 'ListFooterComponent'
+  | 'ListEmptyComponent'
+  | 'ItemSeparatorComponent'
+  | 'contentContainerStyle'
+  | 'style'
+  | 'showsVerticalScrollIndicator'
+  | 'showsHorizontalScrollIndicator'
+>;
+
+export type CustomListRef<T> = Ref<FlatList<T>>;

package/src/components/customModal/ModalFooter.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import CustomButton from '../customButton';
+import { styles } from './styles';
+import type { ModalAction } from './types';
+
+type ModalFooterProps = {
+  footer?: ReactNode;
+  primaryAction?: ModalAction;
+  secondaryAction?: ModalAction;
+  footerStyle?: StyleProp<ViewStyle>;
+};
+
+const ModalFooter = ({
+  footer,
+  primaryAction,
+  secondaryAction,
+  footerStyle,
+}: ModalFooterProps) => {
+  if (footer) {
+    return <View style={[styles.footer, footerStyle]}>{footer}</View>;
+  }
+
+  if (!primaryAction && !secondaryAction) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.footer, footerStyle]}>
+      {secondaryAction && (
+        <CustomButton
+          text={secondaryAction.label}
+          variant={secondaryAction.variant ?? 'outline'}
+          disabled={secondaryAction.disabled}
+          isLoading={secondaryAction.isLoading}
+          borderRadius={8}
+          buttonStyles={styles.footerButton}
+          onPress={secondaryAction.onPress}
+        />
+      )}
+      {primaryAction && (
+        <CustomButton
+          text={primaryAction.label}
+          variant={primaryAction.variant ?? 'primary'}
+          disabled={primaryAction.disabled}
+          isLoading={primaryAction.isLoading}
+          borderRadius={8}
+          buttonStyles={styles.footerButton}
+          onPress={primaryAction.onPress}
+        />
+      )}
+    </View>
+  );
+};
+
+export default ModalFooter;

package/src/components/customModal/index.tsx

@@ -0,0 +1,166 @@
+import { useMemo } from 'react';
+import { Modal, Pressable, ScrollView, Text, View } from 'react-native';
+
+import CloseButton from '../closeButton';
+import ModalFooter from './ModalFooter';
+import { presentationStyles, styles } from './styles';
+import type { CustomModalProps } from './types';
+
+const CustomModal = ({
+  visible,
+  onClose,
+  title,
+  description,
+  children,
+  presentation = 'center',
+  showCloseButton = true,
+  closeOnBackdropPress = true,
+  animationType,
+  scrollable = false,
+  containerStyle,
+  backdropStyle,
+  contentStyle,
+  headerStyle,
+  titleStyle,
+  descriptionStyle,
+  bodyStyle,
+  footerStyle,
+  footer,
+  primaryAction,
+  secondaryAction,
+  closeImage,
+  supportedOrientations = ['landscape', 'portrait'],
+  statusBarTranslucent,
+  testID,
+}: CustomModalProps) => {
+  const presentationStyle = presentationStyles[presentation];
+  const resolvedAnimationType =
+    animationType ?? presentationStyle.animationType;
+
+  const contentInnerStyle = useMemo(() => {
+    if (presentation === 'fullscreen') {
+      return styles.fullscreenContentInner;
+    }
+
+    if (presentation === 'bottom') {
+      return styles.bottomContentInner;
+    }
+
+    return styles.contentInner;
+  }, [presentation]);
+
+  const showHeader = Boolean(title || description || showCloseButton);
+
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      onClose();
+    }
+  };
+
+  const renderBody = () => {
+    if (!children) {
+      return null;
+    }
+
+    if (scrollable) {
+      return (
+        <ScrollView
+          style={[styles.body, styles.scrollBody, bodyStyle]}
+          showsVerticalScrollIndicator={false}
+          bounces={false}
+        >
+          {children}
+        </ScrollView>
+      );
+    }
+
+    return <View style={[styles.body, bodyStyle]}>{children}</View>;
+  };
+
+  const renderContent = () => (
+    <Pressable
+      style={[presentationStyle.content, contentStyle]}
+      onPress={() => {}}
+    >
+      <View style={contentInnerStyle}>
+        {presentation === 'bottom' && <View style={styles.handle} />}
+
+        {showHeader && (
+          <View style={[styles.header, headerStyle]}>
+            <View style={styles.headerText}>
+              {!!title && (
+                <Text style={[styles.title, titleStyle]}>{title}</Text>
+              )}
+              {!!description && (
+                <Text style={[styles.description, descriptionStyle]}>
+                  {description}
+                </Text>
+              )}
+            </View>
+            {showCloseButton && (
+              <CloseButton
+                closeImage={closeImage}
+                containerStyle={styles.closeButton}
+                onPress={onClose}
+              />
+            )}
+          </View>
+        )}
+
+        {renderBody()}
+
+        <ModalFooter
+          footer={footer}
+          footerStyle={footerStyle}
+          primaryAction={primaryAction}
+          secondaryAction={secondaryAction}
+        />
+      </View>
+    </Pressable>
+  );
+
+  return (
+    <Modal
+      transparent={presentation !== 'fullscreen'}
+      visible={visible}
+      animationType={resolvedAnimationType}
+      supportedOrientations={supportedOrientations}
+      statusBarTranslucent={statusBarTranslucent}
+      testID={testID}
+      onRequestClose={onClose}
+    >
+      <View style={[presentationStyle.backdrop, backdropStyle, containerStyle]}>
+        {presentation === 'bottom' ? (
+          <>
+            {closeOnBackdropPress && (
+              <Pressable
+                style={styles.backdropDismiss}
+                onPress={handleBackdropPress}
+              />
+            )}
+            {renderContent()}
+          </>
+        ) : presentation === 'center' ? (
+          <Pressable
+            style={[
+              styles.backdropDismiss,
+              {
+                justifyContent: 'center',
+                alignItems: 'center',
+              },
+            ]}
+            onPress={handleBackdropPress}
+          >
+            <Pressable onPress={() => {}}>{renderContent()}</Pressable>
+          </Pressable>
+        ) : (
+          renderContent()
+        )}
+      </View>
+    </Modal>
+  );
+};
+
+export default CustomModal;
+export { useCustomModal } from './useCustomModal';
+export type { CustomModalProps, ModalAction, ModalPresentation } from './types';

package/src/components/customModal/styles.ts

@@ -0,0 +1,131 @@
+import { StyleSheet, type ViewStyle } from 'react-native';
+
+import type { ModalPresentation } from './types';
+
+export const presentationStyles: Record<
+  ModalPresentation,
+  {
+    backdrop: ViewStyle;
+    content: ViewStyle;
+    animationType: 'none' | 'slide' | 'fade';
+  }
+> = {
+  center: {
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 20,
+    },
+    content: {
+      width: '100%',
+      maxWidth: 400,
+      maxHeight: '80%',
+      backgroundColor: '#FFFFFF',
+      borderRadius: 12,
+      overflow: 'hidden',
+    },
+    animationType: 'fade',
+  },
+  bottom: {
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'flex-end',
+    },
+    content: {
+      width: '100%',
+      maxHeight: '85%',
+      backgroundColor: '#FFFFFF',
+      borderTopLeftRadius: 16,
+      borderTopRightRadius: 16,
+      overflow: 'hidden',
+    },
+    animationType: 'slide',
+  },
+  fullscreen: {
+    backdrop: {
+      flex: 1,
+      backgroundColor: '#FFFFFF',
+    },
+    content: {
+      flex: 1,
+      width: '100%',
+      backgroundColor: '#FFFFFF',
+    },
+    animationType: 'slide',
+  },
+};
+
+export const styles = StyleSheet.create({
+  backdropDismiss: {
+    ...StyleSheet.absoluteFill,
+  },
+  contentInner: {
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 16,
+  },
+  bottomContentInner: {
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 24,
+  },
+  fullscreenContentInner: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 56,
+    paddingBottom: 20,
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#DEE2E6',
+    marginTop: 12,
+    marginBottom: 8,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 12,
+    marginBottom: 12,
+  },
+  headerText: {
+    flex: 1,
+    gap: 6,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#212529',
+  },
+  description: {
+    fontSize: 14,
+    color: '#6C757D',
+    lineHeight: 20,
+  },
+  closeButton: {
+    position: 'relative',
+    top: 0,
+    right: 0,
+  },
+  body: {
+    flexGrow: 0,
+  },
+  scrollBody: {
+    maxHeight: 320,
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 16,
+  },
+  footerButton: {
+    flex: 1,
+    alignSelf: 'auto',
+  },
+});