image by material.io
Dropdown select-boxes are a common feature on a lot of forms in mobile and web applications. They allow a user to select a single item from a list of similar items. These items can be days, months, cities, countries, or any other categories. This article will show you how to put in place drop-down select boxes in React Native and Formik.
Step 1: Create a new react-native project using expo. Call it SelectBoxApp
expo init SelectBoxApp
Step 2: Then install the Formik library to the app. Read the Formik Documentation here.
npm install formik --save
Step 3: Install Axios
npm install axios --save
Step 4: Install react-native-paper
npm install react-native-paper
Step 5: Install react-native-community/picker
npm install @react-native-community/picker --save
View documentation od @react-native-community/picker here.
Step 6: Import react into your app.js file
import React from 'react';
Step 7: Import axios into your app.js file.
import axios from 'axios';
Step 8: Import View, Text, and Alert components from react-native into your app.js
import { View, Text, Alert} from 'react-native';
Step 9: Import Button, Title, and TextInput components from react-native-paper into your app.js file
import { Button, Title, TextInput } from 'react-native-paper';
Step 10: Import the useFormik hook from formik into your app.js file
import { useFormik } from 'formik';
Step 11: Import the Picker from @react-native-community/picker into your app.js file.
import { Picker } from '@react-native-community/picker'
This is the full list of imports required.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { View, Text, Alert} from 'react-native';
import { Button } from 'react-native-paper';
import { useFormik } from 'formik';
import { Picker } from '@react-native-community/picker'
Step 12: Create a constant variable called App to hold a fat arrow function.
const App = () => {
};
export default App;
Step 13: Inside App create an array that will hold the options for our dropdown select box. Call it cities.
const cities = [
{name:"Los Angeles", id: 1},
{name:"Philadelphia", id: 2},
{name:"Chicago", id: 3},
{name:"Washington DC", id: 4},
{name:"New York", id: 5},
{name:"San Diego", id: 6},
{name:"Fort Worth", id: 7},
{name:"Houston", id: 8},
{name:"Cleveland", id: 9},
{name:"Pittsburg", id: 10},
{name:"Detroit", id: 11},
{name:"Jacksonville", id: 12},
{name:"Denver", id: 13},
{name:"Columbus", id: 14},
{name:"El Paso", id: 15},
{name:"New Orleans", id: 16},
{name:"Cincinnati", id: 17},
{name:"Nashville", id: 18},
{name:"Miami", id: 19},
{name:"Tampa", id: 20},
{name:"Bakersfield", id: 22},
{name:"Tuscon", id: 23},
{name:"Baltimore", id: 25},
{name:"St Louis", id: 26},
{name:"Las Vegas", id: 27},
{name:"Memphis", id: 28},
{name:"Seatle", id: 29},
{name:"San Fransisco", id: 30},
]
Step 14: Inside the App. Create a constant variable to hold the return value of the useFormik hook.
const formik = useFormik();
Step 15: Add city_name property to the initialValues property.
const formik = useFormik({
initialValues: { city_name: '' },
});
Step 16: To the onSubmit property, make an HTTP request using axios to post the data to an API endpoint.
const formik = useFormik({
initialValues: { city_name: '' },
onSubmit: values => {
axios({
method: 'post',
url: <domain-name> + 'url',
data: {
'city_name': values.city_name},
headers: {'Content-Type': 'application/json'}
}).then(response => {
}).catch(err => {
Alert.alert('An error occurred!', err.message,
[{ text: 'Okay' }]);
})}
});
In the return statement, add a Picker element and the Picker Item.
return(
<View>
<Picker
enabled={true}
mode="dropdown"
placeholder="Select City"
onValueChange={formik.handleChange('city_name')}
selectedValue={formik.values.city_name}
>
{cities.map((item) => {
return
(<Picker.Item
label={item.name.toString()}
value={item.name.toString()}
key={item.id.toString()} />)
})}
</Picker>
</View>
)
Step 17: Next, add the submit button below the picker.
return(
<View>
<Picker
enabled={true}
mode="dropdown"
placeholder="Select City"
onValueChange={formik.handleChange('city_name')}
selectedValue={formik.values.city_name}
>
{cities.map((item) => {
return
(<Picker.Item
label={item.name.toString()}
value={item.name.toString()}
key={item.id.toString()} />)
})}
</Picker>
<Button
mode="contained"
title='submit'
onPress={formik.handleSubmit}
>
Enter
</Button>
</View>
)
The final app.js file should look like this.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { View, Text, Alert} from 'react-native';
import { Button } from 'react-native-paper';
import { useFormik } from 'formik';
import { Picker } from '@react-native-community/picker'
const App = () => {
const cities = [
{name:"Los Angeles", id: 1},
{name:"Philadelphia", id: 2},
{name:"Chicago", id: 3},
{name:"Washington DC", id: 4},
{name:"New York", id: 5},
{name:"San Diego", id: 6},
{name:"Fort Worth", id: 7},
{name:"Houston", id: 8},
{name:"Cleveland", id: 9},
{name:"Pittsburg", id: 10},
{name:"Detroit", id: 11},
{name:"Jacksonville", id: 12},
{name:"Denver", id: 13},
{name:"Columbus", id: 14},
{name:"El Paso", id: 15},
{name:"New Orleans", id: 16},
{name:"Cincinnati", id: 17},
{name:"Nashville", id: 18},
{name:"Miami", id: 19},
{name:"Tampa", id: 20},
{name:"Bakersfield", id: 22},
{name:"Tuscon", id: 23},
{name:"Baltimore", id: 25},
{name:"St Louis", id: 26},
{name:"Las Vegas", id: 27},
{name:"Memphis", id: 28},
{name:"Seatle", id: 29},
{name:"San Fransisco", id: 30},
]
const formik = useFormik({
initialValues: { city_name: '' },
onSubmit: values => {
axios({
method: 'post',
url: <domain-name> + 'url',
data: {
'city_name': values.city_name},
headers: {'Content-Type': 'application/json'}
}).then(response => {
}).catch(err => {
Alert.alert('An error occurred!', err.message,
[{ text: 'Okay' }]);
})}
});
return(
<View>
<Picker
enabled={true}
mode="dropdown"
placeholder="Select City"
onValueChange={formik.handleChange('city_name')}
selectedValue={formik.values.city_name}
>
{cities.map((item) => {
return
(<Picker.Item
label={item.name.toString()}
value={item.name.toString()}
key={item.id.toString()} />)
})}
</Picker>
<Button
mode="contained"
title='submit'
onPress={formik.handleSubmit}
>
Enter
</Button>
</View>
)}
export default App;
Lastly, test the app.
And there we have it. I hope you have found this useful. I will be back with more interesting articles. Thank you for reading.
