rn-multi-selected-modal
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published

rn-multi-selected-modal

npm version npm downloads


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



react-native-multi-selected-modal



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

Readme

Keywords

none

Package Sidebar

Install

npm i rn-multi-selected-modal

Weekly Downloads

1

Version

1.3.1

License

MIT

Unpacked Size

49.4 kB

Total Files

31

Last publish

Collaborators

  • neginozn