rn-custom-ui 1.0.0

package/lib/typescript/src/customHooks/useMutation.d.ts

@@ -0,0 +1,15 @@
+import type { ApiStatus, UseMutationOptions } from './types';
+export declare const useMutation: <TData, TVariables = void, TError = unknown>(mutationFn: (variables: TVariables, signal?: AbortSignal) => Promise<TData>, options?: UseMutationOptions<TData, TVariables, TError>) => {
+    mutate: (nextVariables: TVariables) => void;
+    mutateAsync: (nextVariables: TVariables) => Promise<TData>;
+    reset: () => void;
+    status: ApiStatus;
+    isIdle: boolean;
+    isLoading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    data: TData | null;
+    error: TError | null;
+    variables: TVariables | null;
+};
+//# sourceMappingURL=useMutation.d.ts.map

package/lib/typescript/src/customHooks/useMutation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMutation.d.ts","sourceRoot":"","sources":["../../../../src/customHooks/useMutation.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,WAAW,GAAI,KAAK,EAAE,UAAU,GAAG,IAAI,EAAE,MAAM,GAAG,OAAO,EACpE,YAAY,CAAC,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,KAAK,CAAC,EAC3E,UAAS,kBAAkB,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,CAAM;4BA4DzC,UAAU;iCA5CJ,UAAU;;;;;;;;;;CAmEnC,CAAC"}

package/lib/typescript/src/customHooks/usePaginatedApi.d.ts

@@ -0,0 +1,19 @@
+import type { ApiStatus, PaginatedFetcher, PaginatedResponse, UsePaginatedApiOptions } from './types';
+export declare const usePaginatedApi: <TItem, TError = unknown>(fetcher: PaginatedFetcher<TItem>, options?: UsePaginatedApiOptions<TItem, TError>) => {
+    refresh: () => Promise<void>;
+    loadMore: () => Promise<PaginatedResponse<TItem> | null>;
+    reset: () => void;
+    status: ApiStatus;
+    isIdle: boolean;
+    isLoading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    items: TItem[];
+    page: number;
+    hasMore: boolean;
+    total: number | undefined;
+    error: TError | null;
+    isRefreshing: boolean;
+    isLoadingMore: boolean;
+};
+//# sourceMappingURL=usePaginatedApi.d.ts.map

package/lib/typescript/src/customHooks/usePaginatedApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginatedApi.d.ts","sourceRoot":"","sources":["../../../../src/customHooks/usePaginatedApi.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,eAAe,GAAI,KAAK,EAAE,MAAM,GAAG,OAAO,EACrD,SAAS,gBAAgB,CAAC,KAAK,CAAC,EAChC,UAAS,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAM;;;;;;;;;;;;;;;;CAoJpD,CAAC"}

package/lib/typescript/src/customHooks/usePollingApi.d.ts

@@ -0,0 +1,13 @@
+import type { ApiFetcher, UsePollingApiOptions } from './types';
+export declare const usePollingApi: <TData, TError = unknown>(fetcher: ApiFetcher<TData>, options: UsePollingApiOptions<TData, TError>) => {
+    refetch: () => Promise<TData | null>;
+    reset: () => void;
+    status: import("./types").ApiStatus;
+    isIdle: boolean;
+    isLoading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    data: TData | null;
+    error: TError | null;
+};
+//# sourceMappingURL=usePollingApi.d.ts.map

