Unable to use a custom-made native component to render text strings #25136
Description
We are unable to use a custom native component to render text because of the invariant preventing text strings from being able to be rendered by anything that's not in the hard-coded list of acceptable components.
If we try to use our custom implementation, we get the following error:
Invariant Violation: Text strings must be rendered within a <Text> component. This error is located at: in SKZLabel (at Label.android.js:125) in Label (at UserSummary.js:276) in RCTView (at View.js:45) ... in View (at UserSummary.js:274) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:34) createTextInstance _hashDelete.js:14:2 completeWork completeUnitOfWork TextInput.js:980:29 performUnitOfWork TextInput.js:1133:6 workLoop TextInput.js:1155:34 renderRoot TextInput.js:1219:21 performWorkOnRoot Touchable.js:910:2 performWork Touchable.js:368:23 performSyncWork Touchable.js:782:2 requestWork Touchable.js:524:25 scheduleWork Touchable.js:267:4 enqueueSetState setState lodash.js:43:2 <unknown> tryCallOne Alert.js:213:12 <unknown> AppRegistry.js:86:7 _callTimer NativeModules.js:162:15 _callImmediatesPass Platform.android.js:22:16 callImmediates warning.js:39:1 __callImmediates <unknown> PlayerDetailModal.js:292:6 __guard PlayerDetailModal.js:202:6 flushedQueue React Native version:
React Native Environment Info: System: OS: macOS 10.14.4 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Memory: 22.78 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.14.0 - ~/.nvm/versions/node/v8.14.0/bin/node Yarn: 1.6.0 - /usr/local/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v8.14.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2 Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3 System Images: android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom IDEs: Android Studio: 3.3 AI-182.5107.16.33.5314842 Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild npmPackages: react: 16.8.6 => 16.8.6 react-native: git://github.com/skillz/react-native.git#a442e0b63526405249ddf50e58f1fdc618c789bc => 0.59.8 Steps To Reproduce
- Create and implement custom native text rendering component
- Attempt to use your new native text component in your react code (sample snippet below)
- Observe
Describe what you expected to happen:
There should be some way that we can add our custom native text component to be able to accept string children directly without throwing an invariant violation
Snack, code example, or link to a repository:
Native code:
public class LabelViewManager extends ReactTextViewManager { @Override public String getName() { return "MyLabel"; } // custom implementation details @Override public void updateExtraData(ReactTextView view, Object extraData) { // custom implementation details super.updateExtraData(view, extraData); }Javascript component code:
const LabelInterface = { ... minimumFontScale: PropTypes.number, textAlign: PropTypes.oneOf(["auto", "left", "right", "center", "justify"]), ... }; const MyCustomLabel = requireNativeComponent('MyLabel', LabelInterface, {nativeOnly: { ... text: true, selectable: true, textBreakStrategy: true, allowFontScaling: false, .. }}); export default class Label extends React.Component { ... render() { return <MyCustomLabel>{this.props.children}</MyCustomLabel>; } }Javascript usage code:
import Label from 'Label'; ... <Label>"Hello World"</Label> ...If there are no plans to add this functionality, could you at least give us an idea of how to properly add our custom native text component to the list within our own fork of react-native? I've found where the check for text components happens but it is in files marked with @generated and I couldn't figure out what they were generated by - I want to make sure that the changes I make wouldn't be overwritten if/when these files are regenerated.
Thanks for any help you can give!