@@ -23,10 +23,64 @@ from [this example](https://snack.expo.dev/8mHmLfcZf).
2323
2424## Usage
2525
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.
3084
3185For further information on how to use this library,
3286read [ the relevant documentation] ( https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage ) .
0 commit comments