sharingan-rn-modal-dropdown (An extension component for the react-native-paper)

Pull requests are always welcome

A simple and customizable react-native dropdown created using react-native-modal and react-native-paper.

• Checkout the example/ folder for source code and example.

Features

• Single, Group, and Multiselect Dropdowns
• Follows Material Design spec
• Highly customizable
• Easy to integrate with formik and redux-form
• Implemented using react-native-modal
• Fully typed with TypeScript

What's new in (v1.4)

• Dark mode support (React native - 0.63.3 or higher and React Native Paper - 4.2.0 or higher)
• Prop: multiline - Multiline support for the dropdown
• Prop: dropdownIcon - Change dropdown icon -> material design icon
• Prop: itemSelectIcon - Change dropdown item select icon -> Custome react node or material design icon
• Prop: dropdownIconSize - Change dropdown icon size
• Prop: itemSelectIconSize - Change dropdown item icon size
• Prop: hideChip - Hide multi select dropdown chip
• Prop: searchInputTheme - Change react native paper textinput theme
• Prop: disabledItemTextStyle - Change the disabled text view style for the dropdown item.
• Prop: disabledItemViewStyle - Change the disabled item view style for the dropdown item.
• Disable dropdown item by adding disabled attribute to the item object

1{
2  "value": "1",
3  "label": "Tiger Nixon",
4  "employee_salary": "320800",
5  "employee_age": "61",
6  "avatarSource": require("./ddicon.png"),
7  "disabled": true // disable the item
8}

Demo

Installation

Open a Terminal in the project root and run:

1yarn add sharingan-rn-modal-dropdown

1npm install sharingan-rn-modal-dropdown

Quick Start

1import React, { useState } from 'react';
2import { ScrollView, StyleSheet, View } from 'react-native';
3import {
4  Dropdown,
5  GroupDropdown,
6  MultiselectDropdown,
7} from 'sharingan-rn-modal-dropdown';
8
9export const data = [
10  {
11    value: '1',
12    label: 'Tiger Nixon',
13    employee_salary: '320800',
14    employee_age: '61',
15    avatarSource: require('./ddicon.png'),
16    disabled: true, // disable the item
17  },
18  {
19    value: '2',
20    label: 'Garrett Winters',
21    employee_salary: '170750',
22    employee_age: '63',
23    avatarSource: {
24      uri: 'https://img.icons8.com/color/344/circled-user-male-skin-type-5.png',
25    },
26  },
27  {
28    value: '3',
29    label: 'Ashton Cox',
30    employee_salary: '86000',
31    employee_age: '66',
32    avatarSource: {
33      uri: 'https://img.icons8.com/color/344/circled-user-male-skin-type-5.png',
34    },
35  },
36  {
37    value: '4',
38    label: 'Cedric Kelly',
39    employee_salary: '433060',
40    employee_age: '22',
41    avatarSource: {
42      uri: 'https://img.icons8.com/color/344/circled-user-male-skin-type-5.png',
43    },
44  },
45];
46
47export const groupData = [
48  {
49    title: 'Apple',
50    data: [
51      {
52        value: '233',
53        label: 'iPhone SE(2020)',
54        avatarSource: {
55          uri: 'https://img.icons8.com/cute-clipart/2x/iphone-x.png',
56        },
57      },
58      {
59        value: '242',
60        label: 'iPhone 11',
61        avatarSource: {
62          uri: 'https://img.icons8.com/cute-clipart/2x/iphone-x.png',
63        },
64      },
65      {
66        value: '24w',
67        label: 'iPhone 12',
68        avatarSource: {
69          uri: 'https://img.icons8.com/cute-clipart/2x/iphone-x.png',
70        },
71      },
72      {
73        value: '99',
74        label: 'iPhone 12 Mini',
75        avatarSource: {
76          uri: 'https://img.icons8.com/cute-clipart/2x/iphone-x.png',
77        },
78      },
79    ],
80  },
81  {
82    title: 'Google',
83    data: [
84      {
85        value: '19',
86        label: 'Pixel 3a',
87        avatarSource: {
88          uri: 'https://img.icons8.com/cute-clipart/344/android.png',
89        },
90      },
91      {
92        value: '20',
93        label: 'Pixel 3',
94        avatarSource: {
95          uri: 'https://img.icons8.com/cute-clipart/344/android.png',
96        },
97      },
98      {
99        value: '21',
100        label: 'Pixel 3 xl',
101        avatarSource: {
102          uri: 'https://img.icons8.com/cute-clipart/344/android.png',
103        },
104      },
105      {
106        value: '16',
107        label: 'Pixel 4',
108        avatarSource: {
109          uri: 'https://img.icons8.com/cute-clipart/344/android.png',
110        },
111      },
112      {
113        value: '17',
114        label: 'Pixel 4a',
115        avatarSource: {
116          uri: 'https://img.icons8.com/cute-clipart/344/android.png',
117        },
118      },
119      {
120        value: '18',
121        label: 'Pixel 5',
122        avatarSource: {
123          uri: 'https://img.icons8.com/cute-clipart/344/android.png',
124        },
125      },
126    ],
127  },
128];
129
130const Example = () => {
131  const [valueMS, setValueMS] = useState<string[]>([]);
132  const [valueSS, setValueSS] = useState('');
133  const [valueGS, setValueGS] = useState('');
134  const onChangeMS = (value: string[]) => {
135    setValueMS(value);
136  };
137  const onChangeSS = (value: string) => {
138    setValueSS(value);
139  };
140  const onChangeGS = (value: string) => {
141    setValueGS(value);
142  };
143
144  return (
145    <View
146      style={{
147        flexDirection: 'column',
148        height: '100%',
149      }}
150    >
151      <ScrollView>
152        <View style={styles.container}>
153          <MultiselectDropdown
154            label="Multi select with avatar chip outlined"
155            data={data}
156            enableSearch
157            enableAvatar
158            chipType="outlined"
159            value={valueMS}
160            onChange={onChangeMS}
161          />
162        </View>
163        <View style={styles.container}>
164          <Dropdown
165            label="Simple dropdown"
166            data={data}
167            enableSearch
168            value={valueSS}
169            onChange={onChangeSS}
170          />
171        </View>
172        <View style={styles.container}>
173          <GroupDropdown
174            label="Group dropdown with avatar"
175            data={groupData}
176            enableSearch
177            enableAvatar
178            value={valueGS}
179            onChange={onChangeGS}
180          />
181        </View>
182      </ScrollView>
183    </View>
184  );
185};
186
187const styles = StyleSheet.create({
188  container: {
189    paddingTop: 30,
190    marginLeft: 20,
191    marginRight: 20,
192    flex: 1,
193  },
194  buttonView: {
195    display: 'flex',
196    justifyContent: 'center',
197    flexDirection: 'row',
198    marginTop: 10,
199  },
200});
201
202export default Example;

