React Native Paper Select 🔽


- This module includes a customizable multi-select and a single select component for React Native Paper.
- The package is both Android and iOS compatible.
- The package is well-typed and supports TypeScript.
- Smooth and fast.
- Type-safe

Give us a GitHub star 🌟, if you found this package useful.

React Native Paper Select (NPM Link)

Would you like to support me?

Demo/Screenshots

Dependencies

``bash
react-native-paper
react-native-vector-icons
`

Installation

`bash
npm install react-native-paper-select
`

or

`bash
yarn add react-native-paper-select
`

Basic Usage (Multi-Select)

`js
import { PaperSelect } from 'react-native-paper-select';

// ...

const [colors, setColors] = useState({
value: '',
list: [
{ _id: '1', value: 'BLUE' },
{ _id: '2', value: 'RED' },
{ _id: '3', value: 'GREEN' },
{ _id: '4', value: 'YELLOW' },
{ _id: '5', value: 'BROWN' },
{ _id: '6', value: 'BLACK' },
{ _id: '7', value: 'WHITE' },
{ _id: '8', value: 'CYAN' },
],
selectedList: [],
error: '',
});

label="Select Colors"
value={colors.value}
onSelection={(value: any) => {
setColors({
...colors,
value: value.text,
selectedList: value.selectedList,
error: '',
});
}}
arrayList={[...colors.list]}
selectedArrayList={colors.selectedList}
errorText={colors.error}
multiEnable={true}
textInputMode="flat"
searchStyle={{ iconColor: 'red' }}
/>;
`

Basic Usage (Single-Select)

`js
import { PaperSelect } from 'react-native-paper-select';

// ...

label="Select Gender"
value={gender.value}
onSelection={(value: any) => {
setGender({
...gender,
value: value.text,
selectedList: value.selectedList,
error: '',
});
}}
arrayList={[...gender.list]}
selectedArrayList={gender.selectedList}
errorText={gender.error}
multiEnable={false}
dialogTitleStyle={{ color: 'red' }}
checkboxColor="yellow"
checkboxLabelStyle={{ color: 'red', fontWeight: '700' }}
textInputBackgroundColor="yellow"
textInputColor="red"
/>;
`

$3

| props | type | description | default value | required |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | -------- |
|   label | string | Input Label | set to empty string if you don’t want to display | yes |
|   arrayList | Array<{  \_id: string; value: string;}> | Array of items. Should be an array of objects with \_id and value property.example: \[{"\_id": 1, "value": "Red"}\]. | there isn't any default value you need to specify a list. | yes |
|   selectedArrayList | Array<{  \_id: string; value: string;}> | selected elements or preselected elements | set empty array as default | yes |
|   multiEnable | boolean | true if you want to use multi select, false if you want single select | no default value | yes |
|   errorText | string | text to display on error | set to empty string as default | yes |
|   value | string | default value you want to display | bind it with your variable | yes |
|   dialogStyle | {backgroundColor?: ViewStyle\['backgroundColor'\]; borderRadius?: ViewStyle\['borderRadius'\];} | dialog box style | {backgroundColor:'white', borderRadius: 5} | no |
|   dialogTitleStyle | TextStyle | dialog box title style | default react native paper style | no |
|   searchStyle | {backgroundColor?: ViewStyle\['backgroundColor'\]; textColor?: TextStyle\['color'\]; borderRadius?: number; borderColor?: ViewStyle\['borderColor'\]; iconColor?: string;} | search bar style in dialog box | {borderRadius:5, borderColor:'#e5e5e5', backgroundColor: '#e5e5e5', color: '#000'} | no |
|   checkboxUncheckedColor | string | checkbox unchecked color | #000007 | no |
|   checkboxColor | string | checkbox checked color | blue | no |
|   checkboxLabelStyle | TextStyle | checkbox label style | default react native paper style | no |
|   errorStyle | TextStyle | error style | default react native paper style | no |
|   textInputMode | flat or outlined | input style flat or outlined | outlined | no |
|   underlineColor | string | underline color (if input mode is flat) | black | no |
|   activeUnderlineColor | string | active underline color (if input mode is flat) | black | no |
|   activeOutlineColor | string | active border color (if input mode is outlined) | black | no |
|   outlineColor | string | border color (if input mode is outlined) | black | no |
|   textInputBackgroundColor | string | text input background color | white | no |
|   textInputColor | string | text input text color | black | no |
|   textInputHeight | number | text input height | default react native paper style | no |
|   dialogButtonLabelStyle | TextStyle | dialog button style | default react native paper style | no |
|   searchPlaceholder | string | search placeholder | Search | no |
|   modalCloseButtonText | string | Close button text in modal | Close | no |
|   modalDoneButtonText | string | Done button text in modal | Done | no |

$3

- onSelection - Return the selected item when an item is selected.
Example :

`ts
onSelection={(value: any) => {
setGender({
...gender,
value: value.text,
selectedList: value.selectedList,
error: '',
});
}}
`

Example

`ts
import React, { useState } from 'react';

