rn-paper-select

Material Design Select Dropdown Component using React Native Paper

• 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.
• Type-safe

Check out the Example code or you can check the example source code in example module.

Only compatible with react-native-paper version 4

Inspired by react-native-paper-select

Installation

1npm install rn-paper-select

1yarn add rn-paper-select

Usage Select

1const data = [
2  { label: '1', value: 1 },
3  { label: '2', value: 2 },
4  { label: '3', value: 3 },
5];
6const [show, setShow] = React.useState(false);
7const [val, setVal] = React.useState(null);
8// ...
9
10<Select
11  placeholder="Selecciona"
12  mode="flat"
13  multiSelect={false}
14  visible={show}
15  value={val}
16  setValue={setVal}
17  list={data}
18  showItems={() => setShow(true)}
19  onDismiss={() => setShow(false)}
20/>

Usage Autocomplete

1const data = [
2  { label: 'Coca Cola', value: 1 },
3  { label: 'Pepsi', value: 2 },
4  { label: 'Fanta', value: 3 },
5  { label: 'Sprite', value: 4 },
6  { label: 'Coca Cola Zero', value: 5 },
7];
8const [show, setShow] = React.useState(false);
9const [value, setValue] = React.useState('');
10const [val, setVal] = React.useState(null);
11const options = React.useMemo(
12  () =>
13    data.filter(
14      (v) => v.label
15        .toLowerCase()
16        .startsWith(value.toLowerCase())
17    ),
18  [value]
19);
20// ...
21
22<Select
23  placeholder="Selecciona"
24  mode="outlined"
25  isAutoComplete
26  visible={show}
27  value={val}
28  onChangeText={setValue}
29  setValue={setVal}
30  list={options}
31  showItems={() => setShow(true)}
32  onDismiss={() => setShow(false)}
33/>

Autocomplete allowing values outside of options:

1<Select
2  placeholder="Selecciona"
3  mode="outlined"
4  isAutoComplete
5  isFreeInput // adding this property prop the user from being forced to select a predefined option
6  visible={show}
7  value={val}
8  onChangeText={setValue}
9  setValue={setVal}
10  list={options}
11  showItems={() => setShow(true)}
12  onDismiss={() => setShow(false)}
13/>

Usage with custom item

1const data = [
2  { label: 'Coca Cola', value: 1 },
3  { label: 'Pepsi', value: 2 },
4  { label: 'Fanta', value: 3 },
5  { label: 'Sprite', value: 4 },
6  { label: 'Coca Cola Zero', value: 5 },
7];
8const [show, setShow] = React.useState(false);
9const [val, setVal] = React.useState(null);
10const options = React.useMemo(
11  () =>
12    data.map((v) => ({
13      ...v,
14      custom: (
15        <View style={styles.itemStyle}>
16          <Text>{v.label}</Text>
17          <Text>{v.value}</Text>
18        </View>
19      ),
20    })),
21  [value]
22);
23// ...
24
25<Select
26  placeholder="Selecciona"
27  mode="outlined"
28  visible={show}
29  value={val}
30  setValue={setVal}
31  list={options}
32  showItems={() => setShow(true)}
33  onDismiss={() => setShow(false)}
34/>

Contributing

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

License

MIT

---

Made with create-react-native-library