Formik Example

1import React, { useState } from 'react';
2import { ScrollView, StyleSheet, View } from 'react-native';
3import { Formik } from 'formik';
4import {
5  Dropdown,
6  GroupDropdown,
7  MultiselectDropdown,
8} from 'sharingan-rn-modal-dropdown';
9import { data, groupData } from './data';
10import {
11  Button,
12  Colors,
13  Dialog,
14  FAB,
15  Paragraph,
16  Portal,
17  useTheme,
18} from 'react-native-paper';
19import Icon from 'react-native-vector-icons/FontAwesome5';
20
21import { DropdownValidation } from './validation';
22
23type tState = {
24  msChipFlat: Array<string | number>,
25  msChipOutlined: Array<string | number>,
26  sddWoAvatar: string | number,
27  sddWAvatar: string | number,
28  gddWoAvatar: string | number,
29  gddWAvatar: string | number,
30};
31
32const FormikExample = () => {
33  const [visible, setVisible] = useState(false);
34  const [state, setState] =
35    useState <
36    tState >
37    {
38      msChipFlat: [],
39      msChipOutlined: [],
40      sddWoAvatar: '',
41      sddWAvatar: '',
42      gddWoAvatar: '',
43      gddWAvatar: '',
44    };
45  const hideDialog = () => setVisible(false);
46  const { colors } = useTheme();
47  return (
48    <Formik
49      initialValues={{
50        msChipFlat: [1],
51        msChipOutlined: [12, 2],
52        sddWoAvatar: '',
53        sddWAvatar: '',
54        gddWoAvatar: '1',
55        gddWAvatar: '1',
56        text: '',
57      }}
58      onSubmit={(values, { setSubmitting }) => {
59        setVisible(true);
60        setState(values);
61        setSubmitting(false);
62      }}
63      validationSchema={DropdownValidation}
64      enableReinitialize
65    >
66      {({ errors, handleSubmit, setFieldValue, values, isSubmitting }) => (
67        <View>
68          <Portal>
69            <Dialog visible={visible} onDismiss={hideDialog}>
70              <Dialog.Title>Dropdown values</Dialog.Title>
71              <Dialog.Content>
72                <Paragraph>{`msChipFlat: ${state.msChipFlat}`}</Paragraph>
73                <Paragraph>{`msChipOutlined: ${state.msChipOutlined}`}</Paragraph>
74                <Paragraph>{`sddWoAvatar: ${state.sddWoAvatar}`}</Paragraph>
75                <Paragraph>{`sddWAvatar: ${state.sddWAvatar}`}</Paragraph>
76                <Paragraph>{`gddWoAvatar: ${state.gddWoAvatar}`}</Paragraph>
77                <Paragraph>{`gddWAvatar: ${state.gddWAvatar}`}</Paragraph>
78              </Dialog.Content>
79              <Dialog.Actions>
80                <Button onPress={hideDialog}>Done</Button>
81              </Dialog.Actions>
82            </Dialog>
83            <FAB
84              style={styles.fab}
85              icon="send"
86              onPress={handleSubmit}
87              disabled={isSubmitting}
88              label="Submit"
89            />
90          </Portal>
91          <View
92            style={{
93              flexDirection: 'column',
94              height: '100%',
95              backgroundColor: colors.background,
96            }}
97          >
98            <ScrollView>
99              <View style={styles.container}>
100                <MultiselectDropdown
101                  label="Multi select without avatar chip flat"
102                  data={data}
103                  primaryColor={Colors.cyan500}
104                  enableSearch
105                  value={values.msChipFlat}
106                  onChange={value => setFieldValue('msChipFlat', value)}
107                  chipType="flat"
108                  required
109                  error={errors.msChipFlat ? true : false}
110                  emptySelectionText="No item selected"
111                  itemSelectIcon={
112                    <Icon
113                      name="chess-knight"
114                      size={18}
115                      color={Colors.amber700}
116                    />
117                  }
118                  mode="outlined"
119                />
120              </View>
121              <View style={styles.container}>
122                <MultiselectDropdown
123                  label="Multi select with avatar chip outlined"
124                  data={data}
125                  primaryColor={Colors.tealA700}
126                  enableSearch
127                  enableAvatar
128                  chipType="outlined"
129                  value={values.msChipOutlined}
130                  onChange={value => setFieldValue('msChipOutlined', value)}
131                  required
132                  error={errors.msChipOutlined ? true : false}
133                  selectedItemTextStyle={{ fontWeight: 'bold' }}
134                  selectedItemsText="Select"
135                />
136              </View>
137              <View style={styles.container}>
138                <Dropdown
139                  label="Simple dropdown"
140                  data={data}
141                  primaryColor={Colors.indigoA700}
142                  enableSearch
143                  value={values.sddWoAvatar}
144                  onChange={value => setFieldValue('sddWoAvatar', value)}
145                  required
146                  mode="outlined"
147                  error={errors.sddWoAvatar ? true : false}
148                  selectedItemTextStyle={{ fontWeight: 'bold' }}
149                  itemSelectIcon={
150                    <Icon
151                      name="check-double"
152                      size={18}
153                      color={Colors.indigoA700}
154                    />
155                  }
156                />
157              </View>
158              <View style={styles.container}>
159                <Dropdown
160                  label="Simple dropdown with avatar"
161                  data={data}
162                  primaryColor={Colors.blueA700}
163                  enableSearch
164                  enableAvatar
165                  value={values.sddWAvatar}
166                  onChange={value => setFieldValue('sddWAvatar', value)}
167                  required
168                  error={errors.sddWAvatar ? true : false}
169                  selectedItemViewStyle={{ backgroundColor: colors.backdrop }}
170                  selectedItemTextStyle={{ fontWeight: 'bold' }}
171                  disableSelectionTick
172                  removeLabel
173                  textInputPlaceholder="Simple dropdown with avatar"
174                  underlineColor="transparent"
175                />
176              </View>
177              <View style={styles.container}>
178                <GroupDropdown
179                  label="Group dropdown"
180                  data={groupData}
181                  headerTextStyle={{
182                    color: Colors.tealA700,
183                  }}
184                  primaryColor={Colors.tealA700}
185                  enableSearch
186                  value={values.gddWoAvatar}
187                  onChange={value => setFieldValue('gddWoAvatar', value)}
188                  required
189                  error={errors.gddWoAvatar ? true : false}
190                  selectedItemTextStyle={{ fontWeight: 'bold' }}
191                />
192              </View>
193              <View style={styles.container}>
194                <GroupDropdown
195                  label="Group dropdown with avatar"
196                  data={groupData}
197                  headerTextStyle={{
198                    color: Colors.amberA700,
199                  }}
200                  primaryColor={Colors.amberA700}
201                  enableSearch
202                  enableAvatar
203                  value={values.gddWAvatar}
204                  onChange={value => setFieldValue('gddWAvatar', value)}
205                  required
206                  error={errors.gddWAvatar ? true : false}
207                  selectedItemTextStyle={{ fontWeight: 'bold' }}
208                />
209              </View>
210            </ScrollView>
211          </View>
212        </View>
213      )}
214    </Formik>
215  );
216};
217
218const styles = StyleSheet.create({
219  container: {
220    paddingTop: 30,
221    marginLeft: 20,
222    marginRight: 20,
223    flex: 1,
224  },
225  appBar: { height: 80, backgroundColor: Colors.indigoA700 },
226  appBarContent: {
227    flex: 1,
228    justifyContent: 'center',
229    flexDirection: 'column',
230    alignItems: 'center',
231  },
232  appbarTitle: { paddingTop: 25 },
233  buttonView: {
234    display: 'flex',
235    justifyContent: 'center',
236    flexDirection: 'row',
237    marginTop: 10,
238  },
239  fab: {
240    position: 'absolute',
241    margin: 16,
242    right: 0,
243    bottom: 0,
244    backgroundColor: Colors.pinkA700,
245  },
246});
247
248export default FormikExample;

