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

Libraries/ReactNative/ReactNativeTextComponent.js

@@ -15,6 +15,7 @@ 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.
@@ -30,6 +31,11 @@ assign(ReactNativeTextComponent.prototype, {
   },
 
   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);