import { Alert, StyleSheet, View } from 'react-native';
import { Button as PaperButton, Headline } from 'react-native-paper';
import { PaperSelect } from 'react-native-paper-select';

export const selectValidator = (value: any) => {
if (!value || value.length <= 0) {
return 'Please select a value.';
}

return '';
};

export default function App() {
const [gender, setGender] = useState({
value: '',
list: [
{ _id: '1', value: 'MALE' },
{ _id: '2', value: 'FEMALE' },
{ _id: '3', value: 'OTHERS' },
],
selectedList: [],
error: '',
});
const [colors, setColors] = useState({
value: '',
list: [
{ _id: '1', value: 'BLUE' },
{ _id: '2', value: 'RED' },
{ _id: '3', value: 'GREEN' },
{ _id: '4', value: 'YELLOW' },
{ _id: '5', value: 'BROWN' },
{ _id: '6', value: 'BLACK' },
{ _id: '7', value: 'WHITE' },
{ _id: '8', value: 'CYAN' },
],
selectedList: [],
error: '',
});

return (


React Native Paper Select

label="Select Gender"
value={gender.value}
onSelection={(value: any) => {
setGender({
...gender,
value: value.text,
selectedList: value.selectedList,
error: '',
});
}}
arrayList={[...gender.list]}
selectedArrayList={gender.selectedList}
errorText={gender.error}
multiEnable={false}
dialogTitleStyle={{ color: 'red' }}
checkboxColor="yellow"
checkboxLabelStyle={{ color: 'red', fontWeight: '700' }}
textInputBackgroundColor="yellow"
textInputColor="red"
/>
label="Select Colors"
value={colors.value}
onSelection={(value: any) => {
setColors({
...colors,
value: value.text,
selectedList: value.selectedList,
error: '',
});
}}
arrayList={[...colors.list]}
selectedArrayList={colors.selectedList}
errorText={colors.error}
multiEnable={true}
textInputMode="flat"
searchStyle={{ iconColor: 'red' }}
searchPlaceholder="Procurar"
modalCloseButtonText="fechar"
modalDoneButtonText="terminado"
/>
style={styles.button}
labelStyle={styles.text}
mode={'outlined'}
onPress={() => {
const genderError = selectValidator(gender.value);
const colorError = selectValidator(colors.value);
if (genderError || colorError) {
setColors({ ...colors, error: colorError });
setGender({ ...gender, error: genderError });
return;
}
Alert.alert(
'Selected Values',
'Gender: ' + gender.value + ' and Colors: ' + colors.value
);
}}
>
Submit


);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 12,
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},

button: {
marginVertical: 10,
width: '100%',
backgroundColor: 'blue',
},
text: {
fontWeight: 'bold',
fontSize: 15,
lineHeight: 26,
color: 'white',
},
});
`

You can check the example source code in example module.

Try it out

You can run the example module by performing these steps:

`
git clone https://github.com/srivastavaanurag79/react-native-paper-select.git
cd react-native-paper-select && cd example
npm install
cd ios && pod install && cd ..
react-native run-ios
react-native run-android
``

Authors

- Anurag Srivastava (@srivastavaanurag79)
- Harshit Singhal (@Harshit31)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT