React-native: Nesting of <View> within <Text> is not currently supported.

[apostopher]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
Memory: 47.75 MB / 16.00 GB
Shell: Unknown
Binaries:
Node: 8.14.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /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, 24, 26, 27
Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.3, 27.0.3
System Images: android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-surrender: 1.2.0

Description

as per the documentation <View> inside <Text> is supported on iOS. However, nesting View> inside <Text> on iOS produces this error: Nesting of <View> within <Text> is not currently supported.

Reproducible Demo

1. react-native init AwesomeProject
2. copy-paste the demo code into AwesomeProject/index.js
3. react-native run-ios
4. the redbox appears with the error Nesting of <View> within <Text> is not currently supported.

[yatashashank]

Same Problem for me to

[yatashashank]

Did you fixed. If yes please let me know.

[apostopher]

@yatashashank
downgrading react-native to 0.55.4 worked for me. (only on iOS)

[bartolkaruza]

This appears to be an undocumented breaking change, which will soon be documented (I suspect :)):

https://github.com/facebook/react-native/commit/6a1b41643a5f5035c61a96263220d11d3462e8f2

Maybe @yungsters can explain why this has been changed?

[yungsters]

We made this change in order to reduce the feature parity gap between the platforms (and to reduce pitfalls). The plan was to enable this when we brought the capability to Android.

However, I see now that people want to use this even if it is only available on iOS. I think we should gate this behind a feature flag (except that ReactNativeFeatureFlags does not yet exist).

Alternatively, we could add an unstable_allowViewInText prop on View.

Would either of these work?

[apostopher]

@yungsters I think adding unstable_allowViewInText to Text sounds good. and throw an exception in the Android build (as of now)?

we also need to update the docs to reflect that this doesn't work on iOS atm.

[hramos]

Thanks for bringing this to our attention. This is something that should have made it into the changelog I drafted for v0.56, and I apologize for the omission. I've updated the release notes to make note of this breaking change.

[apostopher]

@hramos thanks for updating the release notes. what is the process to update the documentation?
Let me know if I can be of any help.

[hramos]

@apostopher you can send a PR to the Facebook/react-native-website repo.

_{Sent with GitHawk}

[robbiemu]

its been about 4 months, this is a pretty significant blockage, any word on a direction?

[hramos]

@robbiemu is there anything we missed in the discussion above? I am not sure I follow your comment.

[robbiemu]

It was noted in the discussion that this was done to increase feature parity between the different platforms, While the rendering choices in android did not allow the equivalent functionality that exists in iOS (and html). This leads to the expectation that there will be work done to allow react to put that same functionality in android; it is just not ready at this time. I was looking for an update on that continued effort

[anisfrontmen]

Any update on this??