7
A React Native component that provides a filterable select dropdown/picker
source link: https://reactnativeexample.com/a-react-native-component-that-provides-a-filterable-select-dropdown-picker/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native Actions Sheet Picker
A React Native component that provides a filterable select dropdown/picker.
Preview
Installation Guide
yarn add react-native-actions-sheet-picker
npm install react-native-actions-sheet-picker
Install Dependencies
Please, install dependencies for using this package.
yarn add react-native-actions-sheet
yarn add react-native-gesture-handler
Usage
import React, { useState, useMemo, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, SafeAreaView } from 'react-native';
import { Picker, onOpen } from 'react-native-actions-sheet-picker';
/*
**Example data:
*/
import countries from './countries.json';
export default function App() {
const [data, setData] = useState([]);
const [selected, setSelected] = useState(undefined);
const [query, setQuery] = useState('');
useEffect(() => {
setData(countries);
}, []);
/*
**Example filter function
* @param {string} filter
*/
const filteredData = useMemo(() => {
if (data && data.length > 0) {
return data.filter((item) =>
item.name
.toLocaleLowerCase('en')
.includes(query.toLocaleLowerCase('en'))
);
}
}, [data, query]);
/*
**Input search
*@param {string} text
*/
const onSearch = (text) => {
setQuery(text);
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={() => {
onOpen('country');
}}
>
<Text>Open ActionSheet</Text>
</TouchableOpacity>
<Text style={{ padding: 10 }}>Chosen : {JSON.stringify(selected)}</Text>
<Picker
id="country"
data={filteredData}
inputValue={query}
searchable={true}
label="Select Country"
setSelected={setSelected}
onSearch={onSearch}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
button: {
backgroundColor: '#8B93A5',
padding: 10,
borderRadius: 6,
marginTop: 50,
},
});
Options
Properties | Type | Description | Default |
---|---|---|---|
id *required | string |
A unique id for the ActionSheet | |
data | array |
Array of list items | [] |
inputValue | string |
The value to show for the text input. | |
searchable | boolean |
Searchable state | false |
loading | boolean |
Loading state | false |
label | string |
Flatlist label | |
height | string |
ActionSheet height | Dimensions.get('window').height * 0.5 |
closeText | string |
Close text | "Close" |
placeholderText | string |
Placeholder text | "Search" |
noDataFoundText | string |
No data found text | "No Data Found." |
placeholderTextColor | string |
Placeholder text color | #8B93A5 |
setSelected | function |
Selected function | |
onSearch | function |
Textinput search function |
Core Props of using packages
Properties | Type | Description |
---|---|---|
actionsShetProps | object |
react-native-actions-sheet |
flatListProps | object |
FlatListProps |
searchInputProps | object |
TextInputProps |
Roadmap
- Multiple select
- renderListItem | props
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK