GeekyAnts / GeekyAnts/NativeBase

Support for Multi Select component.

Open
#5,577 3 comments 1 reaction 0 assignees View on GitHub
feature request triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Its a little frustrating that native base doesn't have a component like `Select` but that supports selection of multiple elements.

### Problem Statement

i have sort other solution which work as expected but are off since they do not follow the native design system and they are hard to customize.

### Proposed Solution or API

For the project I am working on, I implemented a custom `MultiSelect` component. I would fork the repository and add it as a feature but time doesn't allow. I might add it as a feature once I get time.

Here is the code
```ts
import {
Actionsheet,
Box,
Button,
FlatList,
FormControl,
HStack,
Icon,
IconButton,
Text,
useDisclose,
useTheme,
} from 'native-base';
import React, { FC, useState } from 'react';
import { Pressable } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { pixelateValue } from '_app/helpers';

interface IMultiSelectProps {
items?: { label: string; value: string }[];
values?: string[];
onValuesChange?: (values: string[]) => void;
label?: string;
touched?: boolean;
isInvalid?: boolean;
errorMessage?: string;
helperText?: string;
}

const MultiSelect: FC = ({
items,
values,
onValuesChange,
label,
touched,
isInvalid,
errorMessage,
helperText,
}) => {
const { space } = useTheme();
const { isOpen, onClose, onOpen } = useDisclose();
const [selectedValues, setSelectedValues] = useState([]);

return (
<>

{label}
onOpen()}>

Choose items...


{touched && isInvalid ? (
{errorMessage}
) : (
{helperText}
)}


{values?.map((value, index) => (


{value}

}
size="xs"
borderRadius="full"
onPress={() => {
setSelectedValues(previousState => previousState.filter(_value => _value !== value));
onValuesChange && onValuesChange(selectedValues.filter(_value => _value !== value));
}}
/>

))}



index.toString()}
renderItem={({ item: { label, value } }) => (
{
if (!selectedValues.includes(value)) {
setSelectedValues(previousValues => [...previousValues, value]);
onValuesChange && onValuesChange([...selectedValues, value]);
} else {
setSelectedValues(previousValues => previousValues.filter(_value => _value !== value));
onValuesChange && onValuesChange([...selectedValues, value]);
}
}}
>
{label}

)}
w="100%"
/>

Close




);
};

export default MultiSelect;

```

This is inspired partially by [react-native-sectioned-multi-select](https://github.com/renrizzolo/react-native-sectioned-multi-select#readme)

### Alternatives

_No response_

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

No repository file or test entry point is named. Start by comparing the supplied MultiSelect implementation with the existing Select component and reviewing the Actionsheet, FormControl, and FlatList APIs it uses. The feature is done when a multi-selection component fits the native design system and its selection, form, and display behavior are defined and verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, react-native, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.