Image Picker form in React Native using expo and Formik library

Who is this article for?

What will we make?

What is Formik?

What does expo ImagePicker do?

The Example:

Setup

npm install formik — save
# or
yarn add formik
npm install react-native-paper — save
# or
yarn add react-native-paper

Imports

// ImagePicker component is needed to do the actual import
import { ImagePicker } from ‘expo’;
// Formik imported to keep track of the forms state
import { Formik } from ‘formik’;
// Optional UI components, out of the box, good looking components
import { Button, TextInput } from ‘react-native-paper’;
// Optional UI components, used to show/style the output
import { Alert, Keyboard, Image, View, StyleSheet } from ‘react-native’;

Using Formik:

<Formik initialValues={initialValues} onSubmit={this.onSubmit.bind(this)}>
{(props) => (<Render form components>)}
</Formik>

Using the text input:

<TextInput
onChangeText={handleChange(‘title’)}
value={values.title}
label=”Title”
placeholder=”e.g My Awesome Selfie”/>

Using the Image picker:

async _pickImage (handleChange) {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3]
})
console.log(result)
if (!result.cancelled) {
handleChange(result.uri)
}
}
<Button
icon=”add-a-photo”
mode=”contained”
style={styles.button}
onPress={() => {this._pickImage(handleChange(‘image’))}}>
Pick an image from camera roll
</Button>
{values.image && values.image.length > 0 ?
<Image source={{ uri: values.image }} style={{ width: 200, height: 200 }} /> : null}
<Button onPress={handleSubmit} style={styles.button}>Submit</Button>

--

--

--

My name means growth or to make progress, so that’s what I’m into. Currently building learnly. Employed by Amazon.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Sling.js — Minimalist JavaScript framework for SPAs

Relation Between HTML, CSS, JavaScript

Comparing performance of various loops in javascript

Algorithms 101: TwoSum in JavaScript

How to Create Date Pickers with Vuetify

Auralia JS vs. Angular

car driving at night under sky lit up by the Aurora Borealis

Choosing the right Node.js Framework: Next, Nuxt, Nest?

Authentication Handling in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Zaid Qureshi

Zaid Qureshi

My name means growth or to make progress, so that’s what I’m into. Currently building learnly. Employed by Amazon.

More from Medium

React Native

Top Audio Player Library for React Native Apps In 2022

Learn redux toolkit beginner to advance step by step

Installing Redux in a React Native App(Expo Based)