Skip to content

Instantly share code, notes, and snippets.

@singh100ful
Created May 30, 2020 22:30
Show Gist options
  • Save singh100ful/c12472792b9d6a8a05ce4c7c33fde0a4 to your computer and use it in GitHub Desktop.
Save singh100ful/c12472792b9d6a8a05ce4c7c33fde0a4 to your computer and use it in GitHub Desktop.
React Native Image Picker Form Using Formik
import React, {Component} from 'react';
import {Formik} from 'formik';
import ImagePicker from 'react-native-image-picker';
import {
View,
Text,
TouchableOpacity
} from 'react-native';
export deafault class App extends Component {
handleSubmit = (values) => {
let data = new FormData();
data.append("image1", values.photo1);
return fetch(baseUrl, {
method: "post",
headers: new Headers({
Accept: "application/json",
Authorization: "Bearer " + token,
}),
body: data,
})
.then((response) => response.json())
.catch((error) => console.log(error));
};
render(){
return(
<Formik initialValues={{ image1: '' }} onSubmit={this.handleSubmit}>
{(formProps) => (
<View>
<View style={{flexDirection: 'row'}}>
<Text>Image 1:</Text>
<TouchableOpacity
activeOpacity={0.5}
style={{
backgroundColor: '#04b040',
borderRadius: 15,
paddingHorizontal: 15,
paddingVertical: 5,
alignItems: 'center',
shadowColor: '#E67E22',
shadowOpacity: 0.8,
elevation: 8
}}
onPress={() => {
ImagePicker.showImagePicker(options, (response) => {
if (response.uri) {
let data = {
name: response.fileName,
type: response.type,
uri:
Platform.OS === 'android'
? response.uri
: response.uri.replace('file://', ''),
};
formProps.setFieldValue('image1', data);
}
});
}}
>
<Text>Open</Text>
</TouchableOpacity>
</View>
<Button
title="Log In"
onPress={formProps.handleSubmit}
/>
</View>
)}
</Formik>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment