react-native-bottom-sheet-dropdown 1.0.0

package/README.md

@@ -0,0 +1,335 @@
+# React Native Bottom Sheet Dropdown
+
+A customizable dropdown component with bottom sheet UI for React Native applications. This component provides a smooth, native-feeling dropdown experience with modal presentation.
+
+Demo
+<table>
+  <tr>
+    <td align="center">
+      <img src="./demo/english-demo.gif" alt="English Demo" width="300" />
+      <br />
+      <b>English Version</b>
+    </td>
+    <td align="center">
+      <img src="./demo/arabic-demo.gif" alt="Arabic Demo" width="300" />
+      <br />
+      <b>Arabic Version (RTL Support)</b>
+    </td>
+  </tr>
+</table>
+## Features
+
+- ✅ **Bottom Sheet Modal**: Elegant modal presentation from bottom of screen
+- ✅ **Customizable Styling**: Full control over appearance and styling
+- ✅ **RTL Support**: Right-to-left language support
+- ✅ **TypeScript Support**: Full TypeScript definitions included
+- ✅ **Responsive Design**: Uses responsive screen dimensions
+- ✅ **Smooth Animations**: Built-in animations for modal presentation
+- ✅ **Selected State**: Visual feedback for selected items
+- ✅ **Accessibility**: Proper accessibility support
+
+## Installation
+
+```bash
+npm install react-native-bottom-sheet-dropdown
+```
+
+### Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install react-native-modal react-native-responsive-screen react-native-svg
+```
+
+For iOS, you'll also need to run:
+
+```bash
+cd ios && pod install
+```
+
+## Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { BottomSheetDropdown, DropdownItem } from 'react-native-bottom-sheet-dropdown';
+
+const data: DropdownItem[] = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
+];
+
+const App = () => {
+  const [selectedOption, setSelectedOption] = useState<DropdownItem | undefined>();
+
+  return (
+    <View style={{ padding: 20 }}>
+      <BottomSheetDropdown
+        data={data}
+        onSelect={(item) => setSelectedOption(item)}
+        selectedOption={selectedOption}
+        placeholder="Choose an option"
+        title="Select Item"
+        dropdownModalProps={{
+          dropdownProps: {
+            dropdownTitle: 'Select Option',
+            closeTitle: 'Close'
+          }
+        }}
+      />
+    </View>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+### BottomSheetDropdown Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `DropdownItem[]` | **Required** | Array of dropdown items |
+| `onSelect` | `(item: DropdownItem) => void` | **Required** | Callback when item is selected |
+| `selectedOption` | `DropdownItem` | `undefined` | Currently selected item |
+| `placeholder` | `string` | `"Select an option"` | Placeholder text |
+| `title` | `string` | `""` | Title displayed above dropdown |
+| `rtl` | `boolean` | `false` | Right-to-left layout support |
+| `selectedValue` | `string \| number` | `undefined` | Alternative way to set selected value |
+| `style` | `ViewStyle` | `undefined` | Container style |
+| `dropdownStyle` | `ViewStyle` | `undefined` | Dropdown button style |
+| `mainDropdownInput` | `ViewStyle` | `undefined` | Main dropdown input style |
+| `titleStyle` | `TextStyle` | `undefined` | Title text style |
+| `selectedValueStyle` | `TextStyle` | `undefined` | Selected value text style |
+| `placeholderStyle` | `TextStyle` | `undefined` | Placeholder text style |
+| `dropdownModalProps` | `DropdownModalProps` | **Required** | Modal configuration |
+
+### DropdownItem
+
+```tsx
+interface DropdownItem {
+  label: string;
+  value: string;
+}
+```
+
+### DropdownModalProps
+
+```tsx
+interface DropdownModalProps {
+  dropdownProps?: {
+    dropdownTitle: string;
+    closeTitle: string;
+  };
+  dropdownStyles?: {
+    dropdownTitleStyle?: TextStyle;
+    closeTitleStyle?: TextStyle;
+    optionValueText?: TextStyle;
+    selectedOptionText?: TextStyle;
+    optionContainerStyle?: ViewStyle;
+  };
+}
+```
+
+## Advanced Usage
+
+### Custom Styling
+
+```tsx
+<BottomSheetDropdown
+  data={data}
+  onSelect={handleSelect}
+  selectedOption={selectedOption}
+  placeholder="Custom placeholder"
+  title="Custom Title"
+  titleStyle={{
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333'
+  }}
+  mainDropdownInput={{
+    backgroundColor: '#f5f5f5',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#ddd'
+  }}
+  selectedValueStyle={{
+    color: '#007AFF',
+    fontWeight: '600'
+  }}
+  placeholderStyle={{
+    color: '#999',
+    fontStyle: 'italic'
+  }}
+  dropdownModalProps={{
+    dropdownProps: {
+      dropdownTitle: 'Choose Option',
+      closeTitle: 'Cancel'
+    },
+    dropdownStyles: {
+      dropdownTitleStyle: {
+        fontSize: 18,
+        fontWeight: 'bold'
+      },
+      closeTitleStyle: {
+        color: '#007AFF',
+        fontSize: 16
+      },
+      optionValueText: {
+        fontSize: 16,
+        color: '#333'
+      },
+      selectedOptionText: {
+        color: '#007AFF',
+        fontWeight: '600'
+      },
+      optionContainerStyle: {
+        paddingVertical: 12
+      }
+    }
+  }}
+/>
+```
+
+### RTL Support
+
+```tsx
+<BottomSheetDropdown
+  data={data}
+  onSelect={handleSelect}
+  selectedOption={selectedOption}
+  rtl={true}
+  placeholder="اختر خيار"
+  title="العنوان"
+  dropdownModalProps={{
+    dropdownProps: {
+      dropdownTitle: 'اختر خيار',
+      closeTitle: 'إغلاق'
+    }
+  }}
+/>
+```
+
+### Using with Form Libraries
+
+```tsx
+import { useFormContext, Controller } from 'react-hook-form';
+
+const FormDropdown = () => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name="selectedOption"
+      render={({ field: { onChange, value } }) => (
+        <BottomSheetDropdown
+          data={data}
+          onSelect={onChange}
+          selectedOption={value}
+          placeholder="Select option"
+          dropdownModalProps={{
+            dropdownProps: {
+              dropdownTitle: 'Select Option',
+              closeTitle: 'Close'
+            }
+          }}
+        />
+      )}
+    />
+  );
+};
+```
+
+## Exports
+
+The package exports the following components and utilities:
+
+```tsx
+import {
+  BottomSheetDropdown,        // Main component
+  DownIcon,                   // Dropdown arrow icon
+  TickIcon,                   // Selected item icon
+  hp,                         // Height percentage utility
+  wp,                         // Width percentage utility
+  DropdownDefaults,           // Default values
+  
+  // TypeScript types
+  DropdownItem,
+  DropdownProps,
+  DropdownModalProps,
+  DropdownDataProps,
+  DropdownModalStyles
+} from 'react-native-bottom-sheet-dropdown';
+```
+
+## Default Values
+
+```tsx
+const DropdownDefaults = {
+  placeholder: 'Select an option',
+  title: '',
+  rtl: false,
+  dropdownProps: {
+    dropdownTitle: 'Select Option',
+    closeTitle: 'Close'
+  }
+};
+```
+
+## Responsive Design
+
+The component uses responsive dimensions based on screen size:
+- `hp(percentage)` - Height percentage of screen
+- `wp(percentage)` - Width percentage of screen
+
+These utilities are also exported for use in your custom styling.
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## Requirements
+
+- React Native >= 0.60.0
+- React >= 16.8.0
+- TypeScript >= 4.9.0 (for TypeScript projects)
+
+## License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Modal not appearing**: Ensure you have `react-native-modal` installed and linked properly
+2. **Icons not showing**: Make sure `react-native-svg` is properly installed and configured
+3. **TypeScript errors**: Ensure you have the latest version with proper type definitions
+
+### Platform-specific Setup
+
+**iOS**: Run `cd ios && pod install` after installation
+
+**Android**: The package should work out of the box with autolinking
+
+## Changelog
+
+### v1.0.0
+- Initial release
+- Bottom sheet modal dropdown
+- TypeScript support
+- RTL support
+- Customizable styling
+- Responsive design
+
+---
+
+**Made with ❤️ for React Native developers**

package/lib/BottomSheetDropdown.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { DropdownProps } from "./types";
+declare const BottomSheetDropdown: React.FC<DropdownProps>;
+export default BottomSheetDropdown;

package/lib/BottomSheetDropdown.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const index_1 = require("./utils/index");
+const DownIcon_1 = __importDefault(require("./icons/DownIcon"));
+const DropdownModal_1 = __importDefault(require("./DropdownModal"));
+const BottomSheetDropdown = ({ data, onSelect, rtl, title = "", placeholder = "Select an option", selectedValue, selectedValueStyle, placeholderStyle, mainDropdownInput, titleStyle, dropdownModalProps, selectedOption, }) => {
+    const [showModal, setShowModal] = React.useState(false);
+    const toggleDropdownModal = React.useCallback(() => {
+        setShowModal(!showModal);
+    }, [showModal]);
+    const styles = react_native_1.StyleSheet.create({
+        mainContainer: {},
+        dropdownContainer: Object.assign({ width: "100%", height: (0, index_1.hp)(5.5), backgroundColor: "#ffffff", borderRadius: (0, index_1.wp)(2), marginTop: (0, index_1.hp)(1), borderWidth: 1, borderColor: "#CFCFCF", flexDirection: rtl ? "row-reverse" : "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: (0, index_1.wp)(4), paddingVertical: (0, index_1.hp)(1) }, mainDropdownInput),
+        title: Object.assign({ fontSize: 16, color: "#0D0D0D", textAlign: rtl ? "right" : "left" }, titleStyle),
+        selectedValue: Object.assign({ fontSize: 16, color: "#0D0D0D", textAlign: rtl ? "right" : "left" }, selectedValueStyle),
+        placeholderValue: Object.assign({ fontSize: 16, color: "#A0A0A0", textAlign: rtl ? "right" : "left" }, placeholderStyle),
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownModal_1.default, { visible: showModal, onClose: toggleDropdownModal, data: data, onSelect: onSelect, selectedOption: selectedOption, rtl: rtl, dropdownModalProps: Object.assign({}, dropdownModalProps) }),
+        React.createElement(react_native_1.View, { style: styles.mainContainer },
+            React.createElement(react_native_1.Text, { style: styles.title }, title),
+            React.createElement(react_native_1.Pressable, { style: styles.dropdownContainer, onPress: toggleDropdownModal },
+                selectedOption ? (React.createElement(react_native_1.Text, { style: styles.selectedValue }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)) : (React.createElement(react_native_1.Text, { style: styles.placeholderValue }, placeholder)),
+                React.createElement(DownIcon_1.default, null)))));
+};
+exports.default = BottomSheetDropdown;

package/lib/DropdownModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownModalProps } from "./types";
+declare const DropdownModal: React.FC<DropdownModalProps>;
+export default DropdownModal;

package/lib/DropdownModal.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const utils_1 = require("./utils");
+const react_native_modal_1 = __importDefault(require("react-native-modal"));
+const TickIcon_1 = __importDefault(require("./icons/TickIcon"));
+const DropdownModal = ({ data, visible, onClose, onSelect, dropdownModalProps, selectedOption, rtl, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const styles = react_native_1.StyleSheet.create({
+        modalContainer: {
+            justifyContent: "flex-start",
+            alignItems: "center",
+            height: (0, utils_1.hp)(40),
+            width: "100%",
+            borderTopLeftRadius: (0, utils_1.wp)(2),
+            borderTopRightRadius: (0, utils_1.wp)(2),
+            paddingHorizontal: (0, utils_1.wp)(4),
+            paddingVertical: (0, utils_1.hp)(2),
+            backgroundColor: "#fff",
+        },
+        dash: {
+            width: (0, utils_1.wp)(10),
+            height: (0, utils_1.hp)(0.5),
+            backgroundColor: "rgba(60, 60, 67, 0.3)",
+            borderRadius: (0, utils_1.wp)(2),
+            alignSelf: "center",
+            marginBottom: (0, utils_1.hp)(2),
+        },
+        row: {
+            width: "100%",
+            flexDirection: rtl ? "row-reverse" : "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+        },
+        dropdownTitle: Object.assign({ fontSize: 16 }, (_a = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _a === void 0 ? void 0 : _a.dropdownTitleStyle),
+        close: Object.assign({ fontSize: 16, color: "blue" }, (_b = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _b === void 0 ? void 0 : _b.closeTitleStyle),
+        leftSpacer: {
+            width: (0, utils_1.wp)(10),
+        },
+        optionContainer: Object.assign({ width: "100%", height: (0, utils_1.hp)(6), justifyContent: "space-between", borderBottomWidth: 1, borderBottomColor: "rgba(60, 60, 67, 0.3)", flexDirection: rtl ? "row-reverse" : "row", alignItems: "center" }, (_c = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _c === void 0 ? void 0 : _c.optionContainerStyle),
+        optionValueText: Object.assign({ fontSize: 14, textAlign: "left" }, (_d = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _d === void 0 ? void 0 : _d.optionValueText),
+        scrollView: {
+            width: "100%",
+        },
+        selectedValueText: Object.assign({ color: "#007AFF" }, (_e = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _e === void 0 ? void 0 : _e.selectedOptionText),
+    });
+    return (react_1.default.createElement(react_native_modal_1.default, { isVisible: visible, onBackdropPress: onClose, style: { justifyContent: "flex-end", margin: 0 } },
+        react_1.default.createElement(react_native_1.View, { style: styles.modalContainer },
+            react_1.default.createElement(react_native_1.View, { style: styles.dash }),
+            react_1.default.createElement(react_native_1.View, { style: styles.row },
+                react_1.default.createElement(react_native_1.View, { style: styles.leftSpacer }),
+                react_1.default.createElement(react_native_1.Text, { style: styles.dropdownTitle }, (_f = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownProps) === null || _f === void 0 ? void 0 : _f.dropdownTitle),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: onClose },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.close }, (_g = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownProps) === null || _g === void 0 ? void 0 : _g.closeTitle))),
+            react_1.default.createElement(react_native_1.ScrollView, { style: styles.scrollView, showsVerticalScrollIndicator: false }, data.map((item) => {
+                var _a, _b;
+                const isSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === item.value;
+                return (react_1.default.createElement(react_native_1.Pressable, { key: item.value, style: styles.optionContainer, onPress: () => {
+                        onSelect(item);
+                        onClose();
+                    } },
+                    react_1.default.createElement(react_native_1.Text, { style: [
+                            styles.optionValueText,
+                            isSelected && styles.selectedValueText,
+                        ] }, item.label),
+                    isSelected && (react_1.default.createElement(TickIcon_1.default, { color: ((_b = (_a = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _a === void 0 ? void 0 : _a.selectedOptionText) === null || _b === void 0 ? void 0 : _b.color) || "#007AFF" }))));
+            })))));
+};
+exports.default = DropdownModal;

package/lib/icons/DownIcon.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function DownIcon({ color, }: {
+    color?: string;
+}): React.JSX.Element;
+export default DownIcon;

package/lib/icons/DownIcon.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = require("react-native-svg");
+function DownIcon({ color = "#0D0D0D", }) {
+    return (react_1.default.createElement(react_native_svg_1.Svg, { width: "18", height: "9", viewBox: "0 0 18 9", fill: "none" },
+        react_1.default.createElement(react_native_svg_1.Path, { d: "M16.9201 0.950195L10.4001 7.4702C9.63008 8.2402 8.37008 8.2402 7.60008 7.4702L1.08008 0.950195", stroke: color, strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+}
+exports.DownIcon = DownIcon;
+exports.default = DownIcon;

package/lib/icons/TickIcon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ColorValue } from "react-native";
+export declare function TickIcon({ color }: {
+    color?: ColorValue;
+}): React.JSX.Element;
+export default TickIcon;

package/lib/icons/TickIcon.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TickIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = require("react-native-svg");
+function TickIcon({ color = "#215A47" }) {
+    return (react_1.default.createElement(react_native_svg_1.Svg, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+        react_1.default.createElement(react_native_svg_1.Path, { d: "M3 12L8.99294 18L21 6", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+}
+exports.TickIcon = TickIcon;
+exports.default = TickIcon;

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+export { default as BottomSheetDropdown } from './BottomSheetDropdown';
+export { default } from './BottomSheetDropdown';
+export type { DropdownItem, DropdownProps, DropdownModalProps, DropdownDataProps, DropdownModalStyles } from './types';
+export declare const DropdownDefaults: {
+    readonly placeholder: "Select an option";
+    readonly title: "";
+    readonly rtl: false;
+    readonly dropdownProps: {
+        readonly dropdownTitle: "Select Option";
+        readonly closeTitle: "Close";
+    };
+};

package/lib/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownDefaults = exports.default = exports.BottomSheetDropdown = void 0;
+// Main entry point for react-native-bottom-sheet-dropdown library
+var BottomSheetDropdown_1 = require("./BottomSheetDropdown");
+Object.defineProperty(exports, "BottomSheetDropdown", { enumerable: true, get: function () { return __importDefault(BottomSheetDropdown_1).default; } });
+var BottomSheetDropdown_2 = require("./BottomSheetDropdown");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BottomSheetDropdown_2).default; } });
+// Default values that match the component implementation
+exports.DropdownDefaults = {
+    placeholder: 'Select an option',
+    title: '',
+    rtl: false,
+    dropdownProps: {
+        dropdownTitle: 'Select Option',
+        closeTitle: 'Close'
+    }
+};

package/lib/types.d.ts

@@ -0,0 +1,52 @@
+import { ViewStyle, TextStyle } from "react-native";
+export interface DropdownItem {
+    label: string;
+    value: string;
+}
+export interface DropdownProps {
+    data: DropdownItem[];
+    onSelect: (item: DropdownItem) => void;
+    selectedOption?: DropdownItem;
+    placeholder?: string;
+    selectedValue?: string | number;
+    style?: ViewStyle;
+    dropdownStyle?: ViewStyle;
+    mainDropdownInput?: ViewStyle;
+    disabled?: boolean;
+    searchable?: boolean;
+    maxHeight?: number;
+    headerTitle?: string;
+    showHeader?: boolean;
+    rtl?: boolean;
+    title?: string;
+    titleStyle?: TextStyle;
+    selectedValueStyle?: TextStyle;
+    placeholderStyle?: TextStyle;
+    dropdownModalProps: {
+        dropdownProps?: DropdownDataProps;
+        dropdownStyles?: DropdownModalStyles;
+    };
+}
+export interface DropdownModalProps {
+    visible: boolean;
+    onClose: () => void;
+    data: DropdownItem[];
+    onSelect: (item: DropdownItem) => void;
+    selectedOption?: DropdownItem;
+    dropdownModalProps: {
+        dropdownProps?: DropdownDataProps;
+        dropdownStyles?: DropdownModalStyles;
+    };
+    rtl?: boolean;
+}
+export interface DropdownDataProps {
+    dropdownTitle: string;
+    closeTitle: string;
+}
+export interface DropdownModalStyles {
+    dropdownTitleStyle?: TextStyle;
+    closeTitleStyle?: TextStyle;
+    optionValueText?: TextStyle;
+    selectedOptionText?: TextStyle;
+    optionContainerStyle?: ViewStyle;
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export { heightPercentageToDP as hp, widthPercentageToDP as wp, } from "react-native-responsive-screen";

package/lib/utils/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wp = exports.hp = void 0;
+var react_native_responsive_screen_1 = require("react-native-responsive-screen");
+Object.defineProperty(exports, "hp", { enumerable: true, get: function () { return react_native_responsive_screen_1.heightPercentageToDP; } });
+Object.defineProperty(exports, "wp", { enumerable: true, get: function () { return react_native_responsive_screen_1.widthPercentageToDP; } });

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "react-native-bottom-sheet-dropdown",
+  "version": "1.0.0",
+  "description": "A dropdown component with bottom sheet UI for React Native",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "test": "jest",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "keywords": [
+    "react-native",
+    "dropdown",
+    "bottom-sheet",
+    "modal",
+    "picker",
+    "component",
+    "typescript"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moustafahelmi96/react-native-bottom-sheet-dropdown"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.0.0",
+    "jest": "^29.0.0",
+    "typescript": "^4.9.0"
+  },
+  "files": [
+    "lib/",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "react-native-modal": "^14.0.0-rc.1",
+    "react-native-responsive-screen": "^1.4.2",
+    "react-native-svg": "^15.12.0"
+  }
+}