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