No component found for view with name 'RCTVirtualText'

[kevinwchiang]

Description

Updated RN to latest version 0.44. App is crashing on login with the error in the screenshot.

The issue does not occur on Android. I logged out Platform.OS on XCode simulator, and can see that it is logging out ios correctly.

Additional Information

• React Native version: 0.44
• Platform: iOS
• Development Operating System: macOS
• Dev tools: XCode, Simulator

[shahen94]

I'm getting the same error.
Seems like iOS doesn't have this component, so that's ok, but why it's going to require it anyway ?

react-native/Libraries/Text/Text.js

Line 391 in 88a6398

uiViewClassName: 'RCTVirtualText',

[juergengunz]

getting the same error but kinda randomly

[sunkibaek]

I'm getting this error only when I am using https://github.com/CharlesMangwa/react-native-simple-markdown

[nickkapoor]

Any fixes so far? I am getting it when I do a search on a flatlist.

[nickkapoor]

Commented the following in node_modules/react-native/React/Modules/RCTUIManager.m on line 1011

and inserted a return. Things are moving but this needs a fix for sure.

RCTComponentData *componentData = _componentDataByName[viewName];
if (componentData == nil) {
//RCTLogError(@"No component found for view with name "%@"", viewName);
return;
}

[shahen94]

@nickkapoor thatst not a solution.
The problem is that the packager can't find changes in Text.js file due to symlink configuration.

The Solution

1. Open Text.js in your editor.
2. Modify the last lines, for example add logs
3. Save changes
4. Kill packager and run again
5. Open app, probably you'll get error again
6. Reload app, Packager will see changes and will update project

No longer you'll get that error. If you need you can revert your changes in Text.js.
That's all.

[nickkapoor]

Indeed it worked when I put the return. I will undo it and save and re run the packager. Thanks for the guidance.

[cherniv]

Crashes for me even in simple case , like:

render () {
  var a = ['aaa'].map(i => <Text>{i}</Text>)
  return <Text>{a}</Text>
}

[sunkibaek]

@shahen94

Your solution works but that is so weird. Can you explain why it fixes the crash, please?

[shahen94]

@sunkibaek
i though that the packager didn't saw changes, it caches react-native files, i don't know where, but i faced with similar issue 10 months ago. After modifying the file the error disappears. I can't definitely say why it's happening and how packager caches detailed, but i can definitely say that rn packager+watchman had some issues, which can spawn also this issue.

Now you can revert your changes from Text.js, and it will work

[nixoz]

Same here after updated on 0.44
Somehow started work on simulator, but not on device....
iOS

[sunkibaek]

@shahen94 Thanks for the explanation. I've used your tip to fix it on simulator but on device (reelease mode) it shows nothing.

[nixoz]

http://blog.csdn.net/jiangbo_phd/article/details/71482363 - this helped.

npm uninstall react-native-windows
react-native start --reset-cache

[nickkapoor]

I have a component that relies on react-native-windows. node_modules/react-native-windows/Libraries/Components/Button.windows.js'
at Error (native)
at Object.fs.openSync (fs.js:640:18)
at Object.fs.readFileSync (fs.js:508:33)

So removing react-native-windows does not work. As a side effect of this issue, I am not seeing Text display on the device but shows up on the simulator similar to the issue @nixoz mentioned.

[nixoz]

@nickkapoor mate, i'm afraid it is...

`May 18 23:06:46 nimbp PhiMobile[76266] : Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check your code at Text.windows.js:254.
    in Text (at YellowBox.js:170)
    in RCTText (at Text.windows.js:256)
    in Text (at YellowBox.js:180)
    in RCTView (at View.js:127)
    in View (at TouchableHighlight.js:252)
    in TouchableHighlight (at YellowBox.js:175)
    in RCTView (at View.js:127)
    in View (at YellowBox.js:174)
    in WarningRow (at YellowBox.js:370)
    in RCTView (at View.js:127)
    in View (at ScrollView.windows.js:459)
    in RCTScrollView (at ScrollView.windows.js:552)
    in ScrollView (at YellowBox.js:388)
    in RCTView (at View.js:127)
    in View (at YellowBox.js:387)
    in YellowBox (at renderApplication.windows.js:93)
    in RCTView (at View.js:127)
    in View (at renderApplication.windows.js:91)
    in AppContainer (at renderApplication.windows.js:110)`

Catching this one if do one small test:

1. go to node_modules/react-native-windows/Libraries/Text and open Text.windows.js file in your editor.
2. clean it's contents
3. save
4. reload your application - you will get the thing above in your console - so this is weird. i'm pretty sure it shouldn't be like that.

proof #2.
if you will open the source bundle you will see. here is no 'Text' module imported from /node_modules/react-native/Libraries/Text/Text.js - instead you will see:

var _jsxFileName = '/Users/.../node_modules/react-native-windows/Libraries/Text/Text.windows.js';
var ColorPropType = require(401            ); // 401 = ColorPropType
var EdgeInsetsPropType = require(585                 ); // 585 = EdgeInsetsPropType
var NativeMethodsMixin = require(403                 ); // 403 = NativeMethodsMixin
var Platform = require(372       ); // 372 = Platform
var React = require(569    ); // 569 = React
var ReactNativeViewAttributes = require(583                        ); // 583 = ReactNativeViewAttributes
var StyleSheetPropType = require(590                 ); // 590 = StyleSheetPropType
var TextStylePropTypes = require(578                 ); // 578 = TextStylePropTypes
var Touchable = require(623        ); // 623 = Touchable
.....
some more contents
.....
module.exports = Text;
}, 622, null, "Text");

