Expandible TextInput to maximum number of lines in react-native

react native textinput
react-native textinput numberoflines not working
limit number of lines in text react native
react native textinput multiline height
react native text max lines
react-native multiline text input
react-native-autogrow-textinput npm
multiple textinput react native

I am trying to make a TextInput where the user can input texts up to a maximum of say four lines. The user can continue inputting text as the textinput now auto scrolls.

const InputNoLabel = ({ value, onChangeText, placeholder, 
secureTextEntry, onContentSizeChange, height }) => {
const { inputStyle, containerStyle } = styles;
 return (
  <View style={containerStyle}>
  <TextInput
    underlineColorAndroid='transparent'
    secureTextEntry={secureTextEntry}
    placeholder={placeholder}
    autoCorrect={false}
    style={[inputStyle, { height }]} //height: height
    value={value}
    onChangeText={onChangeText}
    onContentSizeChange={onContentSizeChange}
    multiline={true}
    editable={true}
  />
 </View>
 );
};

onContentSizeChange I manually change the height of my container passing a new height but when I reach my maximum height, any more text I type is simply hidden.

 <View style={rowContainer}>
     <InputNoLabel 
     label="Enter Text Here"
     placeholder="Name"
     onChangeText={this.onTextChange.bind(this)}
      /* value={this.state.value} */
      height={this.state.height}
      onContentSizeChange={this.onContentSizeChange.bind(this)}
     />
  </View >

 onContentSizeChange() {
    this.setState({
         height: Math.max(48, this.state.height + 16) 
     });
 }

How do I get the TextInput to resize to a maximum number of lines for input but also but also allow for more input but this time round only scrolling the text

I see this question has been around a while ago but it doesn't actually have a good answer, this is a simple workaround that you can use!

<TextInput
  multiline
  style={{ maxHeight: 200 }} // => The Magic
/>

Check this simple snack I made: snack.expo.io/@abranhe/stackoverflow-46851975

The code... ?

import React from 'react';
import { View, StyleSheet, TextInput as Input } from 'react-native';

export default () => (
  <View style={styles.container}>
    <Input
      autoFocus
      multiline
      style={styles.input}
      placeholder={'Enter your text!'}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    paddingTop: 100,
  },
  input: {
    borderRadius: 20,
    minHeight: 40,
    maxHeight: 200,
    margin: 20,
    padding: 20,
    borderWidth: 1,
  },
});

If you want to create something like a messaging app you can use this package github.com/ardaogulcan/react-native-keyboard-accessory and reuse the input.

Check the demo: snack.expo.io/@abranhe/input-keyword-accessory

Source code:

import React, { useState } from 'react';
import { KeyboardAccessoryView } from 'react-native-keyboard-accessory';
import { View, Button, TextInput, StyleSheet, ScrollView } from 'react-native';

export default () => {
  const [focus, setFocus] = useState(false);

  const renderInput = () => (
    <KeyboardAccessoryView alwaysVisible>
      <TextInput
        onBlur={() => setFocus(false)}
        autoFocus
        multiline
        style={styles.input}
        placeholder={'Enter your text!'}
      />
    </KeyboardAccessoryView>
  );

  return (
    <View style={styles.container}>
      <ScrollView>
        <Button title="Send a message" onPress={() => setFocus(true)} />
      </ScrollView>
      {focus ? renderInput() : <View />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    paddingTop: 30,
  },
  input: {
    margin: 5,
    minHeight: 40,
    maxHeight: 100,
  },
});

React Native to limit lines in TextInput, If set multiline as true, React Native will accept unlimited lines in TextInput, the maximum number of characters, so how to set maximum lines on TextInput? automatic expanding of a multi-line text input according to the number of lines. React Native TextInput is a basic component that allows the user to enter text, number, password, etc. It has an onChangeText prop which requires a function that will be called every time when the text changes, and it also has a value prop that can set a default value into it.

I have very easy solution with less code and cross-platform approach.

<View style={{ maxHeight: 100 }}> // 100 is sufficient for me
  <TextInput
     placeholder="Enter here"
     multiline={true}
     textAlignVertical="top"
  />
</View>

Expo live demo here

Trying to make an expandable Text input and failing miserably, //277.5 is the width of one line of text in my input, so this Math.floor gives me a number of lines I honestly have no idea how to do this, is there a way to change the value that the If you want to limit it to a maximum height just do {{ maxHeight: 200 }} something Why do you need Unit Testing in React Native application? TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same.

After some research, I have realised that this is a challenge of react on the Android side. I picked up component that can auto-scroll on android. You can clone the component here MultilineTextInput. Do some more styling to the textInput as you may wish.

TextInput � React Native, If true , the text input can be multiple lines. The default value is false . Type, Required. bool, No. onBlur. maxLength={} prop is used to set restriction on TextInput, that user cannot enter more than defined characters.MaxLength is Validation that limits maximum number of character entered inside TextInput.Set TextInput maxLength Validation inside iOS Android app,Show alert dialog when enter value reaches defined max Length.

wix/react-native-autogrow-textinput, Contribute to wix/react-native-autogrow-textinput development by creating an automatic expanding of a multi-line text input according to the number of lines. To Make a React Native App. Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to

TextInput maximum line size � Issue #773 � callstack/react-native , TextInput maximum line size not able to configure There is no parameter to control the size of multiline textbox there should be maximum no of� So in this tutorial we would going to create a react native app to accept Get Only Numeric Value From TextInput by opening Numeric-Number Keypad on TextInput selection using keyboardType={‘numeric’} prop. Contents in this project Get Only Numeric Value From TextInput Example : 1.

React Native auto growing text input | by Manoj Singh Negi, Firstly Let's import React Native default TextInput to our code. Inside our component state we will define two properties value & height. value to� To Make a React Native App. Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to

Comments
  • Great! Solved my issue!
  • The react team solved the problem, now you can use TextInput pass it numberOfLines you want as a prop, pass it BlurOnSubmit as false and Multiline as true