I have the following issue in React Native:

enter image description here

As you can see there is a white line between the child item and its parent and I cannot determine the cause. The line stays even if I apply absolute positioning with width = 100% on the child item.

Here is the code:

<Pressable style={ [ styles.mealItem, index === dataProps?.item.mealNutrients.length - 1 ? { borderBottomWidth: 0 } : {}, { backgroundColor: mealNutrient.eaten === null && !dataProps.isAfter ? COLOR_MAP.white : (mealNutrient.eaten === true ? COLORS.completed : COLORS.failed) } ] }
           onPress={ () => onNutrientCheckedChanged(mealNutrient.id)}
           key={ mealNutrient.id }>
           {
                loadingId !== null && loadingId === mealNutrient.id ?
                <View style={ [styles.mealItemCheckbox, { borderColor: 'transparent', backgroundColor: 'transparent' }] }>
                    <MaterialIndicator size={16} color={ COLOR_MAP.black } />
                </View>
                :
                (
                    mealNutrient.eaten === null && !dataProps?.isAfter
                    ?
                        <View style={ styles.mealItemCheckbox } />
                    :
                    mealNutrient.eaten === true ? <Icon name="checkmark-circle-sharp" size={24} color={COLOR_MAP.success} /> : <Icon name="close-circle-outline" size={24} color={COLOR_MAP.alert} />
                )
            }
            <View style={ { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', width: '100%', columnGap: 4 } }>
                <Text style={ [styles.mealItemTitle, { color: mealNutrient.eaten === null && !dataProps?.isAfter ? COLOR_MAP.black : (mealNutrient.eaten === true ? COLOR_MAP.success : COLOR_MAP.alert), minWidth: '75%', maxWidth: '75%' }] }>{ mealNutrient.name }</Text>
                <Text style={ [styles.mealItemTitle, { color: mealNutrient.eaten === null && !dataProps?.isAfter ? COLOR_MAP.black : (mealNutrient.eaten === true ? COLOR_MAP.success : COLOR_MAP.alert) }] }>{ mealNutrient.quantity + ' ' + mealNutrient.measuringUnit }</Text>
            </View>
</Pressable>

const containerStyle = {
                        backgroundColor: 'rgba(104, 214, 151, 0.2)',
                        borderWidth: 1,
                        borderColor: COLOR_MAP.success,
                        borderRadius: 4,
                        flexDirection: 'column',
                        justifyContent: 'space-between',
                        minHeight: 120,
                        overflow: 'hidden'
                       };
const statusContainerStyle = {
                         borderBottomLeftRadius: 4,
                         borderBottomRightRadius: 4,
                         backgroundColor: COLOR_MAP.success,
                         flexDirection: 'row',
                         columnGap: 4,
                         padding: 8,
                       };

I’ve tried absolute position of the child with no success. I’ve tried moving the item with a margin but it moves it too much.