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

native-base
react-native-safe-area-context
react-native-svg

Installation

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

or

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

Basic Usage (Multi-Select)

import { BTMultiSelect } from '@blump-tech/native-base-select';

// ...

const [language, setLanguage] = React.useState({
  value: '',
  list: [
    { _id: 1, name: 'Hindi' },
    { _id: 2, name: 'English' },
    { _id: 3, name: 'Bengali' },
    { _id: 4, name: 'Marathi' },
    { _id: 5, name: 'Telugu' },
    { _id: 6, name: 'Tamil' },
    { _id: 7, name: 'Gujarati' },
    { _id: 8, name: 'Urdu' },
    { _id: 9, name: 'Kannada' },
    { _id: 10, name: 'Odia' },
    { _id: 11, name: 'Malayalam' },
    { _id: 12, name: 'Punjabi' },
    { _id: 13, name: 'Assamese' },
    { _id: 14, name: 'Maithili' },
    { _id: 15, name: 'Sanskrit' },
    { _id: 16, name: 'Nepali' },
    { _id: 17, name: 'Dzongkha' },
    { _id: 18, name: 'Bhojpuri' },
    { _id: 19, name: 'Tibetan' },
    { _id: 20, name: 'Sinhalese' },
    { _id: 21, name: 'Khasi' },
  ],
  selectedList: [],
  error: '',
});

<BTMultiSelect
  label="Language"
  placeholder="Select at least 2 Language"
  list={language.list}
  selectedList={language.selectedList}
  onSelection={(value: any) => {
    setLanguage({
      ...language,
      value: value.text,
      selectedList: value.selectedList,
      error: '',
    });
  }}
  errorText={language.error}
  pillStyle={{ backgroundColor: 'yellow' }}
  errorStyle={{ textColor: 'red' }}
/>;

Basic Usage (Single-Select)

import { BTSingleSelect } from '@blump-tech/native-base-select';

// ...

<BTSingleSelect
  label="Gender"
  placeholder="Select your gender"
  list={gender.list}
  selectedList={gender.selectedList}
  onSelection={(value: any) => {
    setGender({
      ...gender,
      value: value.text,
      selectedList: value.selectedList,
      error: '',
    });
  }}
  errorText={gender.error}
  pillStyle={{ backgroundColor: 'yellow' }}
  errorStyle={{ textColor: 'red' }}
/>;

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 :

  onSelection={(value: any) => {
    setLanguage({
      ...language,
      value: value.text,
      selectedList: value.selectedList,
      error: '',
    });
  }}

Example

import * as React from 'react';

import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import { BTSingleSelect, BTMultiSelect } from '@blump-tech/native-base-select';

export default function App() {
  const [successText, setSuccessText] = React.useState('');
  const [language, setLanguage] = React.useState({
    value: '',
    list: [
      { _id: '1', name: 'Hindi' },
      { _id: '2', name: 'English' },
      { _id: '3', name: 'Bengali' },
      { _id: '4', name: 'Marathi' },
      { _id: '5', name: 'Telugu' },
      { _id: '6', name: 'Tamil' },
      { _id: '7', name: 'Gujarati' },
      { _id: '8', name: 'Urdu' },
      { _id: '9', name: 'Kannada' },
      { _id: '10', name: 'Odia' },
      { _id: '11', name: 'Malayalam' },
      { _id: '12', name: 'Punjabi' },
      { _id: '13', name: 'Assamese' },
      { _id: '14', name: 'Maithili' },
      { _id: '15', name: 'Sanskrit' },
      { _id: '16', name: 'Nepali' },
      { _id: '17', name: 'Dzongkha' },
      { _id: '18', name: 'Bhojpuri' },
      { _id: '19', name: 'Tibetan' },
      { _id: '20', name: 'Sinhalese' },
      { _id: '21', name: 'Khasi' },
    ],
    selectedList: [],
    error: '',
  });
  const [gender, setGender] = React.useState({
    value: '',
    list: [
      { _id: 'Male', name: 'Male' },
      { _id: 'Female', name: 'Female' },
      { _id: 'Other', name: 'Other' },
    ],
    selectedList: [],
    error: '',
  });
  const _submit = () => {
    if (language.selectedList.length === 0) {
      setLanguage({ ...language, error: 'Please select language' });
      return;
    }
    if (gender.selectedList.length === 0) {
      setGender({ ...gender, error: 'Please select gender.' });
      return;
    }
    setSuccessText('Submitted......');
  };
  return (
    <View style={styles.container}>
      <BTMultiSelect
        label="Language"
        placeholder="Select at least 2 Language"
        list={language.list}
        selectedList={language.selectedList}
        onSelection={(value: any) => {
          setLanguage({
            ...language,
            value: value.text,
            selectedList: value.selectedList,
            error: '',
          });
        }}
        errorText={language.error}
        pillStyle={{ backgroundColor: 'yellow' }}
        errorStyle={{ textColor: 'red' }}
      />
      <BTSingleSelect
        label="Gender"
        placeholder="Select your gender"
        list={gender.list}
        selectedList={gender.selectedList}
        onSelection={(value: any) => {
          setGender({
            ...gender,
            value: value.text,
            selectedList: value.selectedList,
            error: '',
          });
        }}
        errorText={gender.error}
        pillStyle={{ backgroundColor: 'yellow' }}
        errorStyle={{ textColor: 'red' }}
      />
      <TouchableOpacity
        onPress={() => {
          _submit();
        }}
        style={{
          padding: 16,
          width: '100%',
          justifyContent: 'center',
          alignContent: 'center',
          alignItems: 'center',
          backgroundColor: 'green',
          borderRadius: 8,
          marginTop: 10,
        }}
      >
        <Text style={{ color: 'white', fontSize: 15, fontWeight: '600' }}>
          Submit
        </Text>
      </TouchableOpacity>
      <Text style={{ color: 'green', marginTop: 10 }}>{successText}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    padding: 10,
    width: '100%',
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    flexGrow: 1,
  },
});

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