So, all react components using this guy...
and this guy is kinda also weird.

Here is no native module for component RCTVirtualText on iOS, so react-native original Text.js have this piece of code:

var RCTText = createReactNativeComponentClass(viewConfig);
var RCTVirtualText = RCTText;
if (Platform.OS === 'android') {
  RCTVirtualText = createReactNativeComponentClass({
    validAttributes: mergeFast(ReactNativeViewAttributes.UIView, {
      isHighlighted: true,
    }),
    uiViewClassName: 'RCTVirtualText',
  });
}

if you will check Text.windows.js you will see:

var RCTText = createReactNativeComponentClass(viewConfig);
var RCTVirtualText = createReactNativeComponentClass({
  validAttributes: merge(ReactNativeViewAttributes.UIView, {
    isHighlighted: true,
  }),
  uiViewClassName: 'RCTVirtualText',
});

this is where the exception is coming from...

so basically the reason - react-native-implementation.js instead of react-native's own modules requiring modules with the same name from react-native-windows.

[nickkapoor]

Thanks @nixoz So I am a bit confused now.

Are you suggesting that the react-native-windows is taking precedence in rendering the text? And if so, why does the behavior vary between the simulator and the device.

To give a proper context, I am seeing this issue creep in for 0.44 RN. I am using the gifted chat, which uses ParsedText. The text displays correctly in the simulator but does not display correctly on the phone. So I am thinking this issue with ParsedText component is showing similar issues that you had mentioned between the device and the simulator. I am at a standstill on this and apparently some component has precedence in rendering text. It seems the precedence varies between the device and the simulator.

[nixoz]

@nickkapoor - It is clearly just packaging/conflict issue between react-native and react-native-windows packages.

Why text is not rendered?
@cherniv have an example:

render () {
  var a = ['aaa'].map(i => <Text>{i}</Text>)
  return <Text>{a}</Text>
}

so the output will be:

<Text>
  <Text>a</Text>
  <Text>a</Text>
  <Text>a</Text>
</Text>

internally it's represented as:

<RCTText>
  <RCTVirtualText>a</RCTVirtualText>
  <RCTVirtualText>a</RCTVirtualText>
  <RCTVirtualText>a</RCTVirtualText>
</RCTText>

on iOS platform RCTText & RCTVirtualText are the same (check react-native's Text.js)

var RCTText = createReactNativeComponentClass(viewConfig);
var RCTVirtualText = RCTText;

but in case of Text.windows.js it is re assigned to

RCTVirtualText = createReactNativeComponentClass({
    validAttributes: mergeFast(ReactNativeViewAttributes.UIView, {
      isHighlighted: true,
    }),
    uiViewClassName: 'RCTVirtualText',
  });

which is absent on iOS, so that is the reason of exception.

p.s to be honest now i'm really interested in how the packaging works and why this thing didn't appeared before RN0.44

[nickkapoor]

Awesome explanation. Thanks.

So are you suggesting I change the following as per your other blog?

at the same time, in jest-haste-map's lib/getPlatformExtension.js we have:

const SUPPORTED_PLATFORM_EXTS = {
android: true,
ios: true,
native: true,
web: true };
adding windows: true, to SUPPORTED_PLATFORM_EXTS dict will give us a fix:

[nickkapoor]

Additionally why does it work on the simulator and not on the device?

[nixoz]

I guess, when u editing the react-native module file packager picking it up and rewriting the Text module, then packager picking it up from cache.

You can run packager with --reset-cache and everything will be broken again - until u edit the file again....

[nixoz]

You can try to run app with bundle (release) in simulator - will it work?

[nickkapoor]

In the simulator there is no problem. However on the device it show a blank for text.

[nickkapoor]

Think you are onto something with the jeste. Apparently the precedence is different on the simulator than on the device; that's possibly the reason for different behavior. Question is how do I enforce the same precedence on the device that seems to be correct on the simulator. I was hoping that the device and simulator would behave the same way. But apparently that is not true. So something in the build order has to be done for one lib to take over the other.

[nickkapoor]

@nixoz . The file is in /node_modules/react-native/node_modules/jest-haste-map/build/lib/getPlatformExtension.js

So I updated this: const SUPPORTED_PLATFORM_EXTS = {
android: true,
ios: true,
native: true,
web: true,
windows: true};

AND YES it works on the device too. Many thanks for the guidance. Also I thought others may benefit and you may want to update your docs also (NOTE: the location of the getPlatformExtension.js)

[card-b]

@nickkapoor thanks! This fixed an issue running Android in Windows.

ScrollView has no propType for native prop

just leaving the specific error message here in case someone else encounters it.

[abeltje1]

I have tried the very weird (but seemingly effective for others) solution above, but no success. Also tried to make a fresh git clone..no luck. Does anyone have an idea how to approach this issue? ps I'm running RN 0.46..if that helps.

cheers

[whtlnv]

I am still testing but it seems that after updating to npm 5.3.0 I don't get this error any more.

Never mind, it came back.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[syardumi]

Does anyone know if this was fixed in a later version of RN? I'm still running into the same issue in 0.44.