API reference

---

The package exports a Dropdown, GroupDropdown, and MultiselectDropdown, components which is the one you'd use to render the dropdowns.

---

Dropdown Items structure

Dropdown data expect an array of items that are needed to be rendered.

IDropdownData Type Ref

1export interface IDropdownData {
2  label: string;
3  value: string | number;
4  avatarSource?: ImageSourcePropType;
5  avatarComponent?: ReactNode;
6  disabled?: boolean;
7}

Props (common)

---

label (required)

Set the dropdown field label.

required

Set whether the dropdown is required or not and an asterisk symbol will be added with the label for indication. Also, it can be used with the error.

disabled

Enable and Disable the dropdown

floating

Open the dropdown like the modal.

enableSearch

Enable search field for the dropdown.

error

Set whether the dropdown has an error or not. The error field will work only when the required field is enabled.

onBlur

Call back function onClosing the dropdown modal.

elevation

Control the elevation for the dropdown container view.

borderRadius

Control the border radius for the dropdown container view.

activityIndicatorColor

Changes the loader indicator color.

searchPlaceholder

Search area filed placeholder text.

rippleColor

Change the ripple color.

helperText

Set the helper text for the dropdown, this will be visible only when the dropdown field turned into an error field.

errorColor

Set the dropdown error color.

