@@ -23,10 +23,64 @@ from [this example](https://snack.expo.dev/8mHmLfcZf).
23
23
24
24
## Usage
25
25
26
- You can find runnable examples in the ` examples ` subdirectory, which is a
27
- working [ Expo] ( https://github.com/expo/expo ) project demonstrating this library.
28
- Navigate into the ` examples ` subdirectory, run ` npm install ` , and then run
29
- ` npx expo start ` to see the examples working.
26
+ ### Basic usage
27
+
28
+ The following code shows basic usage of the library:
29
+
30
+ ``` javascript
31
+ import React , {useState } from ' react' ;
32
+ import {View , Text } from ' react-native' ;
33
+ import DropDownPicker from ' react-native-dropdown-picker' ;
34
+
35
+ export default function App () {
36
+ const [open , setOpen ] = useState (false );
37
+ const [value , setValue ] = useState (null );
38
+ const [items , setItems ] = useState ([
39
+ {label: ' Apple' , value: ' apple' },
40
+ {label: ' Banana' , value: ' banana' },
41
+ {label: ' Pear' , value: ' pear' },
42
+ ]);
43
+
44
+ return (
45
+ < View style= {{flex: 1 }}>
46
+ < View
47
+ style= {{
48
+ flex: 1 ,
49
+ alignItems: ' center' ,
50
+ justifyContent: ' center' ,
51
+ paddingHorizontal: 15 ,
52
+ }}>
53
+ < DropDownPicker
54
+ open= {open}
55
+ value= {value}
56
+ items= {items}
57
+ setOpen= {setOpen}
58
+ setValue= {setValue}
59
+ setItems= {setItems}
60
+ placeholder= {' Choose a fruit.' }
61
+ / >
62
+ < / View>
63
+
64
+ < View style= {{
65
+ flex: 1 ,
66
+ alignItems: ' center' ,
67
+ justifyContent: ' center'
68
+ }}>
69
+ < Text > Chosen fruit: {value === null ? ' none' : value}< / Text >
70
+ < / View>
71
+ < / View>
72
+ );
73
+ }
74
+ ```
75
+
76
+ ### Further information on usage
77
+
78
+ You can find more examples in the ` examples ` subdirectory. This subdirectory is
79
+ a working [ Expo] ( https://github.com/expo/expo ) project demonstrating this
80
+ library. It shows how to use the library with class components as well as
81
+ function components, and in TypeScript as well as in JavaScript. Navigate into
82
+ the ` examples ` subdirectory, run ` npm install ` , and then run ` npx expo start ` to
83
+ see the examples working.
30
84
31
85
For further information on how to use this library,
32
86
read [ the relevant documentation] ( https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage ) .
0 commit comments