Skip to content

Multiline TextInputs - numberOfLines property and lineHeight style don't work #20681

Closed
@kyle-ssg

Description

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
      Memory: 29.36 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 9.8.0 - ~/.nvm/versions/node/v9.8.0/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v9.8.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3
        API Levels: 23, 24, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1 
      react-native: 0.56.0 => 0.56.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-rename: 2.2.2

Description

The properties mentioned don't seem to have any affect on TextInputs, not only that but I also get a weird initial height which changes as soon as I enter a key. There are issues with this on both iOS and Android but they are slightly different.

iOS

Android

Reproducible Demo

react-native init reproduce

Replace App.js with:

 /**
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {TextInput} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
                <TextInput
                    multiline={true}
                    numberOfLines={2}
                    editable={true}
                    style={{
                        margin:50,
                        lineHeight: 100,
                        borderWidth: 1,
                        marginBottom: 10
                    }}
                />
        );
    }
}

Metadata

Assignees

No one assigned

    Labels

    Component: TextInputRelated to the TextInput component.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions