Am I misunderstanding React Native's TextInput multiline and numberOfLines properties?-CodePudding

I am trying to create a TextInput that would have a height of 4 rows of text and would not grow over that height if there are 5 or more rows of text, and instead it would be scrollable. I assumed that using TextInput's multiline and numberOfLines properties like this would work, but alas when I reach row 5, the textBox just becomes bigger.

<TextInput
    placeholder="Take note of anything contributing to your mood"
    maxLength={250}
    multiline={true}
    numberOfLines={4}
/>

CodePudding user response：

You can give lineHeight and maxHeight property to TextInput style i.e maxHeight should be in proportion to lineHeight,

if lineHeight is 20, maxHeight should be 100 if you want to restrict text box for 4 lines

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless");

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        multiline={true}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    maxHeight: 100,
    margin: 12,
    borderWidth: 1,
    lineHeight: 20,
  },
});

CodePudding user response：

I believe you need to include the ellipsizeMode='tail' in your properties. As per their documentation, when numberOfLines is set, this prop defines how the text will be truncated. numberOfLines must be set in conjunction with this prop. Example from this article,

<View style={{width: 200}}><Text ellipsizeMode='tail' numberOfLines={1}></View>