Crash: YogaLayoutableShadowNode.cpp: function layout: assertion failed (YGNodeGetOwner(childYogaNode) == &yogaNode_)

Description

• There is some sort of crash when ui is rendered

Steps to reproduce

• Use conditional rendering for view to display ui based on condition (not sure though what is causing this)
  Note: it is working fine on 0.77 though once upgraded then facing this issue

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { t } from '../i18n';
import { ProgressBar } from '@ui-kitten/components';
import { TPhoto } from '../types';
import { Colors } from '../theme';
import AppLightButton from './AppLightButton';
import Upload from '../theme/icons/Upload.svg';
import AppText from './AppText';

type Props = {
    image: TPhoto;
    retryUpload: boolean;
    onRetryUpload: (image: TPhoto) => void;
    currentImageIndex: number;
    totalImages: number;
};

const ImageUploadProgress = ({ image, retryUpload, totalImages, currentImageIndex, onRetryUpload }: Props) => {
    return (
        <View style={styles.photoUpload}>
            <View style={styles.uploadTitle}>
                <AppText style={styles.uploadTitleText}>
                    {t('common._uploading-images', {
                        count: currentImageIndex,
                        total: totalImages,
                    })}
                </AppText>
                {image.uploadStatus === 'completed' ? (
                    <AppText style={styles.uploadTitleTextComplete}> - {t('common.complete')} </AppText>
                ) : (
                    <View />
                )}
                {image.uploadStatus === 'failed' || image.uploadStatus === 'uploading' ? (
                    <View>
                        <AppText style={styles.uploadTitleTextFailed}>
                            {image.uploadStatus === 'failed' ? `- ${t('common.failed')}` : ''}
                        </AppText>
                        {retryUpload && (
                            <AppLightButton
                                text={t('common.retry')}
                                buttonIcon={<Upload width={10} fill={Colors.warn} />}
                                onPress={() => onRetryUpload(image)}
                                style={styles.stepButton}
                                textStyle={styles.stepButtonText}
                            />
                        )}
                    </View>
                ) : (
                    <View />
                )}
            </View>
            <ProgressBar
                progress={image.uploadStatus === 'completed' ? 1 : image.progress}
                size="medium"
                style={styles.progressBarStyle}
                status={
                    image.uploadStatus === 'failed' ? 'danger' : image.uploadStatus === 'completed' ? 'success' : 'info'
                }
            />
        </View>
    );
};

export default ImageUploadProgress;

const styles = StyleSheet.create({
    photoUpload: { marginVertical: 20 },
    uploadTitle: { flexDirection: 'row', justifyContent: 'space-between' },
    uploadTitleText: {
        fontSize: 14,
        fontFamily: 'ProximaNova-Regular',
        textAlign: 'center',
        textAlignVertical: 'center',
    },
    uploadTitleTextFailed: {
        fontSize: 14,
        fontFamily: 'ProximaNova-Bold',
        textAlign: 'center',
        textAlignVertical: 'center',
        color: Colors.error,
    },
    uploadTitleTextComplete: {
        fontSize: 14,
        fontFamily: 'ProximaNova-Bold',
        textAlign: 'center',
        textAlignVertical: 'center',
        color: Colors.success,
    },
    progressBarStyle: {
        marginTop: 5,
    },
    stepButton: {
        height: 25,
        width: 70,
        backgroundColor: Colors.orangeTransparent,
        borderColor: Colors.warn,
    },
    stepButtonText: { fontSize: 10, fontFamily: 'ProximaNova-Bold', height: 10, color: Colors.warn },
});

React Native Version

0.79.4

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

- There is no output. The app closes without any error

Stacktrace or Logs

/__w/react-native/react-native/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp:701: function layout: assertion failed (YGNodeGetOwner(childYogaNode) == &yogaNode_)

MANDATORY Reproducer

https://github.com/facebook/react-native

Screenshots and Videos

• The app crashes abruptly no warning nothing. Log found in android studio

Inizia da ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp alla riga 701 e riproduci il crash su Android con React Native 0.79.4. Confronta gli stati di rendering condizionale intorno all’esempio ImageUploadProgress fornito, quindi restringi lo stato di layout che viola la Yoga owner assertion. Il lavoro è completato quando il caso che attiva il problema è compreso e il crash improvviso di assertion è risolto o chiaramente ridotto a un reproducer minimo.