react-native/Libraries/ReactNative/ReactNativeTextComponent.js
Spencer Ahrens 99158f0d5a Better error message for RawText outside <Text>
Summary: public

Native iOS has a good error message, but it's in native which makes
things a little harder to track down (can't use Chrome debugger as easily).

Android has no special handling, so a cryptic "Trying to add unknown view tag..."
redbox would come up.

This puts the error handling in JS so it's shared on all platforms and can be
debugged more easily in Chrome.

Reviewed By: vjeux

Differential Revision: D2606064

fb-gh-sync-id: 5295a44a028c7be79d60dbaf0b5d59fd0a56fdde
2015-11-02 10:51:44 -08:00

80 lines
2.2 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactNativeTextComponent
*/
'use strict';
var ReactNativeTagHandles = require('ReactNativeTagHandles');
var RCTUIManager = require('NativeModules').UIManager;
var assign = require('Object.assign');
var invariant = require('invariant');
var ReactNativeTextComponent = function(props) {
// This constructor and its argument is currently used by mocks.
};
assign(ReactNativeTextComponent.prototype, {
construct: function(text) {
// This is really a ReactText (ReactNode), not a ReactElement
this._currentElement = text;
this._stringText = '' + text;
this._rootNodeID = null;
},
mountComponent: function(rootID, transaction, context) {
invariant(
context.isInAParentText,
'RawText "' + this._stringText + '" must be wrapped in an explicit ' +
'<Text> component.'
);
this._rootNodeID = rootID;
var tag = ReactNativeTagHandles.allocateTag();
var nativeTopRootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(rootID);
RCTUIManager.createView(
tag,
'RCTRawText',
nativeTopRootID ? ReactNativeTagHandles.rootNodeIDToTag[nativeTopRootID] : null,
{text: this._stringText}
);
return {
rootNodeID: rootID,
tag: tag,
};
},
receiveComponent: function(nextText, transaction, context) {
if (nextText !== this._currentElement) {
this._currentElement = nextText;
var nextStringText = '' + nextText;
if (nextStringText !== this._stringText) {
this._stringText = nextStringText;
RCTUIManager.updateView(
ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(
this._rootNodeID
),
'RCTRawText',
{text: this._stringText}
);
}
}
},
unmountComponent: function() {
this._currentElement = null;
this._stringText = null;
this._rootNodeID = null;
}
});
module.exports = ReactNativeTextComponent;