React Native Actions Sheet Picker

Last update: May 11, 2022

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

Install Dependencies

Please, install dependencies for using this package.

yarn add react-native-actions-sheet
yarn add react-native-gesture-handler

Usage

); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', }, button: { backgroundColor: '#8B93A5', padding: 10, borderRadius: 6, marginTop: 50, }, }); ">
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
actionsShetProps object react-native-actions-sheet
flatListProps object FlatListProps
searchInputProps object TextInputProps

Roadmap

  • Multiple select
  • renderListItem | props
  • Selected highlight

Contributing

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

License

MIT

GitHub

https://github.com/Bur0/react-native-actions-sheet-picker
You might also like...

An unified React Native Picker Modal component for iOS and Android.

An unified React Native Picker Modal component for iOS and Android.

React Native Picker Modal View React Native Module to select item picker modal. Created by Pankod An alternative to Picker and PickerIOS components wi

May 10, 2022

A react-native dropdown/picker/selector component for both Android & iOS.

A react-native dropdown/picker/selector component for both Android & iOS.

react-native-modal-dropdown A react-native dropdown/picker/selector component for both Android & iOS. Features Pure JS. Compatible with both iOS and A

May 8, 2022

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

May 8, 2022

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Apr 11, 2022

React Native Wrapper of Google Place Picker for iOS + Android.

React Native Wrapper of Google Place Picker for iOS + Android.

react-native-google-place-picker React Native Wrapper of Google Place Picker for iOS + Android. iOS Android Table of contents Install iOS Android Usag

May 9, 2022

Simple emoji picker for react-native

Simple emoji picker for react-native

Emoji picker for react-native Powered by the awesome emoji-datasource Installation npm install react-native-emoji-picker EmojiPicker component const E

Nov 19, 2021

react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

Aug 3, 2021

:rainbow: A react native reusable and color picker wheel

:rainbow: A react native reusable and color picker wheel

react-native-color-wheel 🎨 A react native reusable and color picker wheel Usage import React, { Component } from 'react'; import { Dimensions, StyleS

Apr 23, 2022

This project has been deprecated, move to https://github.com/beefe/react-native-picker

This project has been deprecated, move to https://github.com/beefe/react-native-picker

This project has been deprecated, move to https://github.com/beefe/react-native-picker react-native-picker-android PickerAndroid has PickerIOS interfa

Jun 25, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Nov 13, 2021
React Native: Native Bottom Action Sheet
React Native: Native Bottom Action Sheet

ReactNative: Native Bottom Action Sheet (Android/iOS) If this project has helped you out, please support us with a star ?? A simple library that crea

May 15, 2022
A performant customizable bottom sheet component made on top of wix react-native-navigation library.
A performant customizable bottom sheet component made on top of wix react-native-navigation library.

?? React Native Navigation Bottom Sheet Extension A performant customizable bottom sheet component made on top of wix react-native-navigation library.

Mar 11, 2022
react-native-wheel-picker ★190 - React native cross platform picker.
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

May 7, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

May 8, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

May 5, 2022
🗺 A simple react-native library to perform cross-platform map actions (Google or Apple Maps)
🗺  A simple react-native library to perform cross-platform map actions (Google or Apple Maps)

react-native-open-maps ?? A simple cross-platform library to help perform map actions to the corresponding device's map (Google or Apple Maps) react-n

May 2, 2022
react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.

react-native-select-dropdown react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for and

May 11, 2022
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

May 8, 2022