Layout and render a View in a MapView component - React native

Im fairly new to React native. I have created a MapView component on my screen and am trying to add a map key that indicates what each marker color is. I was able to achieve this only to find out that the layout bugs out when I leave and return to that screen

Example

This is what i'm trying to achieve

This is what I keep getting

This is my code

<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
        <View style={{ flex: 0.6 }}>
            <MapView
                style={{ flex: 1 }}
                showsMyLocationButton={true}
                showsUserLocation={true}
                followsUserLocation={lock}
                onTouchStart={() => {
                    set(false)
                }}
                onPress={(loc) => {
                    setLocation(loc.nativeEvent.coordinate)
                }}
            >
                   {/* Map key view begins here */}
                <View
                    style={{
                        alignSelf: 'center',
                        alignContent: 'center',
                        backgroundColor: '#202B35',
                        padding: 10,
                        paddingHorizontal: 35,
                        margin: 5,
                        borderRadius: 5,
                        alignItems: 'center',
                    }}
                >
                    <View style={{ flexDirection: 'row' }}>
                        <Badge
                            status="error"
                            containerStyle={{ padding: 5 }}
                        />
                        <Text
                            style={{
                                color: '#fff',
                                fontSize: 16,
                                marginBottom: 5,
                            }}
                        >
                            New Crossing
                        </Text>
                    </View>

                    <View style={{ flexDirection: 'row' }}>
                        <Badge
                            status="primary"
                            containerStyle={{ padding: 5 }}
                        />
                        <Text style={{ color: '#fff', fontSize: 16 }}>
                            {'Existing Crossings'}
                        </Text>
                    </View>
                </View>
                <Marker coordinate={location} />
            </MapView>
        </View>

Any help would be very appreciative. please let me know if I am missing any vital information on this post.