Native Base Select 🔽

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

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

Native Base Select (NPM Link)

Would you like to support me?

Demo/Screenshots

Dependencies

1native-base
2react-native-safe-area-context
3react-native-svg

Installation

1npm install @blump-tech/native-base-select

or

1yarn add @blump-tech/native-base-select

Basic Usage (Multi-Select)

1import { BTMultiSelect } from '@blump-tech/native-base-select';
2
3// ...
4
5const [language, setLanguage] = React.useState({
6  value: '',
7  list: [
8    { _id: 1, name: 'Hindi' },
9    { _id: 2, name: 'English' },
10    { _id: 3, name: 'Bengali' },
11    { _id: 4, name: 'Marathi' },
12    { _id: 5, name: 'Telugu' },
13    { _id: 6, name: 'Tamil' },
14    { _id: 7, name: 'Gujarati' },
15    { _id: 8, name: 'Urdu' },
16    { _id: 9, name: 'Kannada' },
17    { _id: 10, name: 'Odia' },
18    { _id: 11, name: 'Malayalam' },
19    { _id: 12, name: 'Punjabi' },
20    { _id: 13, name: 'Assamese' },
21    { _id: 14, name: 'Maithili' },
22    { _id: 15, name: 'Sanskrit' },
23    { _id: 16, name: 'Nepali' },
24    { _id: 17, name: 'Dzongkha' },
25    { _id: 18, name: 'Bhojpuri' },
26    { _id: 19, name: 'Tibetan' },
27    { _id: 20, name: 'Sinhalese' },
28    { _id: 21, name: 'Khasi' },
29  ],
30  selectedList: [],
31  error: '',
32});
33
34<BTMultiSelect
35  label="Language"
36  placeholder="Select at least 2 Language"
37  list={language.list}
38  selectedList={language.selectedList}
39  onSelection={(value: any) => {
40    setLanguage({
41      ...language,
42      value: value.text,
43      selectedList: value.selectedList,
44      error: '',
45    });
46  }}
47  errorText={language.error}
48  pillStyle={{ backgroundColor: 'yellow' }}
49  errorStyle={{ textColor: 'red' }}
50/>;

Basic Usage (Single-Select)

1import { BTSingleSelect } from '@blump-tech/native-base-select';
2
3// ...
4
5<BTSingleSelect
6  label="Gender"
7  placeholder="Select your gender"
8  list={gender.list}
9  selectedList={gender.selectedList}
10  onSelection={(value: any) => {
11    setGender({
12      ...gender,
13      value: value.text,
14      selectedList: value.selectedList,
15      error: '',
16    });
17  }}
18  errorText={gender.error}
19  pillStyle={{ backgroundColor: 'yellow' }}
20  errorStyle={{ textColor: 'red' }}
21/>;

Props

props	type	description	default value	required
label	string	label of the input	set to empty string if you don’t want to display	yes
list	Array<{_id: string, name: string}>	Array of items.Should be an array of objects with _id and name property.example: [{"_id": 1, "name": "Red"}].	there isn't any default value you need to specify a list.	yes
selectedList	Array<{_id: string, name: string}>	selected elements or preselected elements	set empty array as default	yes
placeholder	string	placeholder field	set to empty string if you don’t want to display	yes
selectInputStyle	{paddingHorizontal?: number; paddingVertical?: number; backgroundColor?: ViewStyle['backgroundColor']; borderRadius?: number;  }	style of the input	{paddingHorizontal: 14, paddingVertical: 12, backgroundColor: '#e5e5e5', borderRadius:  6}	no
pillStyle	{ backgroundColor?: ViewStyle['backgroundColor']; textColor?: TextStyle['color'];  fontSize?: TextStyle['fontSize']; fontWeight?: TextStyle['fontWeight']; borderRadius?: number; }	style of the pill	{fontSize: 14, backgroundColor: 'silver', color:  '#000', borderRadius: 6}	no
placeHolderStyle	{ textColor?: TextStyle['color']; fontSize?: TextStyle['fontSize']; fontWeight?:TextStyle['fontWeight'];}	style of the placeholder	{color: 'gray', fontSize:12,fontWeight: '400'}	no
labelStyle	{ textColor?: TextStyle['color']; fontSize?: TextStyle['fontSize']; fontWeight?:TextStyle['fontWeight']; }	style of the label	{fontWeight: '700', fontSize: 15,color:'#000'}	no
errorStyle	{ textColor?: TextStyle['color']; fontSize?: TextStyle['fontSize'];  fontWeight?: TextStyle['fontWeight']; }	style of error text	{fontWeight:'500', fontSize:12, color:'red'}	no
errorText	string	text to display on error	set to empty string as default	yes
listTextStyle	default react native text style	style of the text in list	default react native text style	no
actionSheetBackgroundColor	ViewStyle['backgroundColor']	background of action sheet	#f5f5f5	no
searchStyle	{  backgroundColor?: ViewStyle['backgroundColor'];textColor?: TextStyle['color'];  borderRadius?: number; borderColor: ViewStyle['borderColor'];}	search bar style	{borderRadius: 20, borderColor: '#e5e5e5', backgroundColor: '#e5e5e5', color:  '#000'}	no

Callback Methods

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

  1onSelection={(value: any) => {
  2  setLanguage({
  3    ...language,
  4    value: value.text,
  5    selectedList: value.selectedList,
  6    error: '',
  7  });
  8}}

Example

1import * as React from 'react';
2
3import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
4import { BTSingleSelect, BTMultiSelect } from '@blump-tech/native-base-select';
5
6export default function App() {
7  const [successText, setSuccessText] = React.useState('');
8  const [language, setLanguage] = React.useState({
9    value: '',
10    list: [
11      { _id: '1', name: 'Hindi' },
12      { _id: '2', name: 'English' },
13      { _id: '3', name: 'Bengali' },
14      { _id: '4', name: 'Marathi' },
15      { _id: '5', name: 'Telugu' },
16      { _id: '6', name: 'Tamil' },
17      { _id: '7', name: 'Gujarati' },
18      { _id: '8', name: 'Urdu' },
19      { _id: '9', name: 'Kannada' },
20      { _id: '10', name: 'Odia' },
21      { _id: '11', name: 'Malayalam' },
22      { _id: '12', name: 'Punjabi' },
23      { _id: '13', name: 'Assamese' },
24      { _id: '14', name: 'Maithili' },
25      { _id: '15', name: 'Sanskrit' },
26      { _id: '16', name: 'Nepali' },
27      { _id: '17', name: 'Dzongkha' },
28      { _id: '18', name: 'Bhojpuri' },
29      { _id: '19', name: 'Tibetan' },
30      { _id: '20', name: 'Sinhalese' },
31      { _id: '21', name: 'Khasi' },
32    ],
33    selectedList: [],
34    error: '',
35  });
36  const [gender, setGender] = React.useState({
37    value: '',
38    list: [
39      { _id: 'Male', name: 'Male' },
40      { _id: 'Female', name: 'Female' },
41      { _id: 'Other', name: 'Other' },
42    ],
43    selectedList: [],
44    error: '',
45  });
46  const _submit = () => {
47    if (language.selectedList.length === 0) {
48      setLanguage({ ...language, error: 'Please select language' });
49      return;
50    }
51    if (gender.selectedList.length === 0) {
52      setGender({ ...gender, error: 'Please select gender.' });
53      return;
54    }
55    setSuccessText('Submitted......');
56  };
57  return (
58    <View style={styles.container}>
59      <BTMultiSelect
60        label="Language"
61        placeholder="Select at least 2 Language"
62        list={language.list}
63        selectedList={language.selectedList}
64        onSelection={(value: any) => {
65          setLanguage({
66            ...language,
67            value: value.text,
68            selectedList: value.selectedList,
69            error: '',
70          });
71        }}
72        errorText={language.error}
73        pillStyle={{ backgroundColor: 'yellow' }}
74        errorStyle={{ textColor: 'red' }}
75      />
76      <BTSingleSelect
77        label="Gender"
78        placeholder="Select your gender"
79        list={gender.list}
80        selectedList={gender.selectedList}
81        onSelection={(value: any) => {
82          setGender({
83            ...gender,
84            value: value.text,
85            selectedList: value.selectedList,
86            error: '',
87          });
88        }}
89        errorText={gender.error}
90        pillStyle={{ backgroundColor: 'yellow' }}
91        errorStyle={{ textColor: 'red' }}
92      />
93      <TouchableOpacity
94        onPress={() => {
95          _submit();
96        }}
97        style={{
98          padding: 16,
99          width: '100%',
100          justifyContent: 'center',
101          alignContent: 'center',
102          alignItems: 'center',
103          backgroundColor: 'green',
104          borderRadius: 8,
105          marginTop: 10,
106        }}
107      >
108        <Text style={{ color: 'white', fontSize: 15, fontWeight: '600' }}>
109          Submit
110        </Text>
111      </TouchableOpacity>
112      <Text style={{ color: 'green', marginTop: 10 }}>{successText}</Text>
113    </View>
114  );
115}
116
117const styles = StyleSheet.create({
118  container: {
119    flex: 1,
120    flexDirection: 'column',
121    padding: 10,
122    width: '100%',
123    alignSelf: 'center',
124    alignItems: 'center',
125    justifyContent: 'center',
126    flexGrow: 1,
127  },
128});

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/Blump-Tech-Pvt-Ltd/native-base-select.git
cd native-base-select && cd example
npm install
cd ios && pod install && cd ..
react-native run-ios
react-native run-android

Used By

• Mohabbatein

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