react-native-smooth-drop-down

A simple and smooth dropdown component for React Native, designed to provide a user-friendly experience with customizable options.

Features

• Smooth dropdown animations using react-native-reanimated
• Customizable styles for dropdown and its items
• Easy integration with React Native projects
• Supports flexible data formats for dropdown options

Installation

To install this package, use npm or yarn:

Using npm:

npm install react-native-smooth-drop-down

yarn add react-native-smooth-drop-down


--Peer Dependencies:
Ensure you have react-native-reanimated installed in your project as it is required for animations. 

-- npm install react-native-reanimated



** ==================================================USAGE=========================================================================

import React, { useState } from 'react';
import { View } from 'react-native';
import DropDown from 'react-native-muneeb-wali-khan-smooth-drop-down';

const App = () => {
  const [selectedValue, setSelectedValue] = useState(null);

  const data = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <DropDown
        items={data}
        onSelect={item => setSelectedValue(item.value)}
        placeholder="Select an option"
        selectedValue={selectedValue}
      />
    </View>
  );
};

export default App;

** ====================================================================Props==================================================

**Props

| Prop              | Type   | Description                                             | Default                   |
|-------------------|--------|---------------------------------------------------------|---------------------------|
| `items`           | array  | An array of objects representing dropdown items         | `[]`                      |
| `onSelect`        | func   | Callback function when an item is selected             | `() => {}` (no-op function) |
| `placeholder`     | string | Placeholder text shown when no item is selected        | `"Select an option"`      |
| `selectedValue`   | any    | The currently selected value                            | `null`                    |
| `dropdownStyle`   | object | Custom styles for the dropdown container                | `{}`                      |
| `placeholderStyle`| object | Custom styles for the placeholder text                  | `{}`                      |
| `itemStyle`       | object | Custom styles for individual items                      | `{}`                      |
| `itemTextStyle`   | object | Custom styles for item text                             | `{}`                      |
| `maxHeight`       | number | Maximum height for the dropdown menu (scrollable)      | `200`                     |


** ===============================================================Customizations===============================================


<DropDown
  items={data}
  onSelect={item => setSelectedValue(item.value)}
  placeholder="Choose an option"
  selectedValue={selectedValue}
  dropdownStyle={{ backgroundColor: '#f0f0f0' }}
  placeholderStyle={{ color: '#333' }}
  itemStyle={{ padding: 10, backgroundColor: '#e0e0e0' }}
  itemTextStyle={{ fontSize: 16, color: '#000' }}
  maxHeight = {200}
/>



**License:

This package is licensed under the MIT License. See the LICENSE file for more information.



**Author:

Created by Muneeb Wali Khan.