error running app with flatuiimplementation

[jcharbo]

I'm using RN 42 in genymotion. It works fine in IOS and android when not using the new experimental android nodes. When I add the code to android to "turn on" the new experimental nodes I get the following error.
thanks

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactVirtualTextShadowNode' to a 'NativeViewWrapper')
addChildAt
    ReactShadowNode.java:172
addChildAt
    FlatShadowNode.java:219
addChildAt
    NativeViewWrapper.java:98
addChildAt
    FlatUIImplementation.java:505
setChildren
    FlatUIImplementation.java:185
setChildren
    UIManagerModule.java:312
invoke
    Method.java:-2
invoke
    BaseJavaModule.java:345
invoke
    JavaModuleWrapper.java:136
run
    NativeRunnable.java:-2
handleCallback
    Handler.java:739
dispatchMessage
    Handler.java:95
dispatchMessage
    MessageQueueThreadHandler.java:31
loop
    Looper.java:148
run
    MessageQueueThreadImpl.java:196
run
    Thread.java:818

[ericvicenti]

I don't think you've provided enough details for core developers to reproduce and debug this issue. Can you please re-open this issue when you've identified exactly what your app is doing to cause this error, and provide the sample code that can cause it to happen?

[nihgwu]

@ericvicenti plz reopen this issue, Nodes works really well on RN below 0.42, it solves a lot of layout issues in may app, but I got this error since I upgrade RN to 0.42, and I have no idea what happened and how to resolve it, as it throws the error and stop the initialization of the app. So I've stopped upgrade the android version of my app. I thought it's still in experimental and will be resolved, but it's still there on RN0.43

[ericvicenti]

cc @ahmedre

Can you provide any more details about how to get this error?

[gerbenis]

@ericvicenti We've encountered the same problem on our project as well. It seems that this is a bug related to RN's Text component. To verify it we created a new project using react-native init, overriden ReactNativeHost's getUIImplementationProvider method to return new FlatUIImplementationProvider() in MainApplication.java and lauched the project. The app produced the following error:

The app lauches fine with Text components removed.

[jcharbo]

@ericvicenti I'd like to provide you more info but I have thousands of lines of code and this error does not give me enough info to find the underlying code issue. Hopefully the info from everyone above will be enough.

[ahmedre]

cc @AaaChiuuu since i am traveling at the moment

[gerbenis]

@ericvicenti, @AaaChiuuu, any news on the issue? Moreover, I suggest to reopen it as there is a very clear way to reproduce it.

[ayc1]

I wasn't able to reproduce this issue on multiple applications after enabling nodes.

@gerbenis @jcharbo can you provide a clear minimum repro that includes js code?

[Ashoat]

I'm seeing the same exact issue using React-Native 42.3

[gavinyeah]

I'm also seeing this issue after upgrading to RN42.0

[gerbenis]

@ayc1, as I already mentioned, creating initial RN 42.0 project via CLI with nodes enabled in MainApplication.java was enough to reproduce the error. If it'll be of any help, I can create a repo and share it here.

[christianbach]

We to are seeing the same issue in our app. Worked prior to 0.42.0 and now we have the same yoga error. For us the error is related to the Text component.

[adogor]

Hi @ericvicenti , could we reopen this issue ? Or do we have to create another one ?

Like @gerbenis with all versions after 0.42.0 even the react-native init doesn't work. So we have to stay at 0.41.x .

Thanks !

[dbof10]

<View>
       <Image
         style={{height: 30, width: 30}}
         source={{uri : 'ic_home_black_24dp'}}/>
       <Text>Home</Text>
</View>

I did a sample to try FlatUIImplementation but hit the same issue

[djohnkirby]

Experiencing the same thing after upgrading from 0.39 to 0.42

[raffij]

Same experience with 0.43.1 with the base app created with react-native init

[chunghe]

able to reproduce with 0.43.3.

following code renders correctly:

      <View style={{flex:1, backgroundColor: 'red'}}>
      </View>

following code displays red screen

      <View style={{flex:1, backgroundColor: 'red'}}>
        <Text>hello wolrd</Text>
      </View>

[nihgwu]

ping @ahmedre any progress on this? It's broken for quit a long time

