react_native_paper_dropdown_plus_single_select_quickstart.ts

1import React, { useState } from 'react';
2import { SafeAreaView, StyleSheet, View } from 'react-native';
3import { Provider as PaperProvider } from 'react-native-paper';
4import Dropdown from 'react-native-paper-dropdown-plus';
5
6interface Gender {
7  label: string;
8  value: string;
9}
10
11const App = () => {
12  const [showDropDown, setShowDropDown] = useState<boolean>(false);
13  const [gender, setGender] = useState<string>('');
14
15  const genderList: Gender[] = [
16    {
17      label: 'Male',
18      value: 'male',
19    },
20    {
21      label: 'Female',
22      value: 'female',
23    },
24    {
25      label: 'Others',
26      value: 'others',
27    },
28  ];
29
30  return (
31    <PaperProvider>
32      <SafeAreaView style={styles.containerStyle}>
33        <View style={styles.dropdownContainer}>
34          <Dropdown
35            label={'Gender'}
36            mode={'outlined'}
37            visible={showDropDown}
38            showDropDown={() => setShowDropDown(true)}
39            onDismiss={() => setShowDropDown(false)}
40            value={gender}
41            setValue={setGender}
42            list={genderList}
43          />
44        </View>
45      </SafeAreaView>
46    </PaperProvider>
47  );
48};
49
50const styles = StyleSheet.create({
51  containerStyle: {
52    flex: 1,
53  },
54  dropdownContainer: {
55    paddingHorizontal: 20,
56    justifyContent: 'center',
57    flex: 1,
58  },
59});
60
61export default App;