Nesting View components inside Text components not working correctly 0.60-RC

[jobpaardekooper]

React Native version:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 3.11 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.9.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 26, 28
Build Tools: 23.0.1, 26.0.3, 27.0.3, 28.0.2
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.0-rc.0 => 0.60.0-rc.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

The following code produces the issue. Keep in minde that the example is simplified as much as possible and would not make sense to use anywhere in your project in this exact way.

    <Text>
        <View>
            <Text>Hello world!</Text>
        </View>
    </Text>

The code above does not display anything on the screen.
Tested on 0.60RC0 and 0.60RC1, still does not work.

[zcgit]

maybe you should set a style to View? {flex:1}

[jobpaardekooper]

Stil does not work.
Code:

<Text>
    <View style={{flex:1}}>
      <Text>Hello world!</Text>
    </View>
</Text>

[jobpaardekooper]

Also tested on RC1. Still does not work.

[kelset]

👋 job.
Thanks for bringing this to my attention: after a lot of digging, basically the reason why it doesn't behave the way you would expect is partially caused by me misunderstanding some commits 😅 which is why I've removed the line about inline views from the RC highlights for now (we will communicate properly this feature in the changelog & release notes for 0.60.0).

Let me explain: soooo inline views in Text were something that was partially enabled in iOS since 28 -> 486dbe4

Then around 56 was sort of reverted out: 6a1b416

Then thanks to @rigdern's hard work, it was re-enabled for both platforms recently. This commit in particular was the one I saw in the commits history: a2285b1

But I didn't notice this commit: a2a03bc

which, if you read the commit message, states quite a few things, among which:

Note that some examples are only supported on iOS because they rely on the inline view being able to size to content. Android's implementation requires that a width and height be specified on the inline view.

And also a series of limitations.

All of this said, it also means that you can check the RNTester source code to check how inline views can work currently: https://github.com/facebook/react-native/blob/0.60-stable/RNTester/js/Shared/TextInlineView.js (and you can basically throw this code in a fresh 0.60-rc1 project and it will work, it's where the screenshot below comes from)

To conclude: do inline view works in 0.60? Yes, but with limitations.

And we'll make sure to properly communicate this in the changelog/release. In the meantime, maybe if you want, it would be super helpful to do a PR to the documentation to ensure that all of the above is also properly written there 🤗

[rigdern]

@kelset Thanks for doing this thorough investigation. I'm sorry the cause wasn't more obvious. I included an exception in the Android implementation of inline views to catch this mistake:

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

Lines 133 to 135 in c19c6ce

	if (widthValue.unit != YogaUnit.POINT || heightValue.unit != YogaUnit.POINT) {
	throw new IllegalViewOperationException("Views nested within a <Text> must have a width and height");
	}

but I guess it's not currently working properly.

[kelset]

hey Adam - thanks for the work, can you point me to the commit that adds that behaviour? I want to have it in 0.60 if it's not there yet

[jpdriver]

@rigdern thanks for all your work in this area -- it looks like you've been leading the charge for quite some time!

in this case it looks like @jobpaardekooper wants to do something like

<Text>
  <View>
    <Text>Hello world!</Text>
  </View>
</Text>

should this specific pattern (nested Text within an inline view) be possible with the current implementation?
(assuming you have specified width + height, outside Facebook, and without TextAncestor?)

or is this a "known limitation" of the pattern? maybe it could be worth putting something about it in the docs to clarify?

---

for me, using a brand new project with 0.60-rc.1 i get the following..

<View><Text>

    <View
      style={{
        backgroundColor: "steelblue",
        height: 50,
        width: 150
      }}
    >
      <Text>Hello world!</Text>
    </View>

<Text><View><Text>

    <Text>
      <View
        style={{
          backgroundColor: "steelblue",
          height: 50,
          width: 150
        }}
      >
        <Text>Hello world!</Text>
      </View>
    </Text>

[jpdriver]

@kelset

can you point me to the commit that adds that behaviour

think it's this one 😇
b6c65e4#diff-b9097bc72809ab84057ff8a0b1e0cce0R134

[jobpaardekooper]

This: #25197 (comment) is exactly what is happening when I try this out.

a2a03bc lists some known bug but it does not say anything about the issue described in #25197 (comment).

Should the ability to nest View components inside Text even be added in 0.60 at this stage? Especially if there are known bugs like these:

• iOS bug: First update works but second update CRASHES the app.

I think a lot of people are going to get hung up on this stuff.

Thank you guys for the hard work it's really appreciated!

cc: @kelset