grk-react-native-custom-dropdown
v1.0.4
Published
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.
Downloads
16
Readme
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
- Easy to use
- Consistent look and feel on iOS and Android
- Customizable font size, colors and animation duration
- 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.