react native maps callout content is overflowed - react-native

Question

i got a problem with react native maps callout , each marker update its position every 10 seconds, callout starts hidden but, when you press the marker it open the callout and keep it open each new position update, but sometimes the callout content is places out of bounds of the callout container.
image:
callout content not fit in it container
code:
`
import * as React from "react"
import { Text, View,StyleSheet } from 'react-native';
import { Marker,Callout } from 'react-native-maps';
import Svg, { Path, Circle } from "react-native-svg";
import moment from "moment";
import "moment/min/locales.min.js";
import { FontAwesome, FontAwesome5 } from '#expo/vector-icons';
import useStatusImei from "../../hooks/useStatusImei";
import { fecha,timediff } from "../../utils/App";
import {MapaContext} from "../../context/MapaContextProvider";
moment.locale("es");
const Icon = ({ignicion,velocidad,vel_max,grados,color}) =>{
return ignicion == 1 && velocidad > 1 ?
(
<Svg width={60} height={60} xmlns="http://www.w3.org/2000/svg" style={{ transform: [{ rotate: `${grados}deg` }] }}>
<Path
style={[styles.ign,{ stroke: velocidad >= vel_max ? '#ed6b75' : "#fff", fill: color }]}
d="m38.828 45.578 14.599 7.815-7.085-16.295a17.412 17.412 0 0 0 1.338-6.704c0-7.495-4.729-13.869-11.36-16.348L30.213 0l-6.107 14.046c-6.63 2.479-11.36 8.853-11.36 16.348 0 2.376.479 4.639 1.338 6.704L7 53.393l14.599-7.815a17.37 17.37 0 0 0 8.614 2.283c3.136 0 6.071-.837 8.615-2.283z"
/>
</Svg>
)
:
(
<Svg width={40} height={40} xmlns="http://www.w3.org/2000/svg">
<Circle style={[styles.off,{fill: color}]} cx={20} cy={20} r={18} />
</Svg>
)
}
const InfoWindow = ({numero,marca,info,color,time_color,fecha_hora_gps, ignicion,velocidad,vel_max,fecha_hora_ultimo_encendido,odometro, odometro_ultimo_encendido, fecha_hora_inicio_relenti,fecha_hora_ultimo_apagado,fecha_hora_fin_ultimo_viaje,fecha_hora_inicio_ultimo_viaje,odometro_fin_ultimo_viaje,odometro_inicio_ultimo_viaje}) =>{
let informacion, detalle,color_velocidad;
if( ignicion == 1){
if(Math.floor(velocidad)>1){//en movimiento
if( Math.floor(velocidad) < vel_max && Math.floor(velocidad) >=( vel_max - 5 )){
color_velocidad= '#F1C40F';
}else if(Math.floor(velocidad)>=vel_max){
color_velocidad= '#ed6b75';
detalle = (<Text style={{color:color_velocidad,fontWeight:'500'}}>¡Exceso de Velocidad!</Text>);
}else {
color_velocidad = '#26C281';
detalle = (
<View style={styles.info}>
<FontAwesome5 name="code-branch" size={15} color="#5867dd" />
<Text style={styles.text}> {timediff((moment().unix(fecha_hora_gps) - moment(fecha_hora_ultimo_encendido).unix()),0)} </Text>
<Text style={styles.text}> {( ( odometro - odometro_ultimo_encendido) / 1000 ).toFixed(1)}kms</Text>
</View>
);
}
informacion = (
<View>
<View><Text style={[styles.vel,{color:color_velocidad}]}>{ Math.round(velocidad)} kms/h</Text></View>
<View>
{detalle}
</View>
</View>
);
}else{//en relenti
informacion = (<View><Text style={{color,fontWeight:'500'}}>En relentí {timediff((moment().unix() - moment(fecha_hora_inicio_relenti).unix()),0)}</Text></View>);
}
}else{
informacion = (
<View>
<View><Text style={styles.text}>Apagado desde {moment(fecha_hora_ultimo_apagado).calendar()}</Text></View>
<View style={styles.info}>
<FontAwesome5 name="code-branch" size={15} color="#5867dd" />
<Text style={styles.text}> {timediff((moment(fecha_hora_fin_ultimo_viaje).unix() - moment(fecha_hora_inicio_ultimo_viaje).unix()),0)} </Text>
<Text style={styles.text}> {((odometro_fin_ultimo_viaje - odometro_inicio_ultimo_viaje) / 1000 ).toFixed(1)} kms </Text>
</View>
</View>
);
}
//
return (
<Callout>
<View style={styles.calloutContainer} >
<Text><Text style={styles.bold}>{numero}</Text> <Text style={styles.text}>{marca}</Text></Text>
{informacion}
<Text style={[styles.text,{fontSize:12}]} ><FontAwesome name="cloud-upload" size={14} color={time_color} /> {fecha(fecha_hora_gps,5)}</Text>
</View>
</Callout>);
}
const Unidad = ({ unidad,aforos = false }) => {
const {setUnidadFocus,unidad_focus} = React.useContext(MapaContext);
const item = useStatusImei({...unidad},aforos);
const markerRef = React.useRef(undefined);
const handleCallout = ()=>{
markerRef.current.showCallout();
setUnidadFocus({imei:item.imei,fecha_hora_gps:item.fecha_hora_gps,marker:markerRef});
}
React.useEffect(()=>{
if(unidad_focus && unidad_focus.imei == item.imei && !unidad_focus.marker){
handleCallout()
}
},[markerRef.current]);
let fz =12;
if (item && item.latitud && item.longitud) {
if(item.numero.length > 6)
fz = 9
if(item.numero.length > 5)
fz = 10
if(item.numero.length > 4)
fz = 11
return (
<Marker
ref = {(ref)=>{markerRef.current = ref}}
key={item.imei}
coordinate={{ latitude: item.latitud, longitude: item.longitud }}
anchor={{ x: 0.5, y: 0.5 }}
style={styles.marker}
tracksViewChanges={false}
flat={true}
onPress={()=>{handleCallout()}}
>
<Icon {...item} />
<Text style={[styles.markerLabel,{fontSize:fz}]}>{item.numero}</Text>
<InfoWindow {...item} />
</Marker>
);
}
return null;
};
const styles = StyleSheet.create({
marker:{ justifyContent: "center", alignItems: "center" },
calloutContainer: {
width:250,
height:100,
justifyContent:'center',
alignItems: 'center',
padding:5
},
bold:{
fontWeight:'600',
color:"#5867dd",
fontSize:16
},
text:{
color:'#57585a'
},
markerLabel: { color: '#FFFFFF', position: 'absolute', fontSize: 13, fontWeight: '400' },
info:{flexDirection:"row",alignItems:'center',justifyContent:'space-around'},
off:{ strokeWidth: 4, strokeOpacity: 0.5, stroke: "#fff", fillRule: "nonzero" },
ign:{strokeWidth: 6, strokeOpacity: 0.5, fillRule: "nonzero"},
vel: {fontWeight:'500',textAlign:'center'}
})
export default Unidad
`
I read along this forum, changed the components structure, set fixed width and height callout container and keep it with basic text but in each change the problem keep apearing only sometimes, in expo app and in production app.