Illustration by Udhaya Chandran

React Native Custom Form Handle With React Hook

Karthik Balasubramanian
May 16 · 2 min read

Hey folks. Every application will have forms to handle and every form has its own data. So how can we make “Handling of Forms” simple ??


Setting up React Native Project.

(Skip to next section, if already done..)

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

npx react-native init FormHandle

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

return {
<>
<View>
</View>
<>
}

You have successfully finished creating a project.


Let us start building the form now.

Lets quickly get some code inside these empty files.

The Register Form and Form Field components would look something like this respectively.

RegisterForm.js

FormField.js

formData.js

The formdata.js file is where the heart of logic resides.

You can see that we first create a hook that will accept an Object which will set the initial form data.

In RegisterForm.js file,
const [
formValues,
handleFormValueChange,
setFormValues ] = formData({
username: '',
email: '',
password: ''
})

We then use the function handleFormValueChange which is given by the hook to manipulate the form data. We pass the formKey i.e. is the object key stored in the formData hook.

<TextInput
...otherProps
onChange={
(event) =>
props.handleFormValueChange(
props.formKey,
event.nativeEvent.text
)
}
/>

A repo can be found here.

This is Karthik representing Timeless.

If you find this blog post helpful, share it with a friend.

If you find any difficulties please feel free to add your comments.

practicaldesign

Practical Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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