rn-multi-selected-modal v1.3.1

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

Optional