While lineHeight > fontsize, applying mask will cause the lineHeight change immediately on Android platform

[gaoyikeshuer]

Description

The code is like this, I also have created a repository to reproduce this bug.

:

import React from 'react';
import {
  SafeAreaView,
} from 'react-native';
import { TextInput } from 'react-native';
import { useState } from 'react';

function App(): JSX.Element {
  const sanitizeCommonInput = (name: string) =>
  name
    .replace(
      /[^a-zA-Z0-9 /\-?:().,'+]/gi,
     ''
    );

  const [sanitized, setSanitized] = useState("")

  return (
    <SafeAreaView>
    <TextInput
    textAlignVertical='top'
    style={{borderWidth:1, marginTop:100, marginHorizontal:30, fontSize:16, lineHeight:40, minHeight:200}}
    onChangeText={v => {
    sanitizeCommonInput(v)
    setSanitized(()=> sanitizeCommonInput(v))
    }}
    multiline
    value={sanitized}
       />
    </SafeAreaView>
  );
}

export default App;

React Native Version

0.72.4

Output of npx react-native info

System: OS: macOS 13.0 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 93.48 MB / 16.00 GB Shell: version: 5.8.1 path: /bin/zsh Binaries: Node: version: 16.10.0 path: ~/.nvm/versions/node/v16.10.0/bin/node Yarn: version: 1.22.19 path: ~/.nvm/versions/node/v16.10.0/bin/yarn npm: version: 7.24.0 path: ~/.nvm/versions/node/v16.10.0/bin/npm Watchman: version: 2023.02.27.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.13.0 path: /Users/mac/.rvm/rubies/ruby-2.7.5/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 22.1 - iOS 16.1 - macOS 13.0 - tvOS 16.1 - watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: version: 14.1/14B47b path: /usr/bin/xcodebuild Languages: Java: version: 18.0.2.1 path: /usr/bin/javac Ruby: version: 2.7.5 path: /Users/mac/.rvm/rubies/ruby-2.7.5/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.4 wanted: 0.72.4 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Steps to reproduce

1. according to the code, add a sanitizer function (which aims to delete the unwanted character in TextInput). (e.g. don't allow user to input special character by using replace )
2. set the style of TextInput like fontSize:16, lineHeight: 40.
3. input Special character at second line
4. The lineHeight will suddenly shrink.

Snack, screenshot, or link to a repository

repository

The video:

This issue only exists on Android platform

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.5. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[NickGerleman]

Are you by chance testing this on a Samsung device?

[s5unanow]

I experience the same issue on Xiaomi device. 😢

https://github.com/facebook/react-native/assets/58434753/8d4564b0-c758-403b-a2e4-7c3d9e1726ce

[gaoyikeshuer]

Are you by chance testing this on a Samsung device?

Thank you for your reply! Unfortunately I don't have a Samsung device (could emulator be counted?), but I've tested it on Xiaomi, and the result is the same as @s5unanow 's result.

[s5unanow]

I've tested in on Samsung A32 and it seems even worse 😅 (just pay attention on changing caret size at the beginning).

https://github.com/facebook/react-native/assets/58434753/fea97a80-a9f5-48af-91b2-1a8655514575

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.