Create Floating Label Input React Native Easy Way

Create floating label input can be done with the animated module in react native. In this article, we are going to move placeholder to top on focus on the input in react native. We are going to use react native animated module for our react native text input placeholder animation. This will interact in the same as on android and IOS devices. We are going to make this a reusable component so that we can access this component anywhere in our react native project and we can customize the input according to the requirement by passing the props.

So here is an example that we are going to build;

Create floating label input

let’s see how we are going to create Floating Label Input. First, I will share the whole code snippet and explain step by step.

Component Behaviour

Here as you can see we have made this as react reusable components so that we can customize styles.

We have to declare onChangeText for the text input when the input value changes. Also, we have declared a new animated value which is originally 0. So that we can get the current animated value when animating. We also added a bottom border colour animation as well when the animated value changes. Also for animating floating label input we use Animated.Text components from the animated module.

Let’s look at the view implementation

Here we have added text input and declared onBlur and onFocus functions. So when text input focuses we call our animated function which is given below.

onFocus text input

When the text input focuses we are animating the value which is 0 to 1 with the Animated.timing. This accepts a couple of parameters.

• duration: Length of animation (milliseconds). Default 500.
• easing: Easing function to define the curve. Default is Easing.inOut(Easing.ease).
• delay: Start the animation after delay (milliseconds). Default 0.
• isInteraction: Whether or not this animation creates an “interaction handle” on the InteractionManager. Default true.
• useNativeDriver: Uses the native driver when true. Required.

You can find a visualization of some common easing functions at http://easings.net/.

Here we have set the useNativeDriver to false as it will not support font size interpolations and colour interpolation. So we have keep it to false.

onBlur text input

When the text input blur we are checking if the text input is already filled. If so we are not animating the floating label back to its original position. If it is not filled we triggered the animation back to its original position by adding the toValue to 0.

Now let’s see how the styles change when the animated value changes.

Styling with the animated module in react native

Animating the bottom border colour

Since we are using useRef we have to use the current value. It can be accessed by animatedValue.current. First, let’s see how we can animate the bottom border colour. We can use interpolate to do that. An interpolation can be applied to each property first. An interpolation converts the input and output ranges. React native has this nice feature to interpolate so that we can have our animations run smoothly.

For this interpolation, we can give an input range and output range. when the animated value changes from 0 to 1 we change the colour from '#c2c2c2' to '#444444'.

Animating floating label

Then let’s see how the floating label animations work.

Here there are three things that we are going to do here.

• Navigate the floating label to the Y direction
• Change the font size when the label moves to the Y direction
• Change the font colour when the label moves to the Y direction

To translate the label to the Y direction we use the transform style so that we can interpolate the values. Here when the animated value changes from 0 to 1 the output value change from 22 to -4. (we add these values according to the above example. You can change these values anytime). And as the third parameter for interpolate function, we have given the extrapolate as clamp. Here is a nice article where you can get more information about extrapolate.

To change the font size when the animated value changes we do the same as animating the label. The only difference is we have given the output range as [14, 12]. When animated values change from 0 to 1 the font size will change from 14 to 12 periodically.

For the font colour also when the animated values change from 0 to 1 the font colour will change from '#c2c2c2' to '#444444'.

That’s it pretty much for the floating label-input react native. I will attach all my projects here with the GitHub link. you can refer me anytime.

https://github.com/pasindu1/AnimateSwipeButton. This contains all the projects that I have been working on so far.

If you have any questions, or comments or think that there is a better way to implement this — feel free to comment here or reach out at [email protected]. Thank you.