react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Published 20 hours ago • verified publisher icon facebook

[Android] Adding Nested Text support for textAlignVertical

Open fabOnReact opened this issue 2 years ago • 43 comments

Summary

fixes https://github.com/facebook/react-native/issues/30375 https://github.com/facebook/react-native/issues/30375#issuecomment-1369842920

Aligns the content of the TextView vertically using the Android gravity property, which applies an effect similar to CSS flexbox (more info).


https://developer.android.com/reference/android/view/Gravity#TOP

Gravity Top Push the object to the top of its container, not changing its size.

The CSS property aligns the text relative to the lineHeight (comment).


https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box. The vertical-align property can be used in two contexts (source): To vertically align an inline element's box inside its containing line box.

The prop introduced with PR #30375 aligns the Nested Text relative to the lineHeight but does not support ReactAbsoluteSizeSpan and TextInlineViewPlaceholderSpan (more info). The functionalities will be part of the upcoming PRs:

  • A separate PR to fix the issues with inline images caused by the getSize method of TextInlineViewPlaceholderSpan.

A detailed list of the tasks for this PR is included in https://www.icloud.com/numbers/09a5ZgGu3yOkMgRBzEl6B3QsA#Tasks

Changelog

[ANDROID] [ADDED] - Adding Nested Text support for textAlignVertical

Test Plan

https://github.com/facebook/react-native/pull/35704#issuecomment-1382247565

Previous Tests

https://github.com/facebook/react-native/pull/35704#issuecomment-1366556154 https://github.com/facebook/react-native/pull/35704#issuecomment-1372783339

fabOnReact avatar Dec 22 '22 18:12 fabOnReact

P type task
1 test Verify issue still reproduce on the main branch
2 feature Use SuperScriptSpan to vertically position the Nested Text (link)
3 feature Copy fabric cpp changes from PR Adding Android support for Accessibility TtsSpan API with accessibilityRole and accessibilityUnit props #35130 Task 1) Add verticalAlign to TextAttributesPropsTask 2) Add Span to TextLayoutManagerMapBufferTask 3) Copy all the changes from PR #35130
4 feature Replace superscript and subscript with top and bottom (stackoverflow-1, stackoverflow-2)

P type task 1 test Verify issue still reproduce on the main branch 2 feature Use SuperScriptSpan to vertically position the Nested Text (link) 3 feature "Copy fabric cpp changes from PR Adding Android support for Accessibility TtsSpan API with accessibilityRole and accessibilityUnit props #35130 Task 1) Add verticalAlign to TextAttributesProps Task 2) Add Span to TextLayoutManagerMapBuffer Task 3) Copy all the changes from PR #35130" 4 feature Replace superscript and subscript with top and bottom (stackoverflow-1, stackoverflow-2)

fabOnReact avatar Dec 22 '22 18:12 fabOnReact

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 8,455,696 -13,762
android hermes armeabi-v7a 7,779,111 -12,549
android hermes x86 8,933,062 -11,541
android hermes x86_64 8,789,160 -12,865
android jsc arm64-v8a 6,669,828 -2,433,481
android jsc armeabi-v7a 7,463,682 -836,680
android jsc x86 9,195,080 +41,715
android jsc x86_64 6,894,964 -2,517,606

Base commit: bf03e86bc769f0d10000b70b0a98372f41d2bd4d Branch: main

analysis-bot avatar Dec 22 '22 18:12 analysis-bot

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: 4d8ba7b9fdb267e75d063c4c59de0b9bf73e05c3 Branch: main

analysis-bot avatar Dec 22 '22 19:12 analysis-bot

P type task
3 feature Copy fabric cpp changes from PR Adding Android support for Accessibility TtsSpan API with accessibilityRole and accessibilityUnit props #35130Task 1) Add verticalAlign to TextAttributesPropsTask 2) Add Span to TextLayoutManagerMapBufferTask 3) Copy all the changes from PR #35130
3.1 task RNTester crashes at startup caused by wrong configurations. Logcat points to newarchdefaults. Solution: gradle clear after making cpp changes.
3.2 task Log the value of textVerticalAlign for a nested text in TextAttributes.java to verify the value is passed from JS.
3.3 task Fix wrong mapping textVerticalAlign to textAlignVertical

P type task 3 feature "Copy fabric cpp changes from PR Adding Android support for Accessibility TtsSpan API with accessibilityRole and accessibilityUnit props #35130 Task 1) Add verticalAlign to TextAttributesProps Task 2) Add Span to TextLayoutManagerMapBuffer Task 3) Copy all the changes from PR #35130" 3.1 task RNTester crashes at startup caused by wrong configurations. Logcat points to newarchdefaults. Solution: gradle clear after making cpp changes. 3.2 task Log the value of textVerticalAlign for a nested text in TextAttributes.java to verify the value is passed from JS. 3.3 task Fix wrong mapping textVerticalAlign to textAlignVertical

