React native contact form with cropper

Introduction

React Native is a popular framework for building native mobile applications using JavaScript and React. One of the most common requirements in any mobile application is to capture user input and send it to a server for processing. A contact form is a great way to collect user information such as name, email, and phone number. In this tutorial, we will learn how to build a contact form with a cropper in a React Native application.

A cropper is a powerful tool that allows users to crop and resize images. In our contact form, we will use a cropper to allow users to upload a profile picture or logo. We will be using the React Native Camera Roll library to handle the image selection and cropping.

Setting up the Project

To get started, create a new React Native project by running the following command:

npx react-native init ContactFormWithCropper

Next, navigate to the project directory and install the required dependencies:

cd ContactFormWithCropper
npm install react-native-camera-roll

Creating the Contact Form Component

Create a new file called ContactForm.js and add the following code:

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { CameraRoll } from 'react-native-camera-roll';

const ContactForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [image, setImage] = useState(null);

  const handleNameChange = (text) => {
    setName(text);
  };

  const handleEmailChange = (text) => {
    setEmail(text);
  };

  const handlePhoneChange = (text) => {
    setPhone(text);
  };

  const handleImageChange = (image) => {
    setImage(image);
  };

  const handleSubmit = () => {
    // Send the form data to the server
  };

  return (
    <View>
      <Text>Name:</Text>
      <TextInput
        value={name}
        onChangeText={(text) => handleNameChange(text)}
        placeholder="Enter your name"
      />
      <Text>Email:</Text>
      <TextInput
        value={email}
        onChangeText={(text) => handleEmailChange(text)}
        placeholder="Enter your email"
        keyboardType="email-address"
      />
      <Text>Phone:</Text>
      <TextInput
        value={phone}
        onChangeText={(text) => handlePhoneChange(text)}
        placeholder="Enter your phone number"
        keyboardType="phone-pad"
      />
      <Text>Profile Picture:</Text>
      <CameraRoll
        onSelection={(image) => handleImageChange(image)}
        types={['photo']}
      />
      {image && (
        <View>
          <Text>Cropped Image:</Text>
          <Image source={{ uri: image.uri }} resizeMode="cover" />
        </View>
      )}
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default ContactForm;

In this component, we are using the useState hook to store the user input in the name, email, and phone state variables. We are also using the useState hook to store the selected image in the image state variable.

We are using the CameraRoll component from the React Native Camera Roll library to allow users to select an image from their device's camera roll. When an image is selected, we are updating the image state variable and displaying the cropped image using the Image component.

Implementing the Cropper

To implement the cropper, we need to add the React Native Cropper library to our project. Run the following command:

npm install react-native-cropper

Next, add the following code to the ContactForm.js file:

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { CameraRoll } from 'react-native-camera-roll';
import { Cropper } from 'react-native-cropper';

const ContactForm = () => {
  //...

  const handleImageChange = (image) => {
    setImage(image);
  };

  const handleCrop = (cropData) => {
    const croppedImage = { uri: `data:${cropData.mime};base64,${cropData.data}` };
    setImage(croppedImage);
  };

  return (
    //...
    <CameraRoll
      onSelection={(image) => handleImageChange(image)}
      types={['photo']}
    >
      {image && (
        <View>
          <Text>Cropped Image:</Text>
          <Cropper
            source={{ uri: image.uri }}
            aspect={1 / 1}
            aspectType="fixed"
            cropperViewStyle={{
              borderColor: 'red',
              borderWidth: 1,
            }}
            style={{ width: 300, height: 300 }}
            onCrop={handleCrop}
          />
        </View>
      )}
    </CameraRoll>
  );
};

In this code, we are using the Cropper component from the React Native Cropper library to crop the selected image. We are setting the source property to the selected image and the aspect property to 1:1. We are also adding some styles to the cropper view.

When the user crops the image, we are calling the handleCrop function with the cropped image data. We are then updating the image state variable with the cropped image.

Conclusion

In this tutorial, we have learned how to build a contact form with a cropper in a React Native application. We have used the React Native Camera Roll library to allow users to select an image from their device's camera roll and the React Native Cropper library to crop the selected image.

You can customize the appearance and behavior of the contact form and cropper by using various props and styles available in the React Native Cropper library.

I hope this tutorial has been helpful in getting you started with building a contact form with a cropper in your React Native application. Happy coding!