react-native-select-options-search

Effortlessly manage large datasets and enable seamless search functionality for option selection in React Native applications. With features inspired by web lazy-loading, this package is perfect for handling extensive options efficiently.

Features

• 🌟 Optimized for Large Datasets: Smoothly handle expensive options selection with lazy-loading.
• 🔍 Search Functionality: Quickly search and filter options for better user experience.
• ⚡ Lightweight: Minimal impact on performance while handling heavy data.
• 🖼️ Designed for Mobile: Built specifically for React Native to ensure responsiveness.

Installation

Install the package via npm:

npm install react-native-select-options-search

Usage

Here’s an example to get you started:

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { Styles } from '../utils/styles';
import SelectOption from 'react-native-select-options-search/SelectOption';

const Playground = () => {
  const [selectedFruit, setSelectedValue] = useState(null);

  return (
    <View style={{ padding: '5%' }}>
      <View style={{ marginVertical: '10%' }}>
        <Text style={Styles.headerTitleDark}>React-Native-select-options-search</Text>
        <Text style={Styles.commonTitleDark}>@demo by #structlooper</Text>
      </View>
      
      <SelectOption
        placeHolder={"Select fruit"}
        listItems={[
          { id: 1, name: 'apple' },
          { id: 2, name: 'mango' },
          { id: 3, name: 'banana' },
          { id: 4, name: 'orange' },
          { id: 5, name: 'grape' },
          { id: 6, name: 'kiwi' },
          { id: 7, name: 'pear' },
          { id: 8, name: 'peach' },
          { id: 9, name: 'pineapple' },
          { id: 10, name: 'strawberry' }
        ]}
        selectedValueState={{ state: selectedFruit, setState: setSelectedValue }}
      />
    </View>
  );
};

export default Playground;

Dependencies

• React: Peer dependency required to integrate seamlessly with React Native.
• React Native: Ensure your project is using React Native as this package is tailored for it.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.

Contact

For support, feedback, or contributions, reach out via GitHub: structlooper.