How to make second line in text Input while entering text in react native?

Question

i want second line if i entered more then 10 char in textInput. I have done changing text's font size if more then 5 char entered. that is works fine.

But if i enter more then 11 char it should comes down in second line

please help me to clear this

here is my code ...

_onChangeText(text) {
     this.setState({ fontSize: (text.lenght > 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} ]}
     />
   )
}

Answer 1

you can do something like this,

state = {
  fontSize: 80,
  inputValue: ''
}

onChangeText(event) {
  this.setState({
    fontSize: event.nativeEvent.text.length > 6 ? 40 : 80,
    inputValue: event.nativeEvent.text
  });
}

render() {
return (
  < TextInput
    multiline
    onChange={(event) =>
      this.onChangeText(event)
    }
    onContentSizeChange={(event) => {
      this.setState({ height: event.nativeEvent.contentSize.height })
    }}
    value={this.state.inputValue}
    style={{ fontSize: this.state.fontSize, height: Math.max(35, 
    this.state.height) }}
  />
    )
  }
}

set multiline and handle the height of your textinput