showLoader

Show or hide loader for the dropdown container.

itemTextStyle

Change the text view style for the dropdown item.

itemContainerStyle

Change the dropdown item container view style.

animationIn

Modal open animation type same as react-native-modal.

animationInTiming

Modal open animation duration same as react-native-modal.

animationOut

Modal close animation duration same as react-native-modal.

supportedOrientations

Modal supported orientations same as react-native-modal.

parentDDContainerStyle

Dropdown parent container style.

emptyListText

• String: Message to be shown when the dropdown is empty. or
• React Node: to completely change the empty component.

enableAvatar

Enable or disable avatar for the dropdown items.

avatarSize

Set the avatar view size.

avatarComponent

Set a custom avatar for your dropdown items

1 {
2    value: '2',
3    label: 'Garrett Winters',
4    avatarComponent: <Avatar.Icon size={24} icon="folder" />
5  }

paperTheme

Since the dropdown build on top of Native Paper you can over write the theme by passing your own native paper theme, for more info refer https://callstack.github.io/react-native-paper/theming.html

textInputStyle

Dropdown input style.

mainContainerStyle

Dropdown main container style.

underlineColor

Change TextInput Under Line color.

disableSelectionTick

Disable the selected item tick mark.

textInputPlaceholder

Change TextInput Placeholder text.

