Text Cut Off on Android 13

[im-minsung]

Description

React Native Version

0.71.4

Output of npx react-native info

System:
OS: macOS 12.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 25.00 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
Watchman: 2022.09.26.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9014738
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.4 => 0.71.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Android SDK now using version is 33.

Steps to reproduce

Android 12 works fine.
However, this phenomenon occurs from Android 13.

The height doesn't cut when the line is changed.

If you enter special characters or certain languages on a single line, the height is cut off.

For example, special characters are cut off in height using ༒ or ༺.

Special Character Site url: https://unicodes.jessetane.com/%E0%BC%92

I tried to fix the height with text onlayout, but it didn't work out.

Snack, code example, screenshot, or link to a repository

import React, { memo } from "react"
import { Text, View } from "react-native"

const AppContainer = memo(() => {
    return (
        <View style={{ flex: 1, justifyContent: "center" }}>
            <Text>ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</Text>
            <Text>{"\n"}</Text>
            <Text>かお 얼굴 さる 원숭이 たこ</Text>
            <Text>{"\n"}</Text>
            <Text>かお 얼굴 さる 원숭이 たこ༒</Text>
            <Text>{"\n"}</Text>
            <Text>かお 얼굴 さる 원숭이 たこ༺</Text>
            <Text>{"\n"}</Text>
            <Text>かお 얼굴 さる 원숭이 たこかお 얼굴 さる 원숭이 たこ かお 얼굴 ༒</Text>
        </View>
    )
})

export default AppContainer

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available. 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.

[aziyatali]

@im-minsung Please provide your device info. If its emulator then what kind of emulator. There has been duplicate issue in case it is one such as this: https://stackoverflow.com/questions/54750503/text-is-getting-cut-off-in-android-for-react-native

[im-minsung]

@im-minsung Please provide your device info. If its emulator then what kind of emulator. There has been duplicate issue in case it is one such as this: https://stackoverflow.com/questions/54750503/text-is-getting-cut-off-in-android-for-react-native

༺ Thank you for apply!! I'll check your url right now ༻

I tested only with several Samsung devices.
It happens when it is Android 13 version on Samsung devices.
The writing is not cut off in version 12.

[jcdhlzq]

That the Layout instance is different between yoga and native may be responsible for such a problem. I've researched serveral cases and found that the width from BoringMetrics may cause that TextView makes a new Layout instance.
However, the new Layout instance has some differences from that in yoga. So, unify the measure method maybe a solution. I am still verifying that.

[im-minsung]

That the Layout instance is different between yoga and native may be responsible for such a problem. I've researched serveral cases and found that the width from BoringMetrics may cause that TextView makes a new Layout instance. However, the new Layout instance has some differences from that in yoga. So, unify the measure method maybe a resolution. I am still verifying that.

Thank you for apply.

I've been searching for a few days. Unlike other words, if a special word is included, the height does not seem to be as high as the descender value of the onTextLayout value in that word. Is this part related to padding top you modified?

[jcdhlzq]

I'm trying to find a solution in native, namely YogaMeasureFunction. As you mentioned above, the onTextLayout has something wrong. The callback is releated Layout instance in YogaMeasureFunction. And that callback also has something abnormal when the text is RTL string like arabic.

By the way, in your case, is it normal in native view on Android 13?

[im-minsung]

I'm trying to find a solution in native, namely YogaMeasureFunction. As you mentioned above, the onTextLayout has something wrong. The callback is releated Layout instance in YogaMeasureFunction. And that callback also has something abnormal when the text is RTL string like arabic.

By the way, in your case, is it normal in native view on Android 13?

I've tested on native, and the words are cut equally...

I will try to solve it using padding and line height. If the line of text exceeds 2 lines, I will delete the style and apply it only when it is 1 line.
This method is not perfect, but I don't have time

If i succeed, I'll comment the code.

[jcdhlzq]

I'm trying to find a solution in native, namely YogaMeasureFunction. As you mentioned above, the onTextLayout has something wrong. The callback is releated Layout instance in YogaMeasureFunction. And that callback also has something abnormal when the text is RTL string like arabic.
By the way, in your case, is it normal in native view on Android 13?

I've tested on native, and the words are cut equally...

I will try to solve it using padding and line height. If the line of text exceeds 2 lines, I will delete the style and apply it only when it is 1 line. This method is not perfect, but I don't have time

If i succeed, I'll comment the code.

Equally on native TextVew ? So weird! I've tested your demo on Pixel5 Android13, no any problems.

Expect your reply~

[im-minsung]

I checked and found that if you use 'wrapcontent' in native, it won't cut. So I tried to find an option similar to 'wrapcontent' on RN but it was hard to find :(

Anyway, below is the code I worked on.

When I looked for a value similar to the previous one, I found 1.38.

I replaced the existing < text /> with the following components.

If you find a better way, I would appreciate it if you could reply :)

export default memo(({ style, numberOfLines, children }: IProps): React.ReactElement => {
    const fontSize = style?.fontSize ? style?.fontSize : 14
    const [lines, setLines] = useState(0)

    const onTextLayout = useCallback(
        ({
            nativeEvent: {
                lines: { length }
            }
        }: {
            nativeEvent: any
        }) => {
            setLines(length)
        },
        []
    )

    const customTextStyle = useCallback(() => {
        if (Platform.OS === "ios") return
        if (lines === 1) {
            return { lineHeight: fontSize * 1.38, paddingTop: fontSize - fontSize * 1.38 }
        }
    }, [])

    return (
        <Text style={[style, { alignSelf: "flex-start", ...customTextStyle() }]} onTextLayout={onTextLayout} numberOfLines={numberOfLines}>
            {children}
        </Text>
    )
})

[jcdhlzq]

I've created a PR for fixing such text cutoff phenomenon #37271. I've tested on many devices including some Android 13 devices. But I do not get any Samsung device.
Would you like to have a test for this problem? It will be very nice if you have a try and let me know the result.

Remember to try it in non-Fabric mode! @im-minsung

[jimforever]

I have a Samsung S22 (Android 13) mobile phone and a Samsung A51 (Android 12) mobile phone. The fonts on the S22 mobile phone are intercepted, but the fonts on the A51 mobile phone are not intercepted. So I think this problem is likely to only appear on Android 13 Samsung phones. Try setting fontfamily:“ ” or fontWeight:'normal', the problem of characters being intercepted is gone

[github-actions]

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]

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

[fabOnReact]

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot