styles with height auto react native not working

Question

this is expected result-->

and this is my result -->

The colors are fine, that doesn't matter. the problem is efectly in the line connector.

This is the code of is a reusable component.

import React from "react";
import { StyleSheet, View } from "react-native";

type props ={
    color:any;
    type:string;
    getParentDimensions?: any;
}
const LineConnector = ({color, type, getParentDimensions}:props) =>{
    return (<>
    <View 
    style=
    {{
    borderWidth:0.5,
    backgroundColor: color,
    borderColor:color ,
    zIndex:-2 ,
    opacity:0.6,
    bottom:16.5,
    marginLeft: type === 'area' ? 45 : type == 'asset' ? 82 : 7,
    }}
    >
    </View>
    <View style={{
        borderBottomColor: color,
        borderBottomWidth: 0.5,
        width:'5%',
        opacity:0.6,
        position:'relative',
        alignSelf:'center',
        marginRight:10,
        top:5
    }}>
        <View style={{
            height:4,
            width:4,
            backgroundColor:color,
            position:'absolute',
            right:0,
            borderRadius:100,
            top:-2
            }}>
        </View>
    </View>
    </>
    )
};

export {LineConnector}

And this in different components like this -->

import React, { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import ChevronDown from '@assets/images/chevron_down.svg';
import CounterAssets from './CounterAssets';
import BoxGradientLayout,{stylesCommon} from './BoxGradientLayout';
import BoxAreas from './BoxAreas';
import { LineConnector } from './LineConnector';

type propsLocations = {
    colors: any;
    locations?: [];
}

const BoxLocations = ({colors,locations}:propsLocations) => {
    const [showAreas, setShowAreas] = useState<number>(-1);
    const styles = StyleSheet.create({ 
        chevronDown:{
            transform:[{rotate: showAreas ? '180deg' : '0deg'}]
        },
    });
    const showViewAreas = (index:number) =>{
       if(index == showAreas){
            setShowAreas(-1);
       }else{
            setShowAreas(index)
       }
    }
    return (
    <>
        {locations?.map((loc:any, index:number)=>(
            <React.Fragment key={loc.id}>
                <View   style={{flexDirection:'row',display:'flex'}}>
                    <LineConnector  color={colors?.site} type='location' />
                        <BoxGradientLayout layoutType='location' colors={ colors?.location}>
                                <Text style={stylesCommon.name}>
                                    {loc?.name}
                                </Text>
                                <CounterAssets count={loc?.assets_counter} />
                        </BoxGradientLayout>
                        <View style={stylesCommon.containerChevron}>
                            <Pressable onPress={() => showViewAreas(index)} style={({ pressed }) => [pressed ? stylesCommon.chevronDownPress : styles.chevronDown]}>
                                        <ChevronDown fill={ colors?.location} fillOpacity={'0.03'} stroke={ colors?.location} />
                            </Pressable>
                        </View>
                </View>
                    {showAreas == index ? (
                        <View style={stylesCommon.childrenBox}>
                        <BoxAreas areas={loc.areas} colors={colors}/>
                        </View>
                    ) : null}
            </React.Fragment>
        ))}
    </>
    );
}

this is parent component style sheet and styles common (BoxLocations) -->

export const stylesCommon = StyleSheet.create({
    name:{
        paddingLeft:20,
        right:5
    },
    containerChevron:{
        top:5 ,    
        left:4,           
        alignItems:'center',
        flexDirection:'row', 
        elevation:5
    },
    chevronDownPress:{
        opacity:0.4,
     },
     childrenBox:{
        flexDirection:'column',
        position:'relative',
     }
})

Style Boxs Gradients -->

const styles = StyleSheet.create({
        container:{
            flexDirection:'row',
        },
        containerGradient:{
            height:33,
            width:'auto',
            marginTop:10,
            alignSelf:'flex-start',
            alignItems:'center',
            flexDirection:'row',
            backgroundColor: colors,
            borderRadius:10,
            borderWidth:1,
            borderColor: colors,
            elevation:5
        },
        icons:{
            height:20,
            width:20,
            backgroundColor: colors,
            justifyContent:'center',
            alignItems:'center',
            borderRadius:100,
            left:4
        }
    });

I've been trying this functionality for several days and I can't find a solution.

Is it possible without installing libraries?

Any ideas?

Thanks!!

Sorry for the delay,i'am new. Below is my minimal reproducible example. I hope it is understood. The bullets represent the arrows that we see in the images and every time I enter each child the main line of the First Component separates and would have to continue until the last child without separating.

minimal reploducible example