package/lib/typescript/src/customHooks/usePollingApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePollingApi.d.ts","sourceRoot":"","sources":["../../../../src/customHooks/usePollingApi.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,KAAK,EAAE,MAAM,GAAG,OAAO,EACnD,SAAS,UAAU,CAAC,KAAK,CAAC,EAC1B,SAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC;;;;;;;;;;CAuC7C,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,11 @@
+export { multiply } from './multiply';
+export * from './customFunctions';
+export * from './customHooks';
+export { default as CustomButton, type ButtonContentAlign, type ButtonSize, type ButtonVariant, type CustomButtonProps, type IconOnlyShape, } from './components/customButton';
+export { default as CustomDropDown, type CustomDropDownProps, type DropDownItemImageAlign, type DropDownListItem, type DropDownMode, type DropDownOption, } from './components/customDropDown';
+export { default as CustomCheckbox, type CheckboxLabelPosition, type CheckboxShape, type CheckboxSize, type CheckboxVariant, type CustomCheckboxProps, } from './components/CustomCheckbox';
+export { default as CustomList, defaultKeyExtractor, getFlashList, isFlashListAvailable, type CustomListProps, type ListEngine, } from './components/customList';
+export { default as CustomNumberPad, applyNumberPadKey, useNumberPadInput, NUMBER_PAD_ROWS, type CustomNumberPadProps, type NumberPadBottomLeftKey, type NumberPadKeyConfig, type NumberPadKeyType, type NumberPadSize, type NumberPadVariant, type UseNumberPadInputOptions, } from './components/customNumberPad';
+export { default as CustomModal, useCustomModal, type CustomModalProps, type ModalAction, type ModalPresentation, } from './components/customModal';
+export { default as CustomSlideTabs, type CustomSlideTabsProps, type SlideTabItem, type SlideTabSceneState, type SlideTabFetcher, type SlideTabIconComponent, } from './components/customSlideTabs';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,KAAK,kBAAkB,EACvB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,aAAa,GACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,mBAAmB,GACzB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,KAAK,eAAe,EACpB,KAAK,UAAU,GAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,wBAAwB,GAC9B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,cAAc,EACd,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,qBAAqB,GAC3B,MAAM,8BAA8B,CAAC"}

package/lib/typescript/src/multiply.d.ts

@@ -0,0 +1,2 @@
+export declare function multiply(a: number, b: number): number;
+//# sourceMappingURL=multiply.d.ts.map

package/lib/typescript/src/multiply.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiply.d.ts","sourceRoot":"","sources":["../../../src/multiply.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/package.json

@@ -0,0 +1,181 @@
+{
+  "name": "rn-custom-ui",
+  "version": "1.0.0",
+  "description": "custom react native ui",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "rn-custom-ui-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace rn-custom-ui-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "test": "jest",
+    "release": "release-it --only-version",
+    "web": "vite",
+    "build:web": "vite build",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mustafa-Hakimji/react-native-custom-component.git"
+  },
+  "author": "Mustafa Hakimji <mustafahussaini757@gmail.com> (https://github.com/Mustafa-Hakimji)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Mustafa-Hakimji/react-native-custom-component/issues"
+  },
+  "homepage": "https://github.com/Mustafa-Hakimji/react-native-custom-component#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@release-it/conventional-changelog": "^11.0.1",
+    "@shopify/flash-list": "^2.2.0",
+    "@types/react": "^19.2.0",
+    "commitlint": "^21.0.2",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
+    "react-native-builder-bob": "^0.41.0",
+    "react-native-web": "~0.21.2",
+    "release-it": "^20.2.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@shopify/flash-list": ">=1.6.0",
+    "react": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "@shopify/flash-list": {
+      "optional": true
+    }
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "require",
+        "react-native",
+        "<%- project.sourceCondition -%>"
+      ]
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "jest",
+      "lefthook",
+      "release-it",
+      "vite",
+      "eslint"
+    ],
+    "version": "0.63.0"
+  }
+}

package/src/components/CustomCheckbox/index.tsx

