singh100ful

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 {

singh100ful

<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,

singh100ful

const options = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

ImagePicker.showImagePicker(options, (response) => {
  if (response.uri) {

singh100ful

<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,

singh100ful

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.app">
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  
  <application
      android:name=".MainApplication"
      ...>
    ...
  </application>

singh100ful

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>

singh100ful

import React, {Component} from 'react';
import {Formik} from 'formik';
import * as yup from 'yup';
import {
  View,
  TextInput,
  Text,
  Button
} from 'react-native';

singh100ful

handleSubmit = (values, {props = this.props}) => {
  let data = {
    email: values.email,
    password: values.password,
  };
  return fetch(baseUrl, {
    method: "post",
    headers: new Headers({
      Accept: "application/json",
      'Content-Type': 'application/json',

singh100ful

<Formik initialValues={{ ... }} onSubmit={this.handleSubmit}>
  {(formProps) => (
    <View>
      ...
      <Button
        title="Log In"
        disabled={!formProps.isValid}
        onPress={formProps.handleSubmit}
      />
    </View>

singh100ful

<TextInput 
 ...
 onBlur={() => formProps.setFieldTouched('email')}
/>
{formProps.touched.email && formProps.errors.email && (
  <Text
    style={{
      fontSize: 16,
      color: 'red',
      paddingHorizontal: 10,