React-native-maps fill regions with different colors - reactjs

Question

I'm using the react-native-maps library to render GeoJSON data to a map. Is there a way to fill regions with different colors? I have a GeoJSON file of countries, and I'm passing it into the <Geojson> component.
<MapView
style={styles.map}
zoomEnabled
provider={PROVIDER_GOOGLE}
>
<Geojson
fillColor="red"
geojson={geojson}
/>
</MapView>
This is the result:
Similar question: react-native-maps fill color to each region.

Answer 1

The simplest way to do this is to add fill property to the features in your GeoJSON object before passing it to the <Geojson /> component.
const colorizedGeojson = {
...geojson,
features: geojson.features.map(feature => ({
...feature,
properties: {
...feature.properties,
fill: getColor(feature.properties.values.population)
}
})),
};
You'll have to implement your own getColor function, depending on the data you want to represent. The population value used here is just an example. Using d3 interpolation to get the color for the value you want to represent is a common choice.
Once you've added the fill property to your GeoJSON data, you can pass that object to the component instead of the raw GeoJSON. Make sure you don't pass the fillColor property to the component, as that would override the feature colors.
<Geojson geojson={colorizedGeojson} />
Et voila! The react-native-maps component will render each region/country with the color you choose:

Answer 2

It is possible to use multiple <Geojson /> component and set different fillColor prop to them. Something like that.
{geojson.features.map(feature => {
const insertedObject = {
features: [feature]
};
if (feature.id === 'AGO' ||feature.id === 'AFG' || feature.id === 'RUS') {
return <Geojson
geojson={insertedObject}
fillColor={'orange'}
/>
}
return <Geojson
geojson={insertedObject}
fillColor={'red'}
/>
})}