Create a form in react native

Hello devs! Since I’ve seen you really liked the form in reactJS, I decided to do the same thing in react native. Why did I choose to make a tutorial on a form? Because it’s the most basic thing but at the same time the most used thing! You are going to have more than one form per project, for sure! Let’s see how we can create a form in react native.

I usually prefer the inputs and buttons of react-native-elements, but if you like the ones from react-native, the steps are the same. If, like me, you are going to use react-native-elements, you have to install it first, otherwise you can go on with the tutorial!

Let’s start by adding the useState to save the details of the form. This form will ask the user for a name, surname and email.

const [name, setName] = useState("");
const [surname, setSurname] = useState("")
const [email, setEmail] = useState("")

Now, inside the the return we are going to add three inputs and one button:

<Input
  placeholder='Name...'
  onChangeText = {(name)=>setName(name)}
/>

<Input
  placeholder='Surname...'
  onChangeText = {(surname)=> setSurname(surname)}
/>

<Input
  placeholder='Email...'
  onChangeText = {(email)=> setEmail(email)}
/>


<Button
  title="Save details"
  onPress={()=>handlePress()}
/>

As you can see, this is the content of the return. When the button is pressed, a function is called. We haven’t created this function yet, let’s do it now.

const handlePress = () =>{
  //save the details here or pass them to another component
  console.log("You added the details")
}

That is the end of this tutorial. I hope you can now create a form in react native without problems! Comment this article for suggestions.

Check other posts