Implement Dropdown Select Boxes in React Native with Formik

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.