textInputPlaceholderColor

Change TextInput Placeholder color.

selectedItemTextStyle

Change the selected text view style for the dropdown item.

selectedItemViewStyle

Change the selected item view style for the dropdown item.

disabledItemTextStyle

Change the disabled text view style for the dropdown item.

disabledItemViewStyle

Change the disabled item view style for the dropdown item.

removeLabel

Remove TextInput label. Note: Empty string must be passed since label is a required field

mode

Mode of the TextInput.

• flat (default) - flat input with an underline.
• outlined - input with an outline. In outlined mode, the background color of the label is derived from colors.background in theme or the backgroundColor style. This component render TextInputOutlined or TextInputFlat based on that props

Remove TextInput label. Note: Empty string must be passed since label is a required field

dropdownIcon

Material community icon string to change the dropdown down arrow refer: https://materialdesignicons.com/

dropdownIconSize

Change the dropdown icon size default: 30

itemSelectIcon

Material community icon string to change the dropdown item select check icon refer: https://materialdesignicons.com/

itemSelectIconSize

Change the dropdown item icon size default: 18

multiline

Enable multiline for the dropdown default: false
Note: this may lead to a style issue.

searchInputTheme

Since the dropdown build on top of Native Paper you can over write the theme by passing your own native paper input theme, for more info refer https://callstack.github.io/react-native-paper/theming.html

Props (Simple Dropdown)

---

value (required)

Set the dropdown value (only string or number based on the data node value), can be used in redux-form or formik.

data (required)

Collection of object items to render the group dropdown.

1const data = [
2  {
3    value: '1',
4    label: 'Tiger Nixon',
5    avatarSource: require('./ddicon.png'),
6    disabled: true,
7  },
8  {
9    value: '2',
10    label: 'Garrett Winters',
11    avatarSource: {
12      uri:
13        'https://img.icons8.com/color/344/circled-user-female-skin-type-6.png',
14    },
15    disabled: false,
16  },
17];

onChange

Call back function onSelecting the dropdown value. It will return the selected item value.

disableSort

Enable or disable sorting for the dropdown items.

defaultSortOrder

Set the sorting order for the dropdown items

• asc (default)
• desc

Props (Group Dropdown)

---

value (required)

Set the group dropdown value (only string or number based on the data node value), can be used in redux-form or formik.

data (required)

Collection of object items to render the group dropdown.

Sample

1const data = [
2 {
3   title: 'Apple',
4   data: [
5     {
6       value: 'iphonese',
7       label: 'iPhone SE(2020)',
8       avatarSource: require('./ddicon.png'),
9     },
10     {
11       value: '23',
12       label: 'iPhone X',
13       avatarSource: {
14         uri: 'https://img.icons8.com/emoji/344/mobile-phone.png',
15       },
16     },
17   ],
18 }
19}

onChange

Call back function onSelecting the dropdown value. It will return the selected item value.

stickySectionHeadersEnabled

Keep the group header sticky or not.

headerContainerStyle

Dropdown group header container view style.

headerContainerStyle

Dropdown group header text style.

Props (Multiselect Dropdown)

---

value (required)

Set the multiselect dropdown value(only array of string[] or number[] based on the data node value) . Aslo, can be used in redux-form or formik

data (required)

Collection of object items to render the group dropdown.

1const data = [
2  {
3    value: '1',
4    label: 'Tiger Nixon',
5    avatarSource: require('./ddicon.png'),
6  },
7  {
8    value: '2',
9    label: 'Garrett Winters',
10    avatarSource: {
11      uri:
12        'https://img.icons8.com/color/344/circled-user-female-skin-type-6.png',
13    },
14  },
15];

onChange

Call back function onSelecting the dropdown value. It will return the selected item value.

disableSort

Enable or disable sorting for the dropdown items.

defaultSortOrder

Set the sorting order for the dropdown items

• asc (default)
• desc

chipType

Mode of the chip.

• flat - flat chip without outline.
• outlined - chip with an outline.

chipTextStyle

Change chip label text style.

chipStyle

Change the chip view style.

emptySelectionText

Change the selection section empty text value.

Contributing

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

License

MIT