easy-select-rn v1.3.1

React Native Easy Select

React Native Easy Select is a customizable and easy-to-use picker component for React Native. It allows you to create a selector with a bottom sheet modal, providing a smooth user experience for selecting options.

Installation

Install the package using npm or yarn:

npm install easy-select-rn

or

yarn add easy-select-rn

Usage

Import the `Picker` component from `easy-select-rn` and use it in your React Native application:

import React, { useState } from 'react';

import { View, Text } from 'react-native';

import { Picker } from 'easy-select-rn';

const MyComponent = () => {
  const [selectedValue, setSelectedValue] = useState('');

  const data = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  return (
    <View>
      <Text>Select an option:</Text>
      <Picker
        data={data}
        label="Select an option"
        value={selectedValue}
        onValueChange={(value) => setSelectedValue(value)}
      />
      <Text>Selected Value: {selectedValue}</Text>
    </View>
  );
};

Props

The `Picker` component accepts the following props:

MultiSelectPicker

A React component that displays a multiple selection list with a filterable text field.

Usage

import { MultiSelectPicker } from 'package-name';

const data = [
  { key: '1', labelData: 'Option 1' },
  { key: '2', labelData: 'Option 2' },
  // ... more data
];

const App = () => {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleValuesChange = (values) => {
    setSelectedValues(values);
  };

  return (
    <MultiSelectPicker
      loading={false}
      error={null}
      placeholder="Type to filter..."
      label="Select options"
      data={data}
      values={selectedValues}
      keyData="key"
      labelData="labelData"
      onValuesChange={handleValuesChange}
    />
  );
};

Props

License

MIT License. See the LICENSE file for more information.