Picker
So far in this book, we have used DatePickerIOS
and DatePickerAndroid
for users to select dates. Each platform also has access to a native Picker
component, where we can populate an array of choices and allow our users to interact with it.
Building a Picker
is easy. We start by writing a Picker
in the render
method of a component and populate it with Picker.Item
children:
<Picker> <Picker.Item label='Hello' value='hello' /> </Picker>
Then, we can give the Picker
some props. The following ones are used in this exercise:
onValueChange
: This is a callback fired when an item has been selected. It passes two arguments:itemValue
anditemPosition
selectedValue
: This is a reference to the current value of thePicker
list
Selecting a category
We will modify our existing AddExpensesModal
component to add the following functionality:
- Create a
Button
right below theExpandableCell
/DatePickerIOS
component to select a category for our expense. - On press, that button...