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

Comienza con ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp en la línea 701 y reproduce el crash en Android con React Native 0.79.4. Compara los estados de renderizado condicional alrededor del ejemplo ImageUploadProgress proporcionado y, después, acota el estado de layout que infringe la Yoga owner assertion. La tarea estará terminada cuando se comprenda el caso que lo desencadena y el crash abrupto de assertion se haya resuelto o reducido claramente a un reproducer mínimo.