@@ -0,0 +1,143 @@
+import { useMemo } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { shapeStyles, sizeStyles, styles, variantTheme } from './styles';
+import type { CustomCheckboxProps } from './types';
+
+const CustomCheckbox = ({
+  checked,
+  onChange,
+  indeterminate = false,
+  disabled = false,
+  error = false,
+  errorMessage,
+  label,
+  description,
+  children,
+  variant = 'default',
+  size = 'md',
+  shape = 'square',
+  labelPosition = 'right',
+  containerStyle,
+  boxStyle,
+  labelStyle,
+  descriptionStyle,
+  errorStyle,
+  accessibilityLabel,
+}: CustomCheckboxProps) => {
+  const theme = variantTheme[variant];
+  const sizing = sizeStyles[size];
+  const isActive = checked || indeterminate;
+
+  const handlePress = () => {
+    if (disabled) {
+      return;
+    }
+
+    onChange?.(!checked);
+  };
+
+  const boxStyles = useMemo(
+    () => [
+      styles.box,
+      sizing.box,
+      shapeStyles[shape],
+      theme.box,
+      isActive && theme.boxChecked,
+      error && styles.boxError,
+      boxStyle,
+    ],
+    [sizing.box, shape, theme.box, theme.boxChecked, isActive, error, boxStyle]
+  );
+
+  const renderMark = () => {
+    if (indeterminate) {
+      return (
+        <View
+          style={[
+            sizing.indeterminate,
+            { backgroundColor: theme.indeterminateColor },
+          ]}
+        />
+      );
+    }
+
+    if (!checked) {
+      return null;
+    }
+
+    return <Text style={[sizing.check, { color: theme.checkColor }]}>✓</Text>;
+  };
+
+  const renderLabelContent = () => {
+    if (children) {
+      return children;
+    }
+
+    if (!label && !description) {
+      return null;
+    }
+
+    return (
+      <View
+        style={[
+          styles.labelBlock,
+          labelPosition === 'right'
+            ? styles.labelBlockRight
+            : styles.labelBlockLeft,
+        ]}
+      >
+        {!!label && (
+          <Text style={[styles.label, sizing.label, theme.label, labelStyle]}>
+            {label}
+          </Text>
+        )}
+        {!!description && (
+          <Text style={[styles.description, descriptionStyle]}>
+            {description}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const hasLabelContent = Boolean(children || label || description);
+
+  return (
+    <View style={styles.wrapper}>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        disabled={disabled}
+        style={[
+          styles.container,
+          labelPosition === 'left' && styles.containerLabelLeft,
+          disabled && styles.containerDisabled,
+          containerStyle,
+        ]}
+        accessibilityRole="checkbox"
+        accessibilityState={{
+          checked: indeterminate ? 'mixed' : checked,
+          disabled,
+        }}
+        accessibilityLabel={accessibilityLabel ?? label}
+        onPress={handlePress}
+      >
+        <View style={boxStyles}>{renderMark()}</View>
+        {hasLabelContent && renderLabelContent()}
+      </TouchableOpacity>
+
+      {error && !!errorMessage && (
+        <Text style={[styles.errorMessage, errorStyle]}>{errorMessage}</Text>
+      )}
+    </View>
+  );
+};
+
+export default CustomCheckbox;
+export type {
+  CheckboxLabelPosition,
+  CheckboxShape,
+  CheckboxSize,
+  CheckboxVariant,
+  CustomCheckboxProps,
+} from './types';

package/src/components/CustomCheckbox/styles.ts

@@ -0,0 +1,146 @@
+import { StyleSheet, type TextStyle, type ViewStyle } from 'react-native';
+
+import type { CheckboxShape, CheckboxSize, CheckboxVariant } from './types';
+
+export const sizeStyles: Record<
+  CheckboxSize,
+  {
+    box: ViewStyle;
+    check: TextStyle;
+    indeterminate: ViewStyle;
+    label: TextStyle;
+  }
+> = {
+  sm: {
+    box: { width: 18, height: 18, borderWidth: 1.5 },
+    check: { fontSize: 11, lineHeight: 13 },
+    indeterminate: { width: 8, height: 2 },
+    label: { fontSize: 13 },
+  },
+  md: {
+    box: { width: 24, height: 24, borderWidth: 2 },
+    check: { fontSize: 14, lineHeight: 16 },
+    indeterminate: { width: 10, height: 2 },
+    label: { fontSize: 14 },
+  },
+  lg: {
+    box: { width: 30, height: 30, borderWidth: 2 },
+    check: { fontSize: 18, lineHeight: 20 },
+    indeterminate: { width: 12, height: 2.5 },
+    label: { fontSize: 16 },
+  },
+};
+
+export const shapeStyles: Record<CheckboxShape, ViewStyle> = {
+  square: { borderRadius: 4 },
+  rounded: { borderRadius: 8 },
+  circle: { borderRadius: 999 },
+};
+
+export const variantTheme: Record<
+  CheckboxVariant,
+  {
+    box: ViewStyle;
+    boxChecked: ViewStyle;
+    checkColor: string;
+    indeterminateColor: string;
+    label: TextStyle;
+  }
+> = {
+  default: {
+    box: { borderColor: '#212529', backgroundColor: '#fff' },
+    boxChecked: { borderColor: '#212529', backgroundColor: '#212529' },
+    checkColor: '#fff',
+    indeterminateColor: '#fff',
+    label: { color: '#212529' },
+  },
+  primary: {
+    box: { borderColor: '#0d6efd', backgroundColor: '#fff' },
+    boxChecked: { borderColor: '#0d6efd', backgroundColor: '#0d6efd' },
+    checkColor: '#fff',
+    indeterminateColor: '#fff',
+    label: { color: '#212529' },
+  },
+  success: {
+    box: { borderColor: '#198754', backgroundColor: '#fff' },
+    boxChecked: { borderColor: '#198754', backgroundColor: '#198754' },
+    checkColor: '#fff',
+    indeterminateColor: '#fff',
+    label: { color: '#212529' },
+  },
+  danger: {
+    box: { borderColor: '#dc3545', backgroundColor: '#fff' },
+    boxChecked: { borderColor: '#dc3545', backgroundColor: '#dc3545' },
+    checkColor: '#fff',
+    indeterminateColor: '#fff',
+    label: { color: '#212529' },
+  },
+  warning: {
+    box: { borderColor: '#ffc107', backgroundColor: '#fff' },
+    boxChecked: { borderColor: '#ffc107', backgroundColor: '#ffc107' },
+    checkColor: '#212529',
+    indeterminateColor: '#212529',
+    label: { color: '#212529' },
+  },
+  outline: {
+    box: { borderColor: '#6c757d', backgroundColor: 'transparent' },
+    boxChecked: {
+      borderColor: '#6c757d',
+      backgroundColor: 'transparent',
+    },
+    checkColor: '#6c757d',
+    indeterminateColor: '#6c757d',
+    label: { color: '#212529' },
+  },
+};
+
+export const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    width: '100%',
+  },
+  containerLabelLeft: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'flex-end',
+  },
+  containerDisabled: {
+    opacity: 0.55,
+  },
+  box: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  labelBlock: {
+    flex: 1,
+    marginHorizontal: 10,
+  },
+  labelBlockRight: {
+    marginLeft: 10,
+    marginRight: 0,
+  },
+  labelBlockLeft: {
+    marginRight: 10,
+    marginLeft: 0,
+  },
+  label: {
+    fontWeight: '500',
+  },
+  description: {
+    marginTop: 4,
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#6c757d',
+  },
+  errorMessage: {
+    marginTop: 6,
+    fontSize: 12,
+    color: '#dc3545',
+  },
+  boxError: {
+    borderColor: '#dc3545',
+  },
+});

