rn-multi-selected-modal

A modal to select multi items from a list of data for React native. Platform Android/ios.

Getting started

Installation

Install the package in your React Native project:

yarn add rn-multi-selected-modal

OR

npm install rn-multi-selected-modal

Installing dependencies

Install the package we need as a dependency

yarn add react-native-svg

OR

npm install react-native-svg

Link native code

If yoy want yo use it for ios platform

cd ios && pod install

Usage

import React, { useState } from 'react'
import {  Text, SafeAreaView, Pressable, StyleSheet } from 'react-native'
import {MultiSelected} from 'rn-multi-selected-modal';

const App = () => {

    interface List {
        id: string,
        title: string,
    }

    const [modalVisible, setModalVisible] = useState(false)

    const data = [
        { id: 1, title: "John Smith" },
        { id: 2, title: "Jane Doe" },
        { id: 3, title: "Adam Johnson" },
        { id: 4, title: "Emily Davis" },
        { id: 5, title: "Michael Wilson" }
    ]

    const [selectedItems, setSelectedItems] = useState<List[]>([])

    const onSelectHandler = (item: any) => {

        if (selectedItems.some((i) => i.id === item.id)) {
            let newSelectedItems = [...selectedItems]
            const index = selectedItems.findIndex((i) => i.id === item.id)
            if (index > -1) {
                newSelectedItems.splice(index, 1)
                setSelectedItems(newSelectedItems)
            }

        } else {
            setSelectedItems([...selectedItems, item])
        }
    }

    return (
        <SafeAreaView>
            <Pressable
                onPress={() => setModalVisible(true)}>
                <Text style={styles.textStyle}>Show Modal</Text>
            </Pressable>
            <MultiSelected
                data={data}
                modalVisible={modalVisible}
                selectedItems={selectedItems}
                onChangeSelect={onSelectHandler}
                onClose={() => setModalVisible(false)}
            />
        </SafeAreaView>
    )
}

Properties

We have the props as following for customizing and pass data:

Required

| Prop | Description | Default | | -------------------- | -------------------------------------------------------------------------------------------------------- | ----------- | | data | List of data with an id:string or number & title:string. | Empty Array | | onClose | A function that make the modal visible false | None | | modalVisible | Value that shows the visibility of modal. | false | | selectedItems | List of items that are selected. | Empty Array | | onChangeSelect | A function that describe what you want to do on selecting an item (we retuen the selected item for you). | None |

Optional

| Prop | Description | Default | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | modalStyle | The style of Modal View | View style | | checkBoxColor | The color of checkbox when the item is selected. It should be a string value | "#5850EC" | | listEmptyTitle | The title that is shown when we don't have any result of searching or the data is empty. It should be a string value. | No Item match! | | itemTitleStyle | Style of the item's title. | Text style | | confirmBtnTitle | The title of button that close the modal. It should be a string value | Confirm | | confirmBtnStyle | Style of the confirm button | View style | | confirmTxtStyle | Style of the confirm button title. | Text style | | searchPlaceHolder | The text as a placeholder in search input. It should be a string value | Search by name | | listEmptyTitleStyle | The style of list empty title. | Text style | | checkBoxContainerStyle | Style of the check boxes | View style | | checkBoxSelectedIcon | The Icon in the check box when it is selected | React Node | | checkBoxNotSelectedIcon | The Icon in the check box when it is not selected | React Node |