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

Commencez par ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp à la ligne 701 et reproduisez le crash sur Android avec React Native 0.79.4. Comparez les états du rendu conditionnel autour de l’exemple ImageUploadProgress fourni, puis cernez l’état de layout qui enfreint la Yoga owner assertion. Le travail est terminé lorsque le cas déclencheur est compris et que le crash brutal d’assertion est résolu ou clairement réduit à un reproducer minimal.