React Native Custom Dropdown

This is a React Native Dropdown package. The dropdown is fully customizable, you can customize the dropdown component by passing style objects for dropdownStyle, itemStyle, and selectedItemStyle props.

Installation

npm install grk-react-native-custom-dropdown
or
yarn add react-native-custom-dropdown

Features

1. Easy to use
2. Consistent look and feel on iOS and Android
3. Customizable font size, colors and animation duration
4. Implemented with typescript

Props

Usage

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import Dropdown from 'grk-react-native-custom-dropdown';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState<string | null>(null);

  const options = [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2' },
    { label: 'Item 3', value: 'item3' },
  ];

  const handleArrowPress = () => {
    setIsOpen(!isOpen);
  };

  const handleItemSelect = (item: { label: string, value: string }) => {
    setSelectedItem(item.value);
    setIsOpen(false);
  };

  return (
    <View style={styles.container}>
    <Dropdown
        isOpen={isOpen}
        onArrowPress={handleArrowPress}
        options={options}
        selectedItem={(item)=>{
            setSelectedItem(item)
        }}
        dropDownStyle={Styles.dropDown}
        itemStyle={Styles.item}
        itemTextStyle={Styles.itemText}
        dropDownTouchable={Styles.dropDownTouchable}
        />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dropDown: {
    width: 200,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
  },
  item: {
    padding: 10,
  },
  itemText: {
    color: '#333',
  },
  dropDownTouchable: {
    padding: 10,
    backgroundColor: '#ffffff',
  },
});

export default App;

Contributing

If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.