One of the most important component of any mobile or web app is input field. It is one the most used way of getting input from user. Here we’ll together make a floating title text input reusable component. At the end it will look like this,
So let’s dig in.
Creating a fresh react native project
Open up your terminal (cmd in my case) and create new react native project for say floating_title_text_input by using following command
react-native init floating_title_text_input
After creating new project, open the created project in your favourite IDE (VS Code in my case). Your folder structure should look like this,
Replace everything in App.js with following,
Later we’ll add our floating title component to App.js. But before making the component, let’s first do a test run (android in my case).
To build and run project, run following command in terminal,
react-native run-android
It should look like this:
Now let’s build the thing you all came here for, floating title text input.
Floating Title Text Input Field Component
Create a new file in the project by name floating_title_text_input_field.js.
Trick here is to change Text (title) position when Text Input field is focused or blurred.
As you can see in the program, the Text (title) should be up or move upward in following cases:
1- when Text Input field is focused
2- when Text Input field has some value
In all other cases, Text (title) should be at it’s normal position to look like a placeholder.
I’ve put some animations to make Text(title) movement smooth.
Using FloatingTitleTextInputField component|
Let’s use FloatingTitleTextInputField resusable component in App.js.
In App.js, FloatingTitleTextInputField is first imported. As you can see above, I’ve used FloatingTitleTextInputField two times, one for entering first name and other for entering last name. Each FloatingTitleTextInputField has six props passed to it, out of which 4 are required and two are optional as you can see in FloatingTitleTextInputField component prop type checking.
These four props are:
1- attrName: state variable name where value of input is stored.
2- title: floating Text(title)
3- value: value to be shown in input field
4- updateMasterState: function to update value upon entering in input field.
5- keyboardType: to set keyboard type like numeric, number-pad etc. By default it is ‘default’.
6- otherTextInputProps: here you pass props other than above for TextInput like maxLength, autoFocus, numberOfLines etc. By default no additional props are passed, it is an empty object {}.
updateMasterState function receives two arguments, one attrName and other the updated value which can be used to update the value stored.
With this, all is setup and ready to run. So now let’s do the fun part. Run the project if not already running. It should look like this.
Doesn’t it look amazing. I hope you like this.