Add substring measurements for Text

[azimgd]

Summary:

I would like to apply styling to a substring of text, such as a background color, padding, and rounded corners. This functionality could be used for:

• Username mention highlighting (similar to Slack): Happy birthday @username
• Inline code block (similar to GitHub): Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

The problem is that the Text element in RN behaves like a block element rather than an inline element when it is multiline. Additionally, it does not allow you to have borders or rounded corners. This makes it unsuitable for implementing a multiline inline code block.

Adding a new prop called textLayoutRegions which accepts an array of regions (substring positions) could be used to solve the problem. Passing this prop will calculate the regions [[start, end], [start, end] ...] position and pass the response into onTextLayout callback. Knowing exact substring position and dimensions will allow implementing custom styled View behind the text.

<View>
  {regions.map((region, index) => (
    <View style={{width: region.width, height: region.height, top: region.y, left: region.x, backgroundColor: 'red', position: 'absolute'}} />
  ))}

  <Text style={{lineHeight: 20}} onTextLayout={event => setRegions(event.nativeEvent.regions)} textLayoutRegions={[[12, 242]]}>
    Lorem Ipsum  is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen  book.
  </Text>
</View>

// onTextLayout event
{
  lines: [...],
  regions: [
  {
    "height": 20,
    "line": 0,
    "region": 0,
    "text": " is simply dummy text of the printing and typesetting ",
    "width": 325.71429443359375,
    "x": 85.42857360839844,
    "y": 0
  },
  {
    "height": 20,
    "line": 1,
    "region": 0,
    "text": "industry. Lorem Ipsum has been the industry's standard dummy ",
    "width": 393.71429443359375,
    "x": 0,
    "y": 20
  },
  {
    "height": 20,
    "line": 2,
    "region": 0,
    "text": "text ever since the 1500s, when an unknown printer took a galley ",
    "width": 400.28570556640625,
    "x": 0,
    "y": 40
  },
  {
    "height": 20,
    "line": 3,
    "region": 0,
    "text": "of type and scrambled it to make a type specimen  ",
    "width": 313.1428527832031,
    "x": 0,
    "y": 60
  }
]
}

Changelog:

[GENERAL] [ADDED] - New textLayoutRegions prop for Text component that accepts an array of substring regions. Each region's layout position will be appended into onTextLayout event callback.
[GENERAL] [ADDED] - New regions props for onTextLayout event callback.

Test Plan:

• Run RNTester app
• Go to APIs → Layout Events page
• Ensure substring has a red background color around selected region

[facebook-github-bot]

Hi @azimgd!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[azimgd]

I have been first trying to solve the problem by adding a new prop called textCodeBlockStyle to . This prop accepts a background color, border radius, etc. Text renders a background rect natively using NSLayoutManager#drawBackgroundForGlyphRange for iOS and LineBackgroundSpan#drawBackground for Android.
However my approach had following drawbacks:

• No Padding + Margin support as you can't draw anything past line height/width for text.
• Unreliable behavior for iOS / Android

implementation: Expensify#43
context: Expensify/App#4733

Would you be willing to help me validate my idea @NickGerleman?

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[NickGerleman]

I would like to apply styling to a substring of text, such as a background color, padding, and rounded corners.

Are you looking for this? https://reactnative.dev/docs/text#nested-text

[azimgd]

Nested Text won't let you draw rounded borders with a background, margins don't work as well.

I would like to implement exactly this in RN:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,732,275	-7,106
android	hermes	armeabi-v7a	8,042,840	-7,434
android	hermes	x86	9,220,576	-8,993
android	hermes	x86_64	9,074,227	-7,170
android	jsc	arm64-v8a	9,296,420	-6,304
android	jsc	armeabi-v7a	8,484,532	-6,667
android	jsc	x86	9,356,134	-7,845
android	jsc	x86_64	9,613,456	-6,463

Base commit: 1671247
Branch: main

[azimgd]

Fully functioning textLayoutRegions prop on iOS and Android is pushed, see PR description for a screenshot and event payload. Will work on a CR fixes and old arch support soon.

[azimgd]

RNTester:

[azimgd]

@NickGerleman may I ask for a code-review please.

[NickGerleman]

We shouldn't be adding a new API for marking spans of text. If we want to be able to do more with spans of text, we should built it into the existing facilities.

Note that we do also allow Views inline in text already.

[azimgd]

This particular PR enables tracking layout metrics for a substring of text, by extending onTextLayout event callback we can get more granular metrics. Curious to know the downsides of this.

If we want to be able to do more with spans of text, we should built it into the existing facilities.

I have previously tried to implement that on a native layer here: Expensify#43. Main problem was that you can't go beyond Text component's line-height with styling. That said drawing a background layer with 30px is not possible on a line which has 20px.

I would appreciate any help and suggestions on what would be the best way to move forward. @NickGerleman @cortinico

[NickGerleman]

To reiterate, the API in its current form is not something I think we are interested in.

I think it might be possible to reconcile this with the existing nested text APIs, to expand the APIs React Native already offer in a way that is cohesive. The path there I think would be to start with a proposal of the new API and get feedback on that first.

I think the faster way to achieve the goal you are looking for might be a custom native component.

[NickGerleman]

To better explain what I mean by reconciling the APIs, we already have a way for users to segment texts, like a span. So adding a “regions” prop for this one particular separate use case is not cohesive with the current API.

As a start of an API to explore, what if “onTextLayout” was set on a specific nested text span to get its information? But these sorts of major APIs usually take some back and forth to refine.

If there gets to be agreement on an API (The Discussions and Proposals Repo would be a great place for this), the next steps would be a a series of smaller, reviewable PRs, building it out in increment. I.e. not all the platforms and logic at once, to help make the change reviewable.

[Szymon20000]

I think it's a great opportunity to add onLayout support for nested text. Expensify#56 (comment) I would like to help with implementing it. Pretty sure I know how to do it.

[github-actions]

This PR 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 PR was closed because it has been stalled for 7 days with no activity.