react-nativefont-sizetextinput

how to change font size in TextInput text when more then 6 char entered in react native?


I want to change the font size of the text that we are entering in TextInput only when the charLength more than 6.

The actual font size is 80px, when changing it should be 40 or something like less than it.


Solution

  • You can give conditional style to the TextInput component.

    Example

    _onChangeText(text) {
      this.setState({ fontSize: text.length > 6 ? 40 : 80 });
    }
    
    render() {
      return (
        // Giving an array of objects to style property can help you to define a -- default value
        <TextInput 
          onChangeText={this._onChangeText.bind(this)}
          style={[ {fontSize: 80}, {fontSize: this.state.fontSize} ]}
        />
      )
    }