fabOnReact avatar Dec 22 '22 19:12 fabOnReact

PR build artifact for 7d147decce71dd59318b21c2ac99c6a8da1385ef is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 22 '22 20:12 pull-bot

PR build artifact for 7d147decce71dd59318b21c2ac99c6a8da1385ef is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 22 '22 20:12 pull-bot

P type task
1 Bug Verify configs behind mIsAccessibilityLink or check corresponding configs in TtsSpan, because the value mVerticalAlign is set in TextAttributesProps.java, but not in MapBuffer.

P type task 1 Bug Verify configs behind mIsAccessibilityLink or check corresponding configs in TtsSpan, because the value mVerticalAlign is set in TextAttributesProps.java, but not in MapBuffer.

fabOnReact avatar Dec 26 '22 13:12 fabOnReact

P type task
1 Bug Verify configs behind mIsAccessibilityLink or check corresponding configs in TtsSpan, because the value mVerticalAlign is set in TextAttributesProps.java, but not in MapBuffer.
2 feature Modify Superscript implementation to align to the top (stackoverflow-1, stackoverflow-2)

P type task 1 Bug Verify configs behind mIsAccessibilityLink or check corresponding configs in TtsSpan, because the value mVerticalAlign is set in TextAttributesProps.java, but not in MapBuffer. 2 feature Modify Superscript implementation to align to the top (stackoverflow-1, stackoverflow-2)

fabOnReact avatar Dec 26 '22 14:12 fabOnReact

PR build artifact for fdeb37cd097e63745a7be5140b82b90af4fc2ce0 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 26 '22 14:12 pull-bot

PR build artifact for fdeb37cd097e63745a7be5140b82b90af4fc2ce0 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 26 '22 14:12 pull-bot

P type task
1 bug Nested Text does not take height of parent and is not aligned as the parent
1.1 task Create flexbox example with Nested Text
1.2 task Retrieve element height with Text onLayout callback
1.3 task Set hardcorded height value in ReactTopAlignSpan constructor
1.4 task Use hardcorded height to position nested Text top/center/bottom
1.5 task Read about top, ascent, descent, bottom and leading (stackoverflow)
1.6 task Shift the baseline top/center/bottom using the hardcoded height (+100, +200 and -200) to position correctly the Text top/center/bottom. Take in consideration parent text alignment.
2 feature Implement Superscript and publish solution
2.1 task Implement previous superscript solution and stash the other changes
2.2 task adjustement using font height to adapt superscript to top

P type task 1 bug Nested Text does not take height of parent and is not aligned as the parent 1.1 task Create flexbox example with Nested Text 1.2 task Retrieve element height with Text onLayout callback 1.3 task Set hardcorded height value in ReactTopAlignSpan constructor 1.4 task Use hardcorded height to position nested Text top/center/bottom 1.5 task Read about top, ascent, descent, bottom and leading (stackoverflow) 1.6 task Shift the baseline top/center/bottom using the hardcoded height (+100, +200 and -200) to position correctly the Text top/center/bottom. Take in consideration parent text alignment. 2 feature Implement Superscript and publish solution 2.1 task Implement previous superscript solution and stash the other changes 2.2 task adjustement using font height to adapt superscript to top

fabOnReact avatar Dec 27 '22 14:12 fabOnReact

Android - Basic implementation of Top and Bottom in nested text

does not support for height or lineHeight

fabOnReact avatar Dec 27 '22 15:12 fabOnReact

PR build artifact for 5565bc15a62f83d86600681123ba1695afbbd155 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 27 '22 15:12 pull-bot

PR build artifact for 5565bc15a62f83d86600681123ba1695afbbd155 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 27 '22 15:12 pull-bot

P type task
1 feature Update TopAlignSpan baseline position from ReactTextView#onDraw with the updated TextView height
1.1 task Retrieve in ReactTextView onDraw the text spans of class ReactTopAlignSpan with getSpans
1.2 task Loop over the spans and trigger method span.updateBaseline(height)
1.3 task Trigger updateBaseline and log the value of height from ReactTopAlignSpan
1.4 task Verify that the value is 550 or similar and correctly update the Span baseline
1.5 task ReactTopAlignSpan method updateBaselines updates the baseline based on the height received from ReactTextView getHeight
1.6 task Review (stackoverflow-1, stackoverflow-2)
1.7 task Try to draw the text manually with TextView onDraw to the correct position (slides)

P type task 1 feature Update TopAlignSpan baseline position from ReactTextView#onDraw with the updated TextView height
1.1 task Retrieve in ReactTextView onDraw the text spans of class ReactTopAlignSpan with getSpans 1.2 task Loop over the spans and trigger method span.updateBaseline(height) 1.3 task Trigger updateBaseline and log the value of height from ReactTopAlignSpan 1.4 task Verify that the value is 550 or similar and correctly update the Span baseline 1.5 task ReactTopAlignSpan method updateBaselines updates the baseline based on the height received from ReactTextView getHeight 1.6 task Review (stackoverflow-1, stackoverflow-2) 1.7 task Try to draw the text manually with TextView onDraw to the correct position (slides)