package/src/components/CustomCheckbox/types.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export type CheckboxVariant =
+  'default' | 'primary' | 'success' | 'danger' | 'warning' | 'outline';
+
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+
+export type CheckboxShape = 'square' | 'rounded' | 'circle';
+
+export type CheckboxLabelPosition = 'left' | 'right';
+
+export interface CustomCheckboxProps {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  label?: string;
+  description?: string;
+  children?: ReactNode;
+  variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  shape?: CheckboxShape;
+  labelPosition?: CheckboxLabelPosition;
+  containerStyle?: StyleProp<ViewStyle>;
+  boxStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  descriptionStyle?: StyleProp<TextStyle>;
+  errorStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+}

package/src/components/closeButton/index.tsx

@@ -0,0 +1,40 @@
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
+import type { CloseButtonProps } from './types';
+
+const CloseButton = ({
+  onPress = () => {},
+  imageStyle = {},
+  containerStyle = {},
+  closeImage,
+}: CloseButtonProps) => {
+  const getImage = () => {
+    if (closeImage) {
+      return closeImage;
+    }
+    return require('../../assets/images/close.png');
+  };
+  return (
+    <TouchableOpacity
+      hitSlop={{ top: 20, bottom: 20, right: 20, left: 20 }}
+      activeOpacity={0.5}
+      style={[styles.closeImageContainer, containerStyle]}
+      onPress={onPress}
+    >
+      <Image source={getImage()} style={[styles.closeImage, imageStyle]} />
+    </TouchableOpacity>
+  );
+};
+
+export default CloseButton;
+
+const styles = StyleSheet.create({
+  closeImage: {
+    height: 25,
+    width: 25,
+  },
+  closeImageContainer: {
+    position: 'absolute',
+    top: 15,
+    right: 15,
+  },
+});

package/src/components/closeButton/types.ts

@@ -0,0 +1,13 @@
+import type {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export interface CloseButtonProps {
+  onPress?: () => void;
+  imageStyle?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  closeImage?: ImageSourcePropType;
+}