[sunnylqm]

ping @ericvicenti @AaaChiuuu

[aaronechiu]

Hi, FlatUIImplementation is experimental and the React Native Core team is working on higher priority projects at this time. You'd want to stick with the regular UIImplementation. At this point, the earliest I'd expect us to get FlatUIImplementation working is some time next half.

[gmlion]

For what's worth, my experience is that FlatUIImplementation transformed an almost unusable Android app to one that is on par with the iOs version. Don't know anything about your priority, but this one for Android is a game changer, so I'm forced to stay with 0.41 until this bug is resolved

[raffij]

@gmlion that's useful insight.

[sjkirby]

@gmlion I'm interested in what views comprise the Android surface of your app? Just to get an idea of where you are seeing performance improvements in the real world.

[gmlion]

The main culprit is most probably a stack of 10 nested images, but I can see performance degradation even on views on top of a navigation stack (I'm using react-native-router-flux).
For the first thing, on Android I used a GL surface and overlaid the images in the fragment shader before trying FlatUIImplementation.

[sjkirby]

I tracked down the issue and will push a fix later today.

[sjkirby]

Fixed in current source.

[jevakallio]

I can confirm that c8bb422 seems to have fixed this in 0.46.0-rc2.

However, Nodes is still not working for me, now suffering from #14786 instead

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[naveed89]

please help me same issue with me..

import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';

export default class MenuScreen extends React.Component {
_onPressButton() {
Alert.alert('You tapped the button!')
}

_onLongPressButton() {
Alert.alert('You long-pressed the button!')
}

render() {
return (


<Image source={require('../assets/images/edit.png')} style={styles.Imageview}/>
/
Edit
/

    <TouchableOpacity onPress={this._onPressButton}>
    <Image source={require('../assets/images/newnote.png')} style={styles.Imageview}/>
    /*  <View style={styles.button}>

        <Text style={styles.buttonText}> New Note</Text>
      </View>*/
    </TouchableOpacity>

    <TouchableOpacity onPress={this._onPressButton}>
    <Image source={require('../assets/images/setting.png')} style={styles.Imageview}/>
      /* <View style={styles.button}>

        <Text style={styles.buttonText}>Setting</Text>
      </View>*/
    </TouchableOpacity>

    <TouchableOpacity onPress={this._onPressButton}>
    <Image source={require('../assets/images/delete.png')} style={styles.Imageview}/>
    /*  <View style={styles.button}>

        <Text style={styles.buttonText}>Delete</Text>
      </View> */
    </TouchableOpacity>

    <TouchableOpacity onPress={this._onPressButton}>
    /*  <View style={styles.button}>
    /*  <Image source={require('../assets/images/Done.jpg')} style={styles.Imageview}/>
        <Text style={styles.buttonText}>Save</Text>
      </View>*/
    </TouchableOpacity>

    <TouchableOpacity onPress={this._onPressButton}>
      <View style={styles.button}>
    /*  <Image source={require('../assets/images/sound.jpg')} style={styles.Imageview}/>
        <Text style={styles.buttonText}>Sound</Text>
      </View>*/
    </TouchableOpacity>

    <TouchableOpacity onPress={this._onPressButton}>
      <View style={styles.button}>
      /*<Image source={require('../assets/images/save to camera roll.jpg')} style={styles.Imageview}/>
        <Text style={styles.buttonText}>Camera</Text>
      </View>*/
    </TouchableOpacity>

    <TouchableOpacity onPress={this._onPressButton}>
    <Image source={require('../assets/images/calendar.png')} style={styles.Imageview}/>
    /*  <View style={styles.button}>
        <Text style={styles.buttonText}>Calender</Text>
      </View>*/
    </TouchableOpacity>

  </View>
);

}
}

const styles = StyleSheet.create({
container: {
paddingTop: 60,
alignItems: 'center'
},
button: {
marginBottom: 30,
width: 260,
alignItems: 'center',
backgroundColor: '#2196F3'
},
buttonText: {
padding: 20,
color: 'white'
},
Imageview: {
flex: 1,
// remove width and height to override fixed static size
justifyContent: 'center',
alignItems: 'center',

},
})