fabOnReact avatar Dec 28 '22 10:12 fabOnReact

Nested Text correctly aligns to the top of the View with flex style 

<View style={{height: 250}}>
  <Text
    style={{
      flex: 1,
      textAlignVertical: 'bottom',
      backgroundColor: 'yellow',
    }}>
    A parent text with{' '}
    <Text
      style={{
        textAlignVertical: 'bottom-child',
        backgroundColor: 'red',
      }}>
      Bottom
    </Text>
    <Text
      style={{
        textAlignVertical: 'top-child',
        backgroundColor: 'green',
      }}>
      Top
    </Text>
  </Text>
  <Text
    style={{
      verticalAlign: 'bottom',
      backgroundColor: 'red',
    }}>
    Bottom
  </Text>
</View>

fabOnReact avatar Dec 28 '22 10:12 fabOnReact

PR build artifact for 9de465b8952e9552cac70892edae07f344349de7 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 28 '22 11:12 pull-bot

PR build artifact for 9de465b8952e9552cac70892edae07f344349de7 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 28 '22 11:12 pull-bot

P type task
2 bug Add logic to detect parent textAlignVertical and correctly shift baseline
2.1 task Test scenario with hardcoded values
2.2 task Add gravity to ReactTopAlignSpan constructor (the value retrieved with TextView#getGravity).
2.3 task Add parameter textAlignVertical to ReactTopAlignSpan constructor.
2.4 task Invalidate the ReactTopAlignSpan to trigger updateDrawState
2.5 task Change baseline based on the textAlignVertical, mParentGravity and mHeight.
2.6 task Rename ReactTopAlignSpan to ReactAlignSpan

fabOnReact avatar Dec 28 '22 18:12 fabOnReact

PR build artifact for 0f7d69d48244883caca6fe7caa45609359d5d224 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 28 '22 18:12 pull-bot

PR build artifact for 0f7d69d48244883caca6fe7caa45609359d5d224 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 28 '22 19:12 pull-bot

P type task
1 bug Avoid adding ReactAlignSpan to span of the parent TextView
1.1 task The span is added to each fragment with the field mVerticalAlign. Avoid adding mVerticalAlign to fragments that are not virtual (check isVirtual as done in accessibilityLinks).
1.2 task Convert “top”, “bottom”, “center” to “top-child”, “bottom-child”, “center-child” (code) and use different value for virtual raw text.

P type task 1 bug Avoid adding ReactAlignSpan to span of the parent TextView 1.1 task The span is added to each fragment with the field mVerticalAlign. Avoid adding mVerticalAlign to fragments that are not virtual (check isVirtual as done in accessibilityLinks). 1.2 task Convert “top”, “bottom”, “center” to “top-child”, “bottom-child”, “center-child” (code) and use different value for virtual raw text.

fabOnReact avatar Dec 29 '22 10:12 fabOnReact

PR build artifact for 59fe7758ffa96c9f831139ebfb51370cfb700780 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 29 '22 10:12 pull-bot

PR build artifact for 59fe7758ffa96c9f831139ebfb51370cfb700780 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Dec 29 '22 10:12 pull-bot

P type task
1 bug The calculatedHeight used to compute the margin is an aproximate value. The correct value is layout.getHeight()
1.1 task Pass layout.getHeight() to ReactAlignSpan and log the value
1.2 task Verify that the correct value mCalculatedHeight is used to compute margin

AlignSpan is positioned to the bottom when text size changes

TURN ON AUDIO

AlignSpan is positioned to the bottom when span position changes

Screenshot 2023-01-02 at 8 50 25 PM Screenshot 2023-01-02 at 8 50 48 PM

fabOnReact avatar Jan 02 '23 19:01 fabOnReact

PR build artifact for 5017156ed0600b44a9fe77774a3a3c9e5deac869 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Jan 02 '23 20:01 pull-bot

Nested Text correctly aligned multiline spans (different positions and vertical alignment)

Screenshot 2023-01-02 at 9 36 05 PM Screenshot 2023-01-02 at 9 36 31 PM Screenshot 2023-01-02 at 9 36 43 PM Screenshot 2023-01-02 at 9 40 16 PM Screenshot 2023-01-02 at 9 43 29 PM

fabOnReact avatar Jan 02 '23 20:01 fabOnReact

PR build artifact for 5017156ed0600b44a9fe77774a3a3c9e5deac869 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Jan 02 '23 20:01 pull-bot

PR build artifact for ba1816754a6d154085d1f7de7f1f09b9f21b5c16 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Jan 02 '23 21:01 pull-bot

PR build artifact for ba1816754a6d154085d1f7de7f1f09b9f21b5c16 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot avatar Jan 02 '23 21:01 pull-bot