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

Beginnen Sie mit ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp in Zeile 701 und reproduzieren Sie den Absturz auf Android mit React Native 0.79.4. Vergleichen Sie die Zustände der bedingten Darstellung rund um das bereitgestellte Beispiel ImageUploadProgress und grenzen Sie dann den Layoutzustand ein, der die Yoga owner assertion verletzt. Die Aufgabe ist erledigt, wenn der auslösende Fall verstanden ist und der abrupte Assertion-Absturz behoben oder eindeutig auf einen minimalen Reproducer reduziert wurde.