I want to use react-native-maps-clustering but this one only takes markers which are direct children of maps.
like the example
<MapView>
<Marker/>
<Marker/>
</MapView>
In my case my markers are in another file nested in other elements
<MapView>
<MarkersLayer/>
</MapView>
MarkersLayer.tsx
<Fragment>
<Trajectory/>
<Fragment>
<Marker>
<MarkerStyle/>
<Marker/>
</Fragment>
</Fragment>
Test : In the library - ClusteredMapView.js - l.84
propsChildren.forEach((child, index) => {
//my test
if (child.type?.name == "MarkersLayer"){
console.log('I am MarkersLayer')
React.Children.forEach(child, ch => {
console.log("child MarkersLayer", ch)
})
}else if (child.props.coordinate){
console.log("I am a marker", child)
}
//end
if (isMarker(child)) {
rawData.push(markerToGeoJSONFeature(child, index));
} else {
otherChildren.push(child);
}
});
Children in MapView :
Children in MarkerLayer :
Test : In my MarkerLayer component
const propsChildren = useMemo(
() => React.Children.toArray(children),
[children],
);
Result :
The library uses React.Children to find the children contained in MapView but I can't get the markers in MarkerLayer.
Thanks for the people reading this post and for the answers :)
Try using useState() and useEffect().
This is done like so:
const [children, setChildren] = useState([]);
useEffect(() => {
setChildren(React.Children.toArray(children))
}, []);