Skip to content

Bur0/react-native-actions-sheet-picker

Repository files navigation

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

or

npm install react-native-actions-sheet-picker

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
renderListItem function Render List item

Method

Properties Type Description
onOpen function SheetManager show
onClose function SheetManager hide

Core Props of using packages

Properties Type Description
actionsSheetProps object react-native-actions-sheet
flatListProps object FlatListProps
searchInputProps object TextInputProps

Roadmap

  • Multiple select
  • Issue 3 (#3)
  • Issue 4 (#4)
  • renderListItem | props
  • Selected highlight

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT