changing fontSize of TextInput in a smooth way - react-native

Question

I've created a text input where the length of the text entered determines the font size of the text.
The idea is to make something similar to the way Instagram has it: https://media.giphy.com/media/1AgCjLrT0XWhUh4UqY/giphy.gif
Now, this is what I'm able to do, that does things abruptly giving a bad user experience (reason being delay in updating fontSize): https://media.giphy.com/media/p37FFA1RhCuRHxIH2P/giphy.gif
This is my code:
render() {
let updatedFontSize = 32;
if(this.state.inputText.length > 0) {
updatedFontSize = 150 - 8*(this.state.inputText.length);
updatedFontSize = (updatedFontSize < 32 ? 32 : updatedFontSize);
}
return (
<TextInput
style={{ fontSize: updatedFontSize }}
onChangeText={ (inputText) => { this.setState({inputText}) } }
value={this.state.inputText}
multiline={true}
maxLength={25}
/>
)
}

Answer 1

Let's think about how to approach this.
The requirements are:
The effect should only happen with at least 3 characters in the text field
There's a maximum and minimum size that the font size can reach
The font should get smaller if the new text incoming is longer than the previous value.
The font should get larger if the new text incoming is shorter than the previous value.
Given these requirements based on the gif, we can come up with a clean solution.
changeText = value => {
if (value.length > 3) {
if (
this.state.value.length < value.length &&
this.state.fontSize > MIN_FONT_SIZE
) {
this.setState(({ fontSize }) => ({ fontSize: fontSize - INCREMENT, value }));
} else if (
this.state.value.length > value.length &&
this.state.fontSize < MAX_FONT_SIZE
) {
this.setState(({ fontSize }) => ({ fontSize: fontSize + INCREMENT, value }));
}
}
};
Here's the fully working example, https://snack.expo.io/#roach_iam/increasing-fontsize-textinput.