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

从 ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp 第 701 行开始，使用 React Native 0.79.4 在 Android 上复现崩溃。比较所提供的 ImageUploadProgress 示例周围的条件渲染状态，然后缩小导致违反 Yoga owner assertion 的布局状态。完成的标准是理解触发该问题的情况，并解决突然发生的 assertion 崩溃，或将其明确缩减为最小复现器。