React Native Custom Modal

A simple and customizable modal component for React Native applications. Easily integrate modals into your app with minimal setup.

Features

Data Filtering and Automatic Selection Closure

The Modals component includes a powerful data filtering feature that allows users to search through the provided data array. As users type into the search input, the modal dynamically filters the list of items based on their input.

When a user selects an item from the filtered list, the modal automatically closes, streamlining the user experience. This behavior ensures that users can quickly make selections without any additional steps, enhancing the overall usability of the modal.

How It Works:

Search Functionality: As the user types in the search input, the modal filters the displayed items in real-time based on the user's input.

Automatic Closure: Once a user selects an item from the filtered results, the modal closes automatically, saving time and reducing the number of clicks required.

Callback Integration: The selected item is passed back to the parent component through the onSelectItem callback, allowing for easy handling of the selected value.

This feature is particularly useful for applications with large datasets, as it helps users find and select items quickly and efficiently.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing
• License

Installation

You can install the package via npm or yarn:

npm i react-native-closeable-modal

Usage

Import the Modals component into your React Native application and use it as shown below:

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import Modals from 'react-native-closeable-modal';

const App = () => {
  const [isShow, setIsShow] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const data = [
    { id: 1, name: 'First Item' },
    { id: 2, name: 'Second Item' },
  ];

  const handleSelectItem = (item) => {
    setSelectedItem(item);
  };

  return (
    <View>
      <Button title="Open Modal" onPress={() => setIsShow(true)} />
      <Text>Selected Item: {selectedItem ? selectedItem.name : 'None'}</Text>
      <Modals
        data={data}
        title={'Modal Name'}
        show={isShow}
        setShow={setIsShow}
        onSelectItem={handleSelectItem}
      />
    </View>
  );
};

export default App;

Props

| Prop | Type | Description | |--------------|----------|--------------------------------------------------------------------| | data | Array | An array of data to be displayed in the modal. | | title | String | The title of the modal. | | show | Boolean | Controls the visibility of the modal. | | setShow | Function | A function to update the show state, typically a state setter. | | onSelectItem | Function | A callback function that is called when an item is selected. |

Example

Here’s a simple example of how to use the Modals component:

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import Modals from 'react-native-closeable-modal';

const App = () => {
  const [isShow, setIsShow] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const data = [
    { id: 1, name: 'First Item' },
    { id: 2, name: 'Second Item' },
  ];

  const handleSelectItem = (item) => {
    setSelectedItem(item);
  };

  return (
    <View>
      <Button title="Open Modal" onPress={() => setIsShow(true)} />
      <Text>Selected Item: {selectedItem ? selectedItem.name : 'None'}</Text>
      <Modals
        data={data}
        title={'Select an Item'}
        show={isShow}
        setShow={setIsShow}
        onSelectItem={handleSelectItem}
      />
    </View>
  );
};

export default App;