Should i map over my data to show many shapesources ? please answer

[anis-18]

I'm seeing examples and i observed that all examples are passing shapes to shape prop of ShapeSource however i did like that, am i worng ?

 {parkingMetersFlatted.map(parkingMeter => {
              if (parkingMeter.center_coordinates) {
                return (
                  <ShapeSource
                    key={`point-${parkingMeter.id}`}
                    id={`point-${parkingMeter.id}`}
                    shape={{
                      type: 'Point',
                      coordinates: parkingMeter.center_coordinates,
                    }}>
                    <Images
                      images={{
                        parking_machine: require('../../../assets/parking-machine.png'),
                      }}
                    />
                    <SymbolLayer
                      id={`symbol-${parkingMeter.id}`}
                      style={{
                        iconImage: 'parking_machine',
                        iconSize: 1,
                      }}
                    />
                  </ShapeSource>
                );
              }
            })}

[ChimiChumi]

If you have a geojson file with valid data, you should pass it like this:

import geoJson from '../assets/test.json';
...
const [lineStrings, setLineStrings] = useState([]);
const filteredLineStrings = geojson.filter(feature => feature.geometry.type === 'LineString');
//where geojson contains the data generated by https://geojson.io/

setLineStrings(filteredLineStrings);
...
...
<ShapeSource id="lineLayer-1" shape={{type: 'FeatureCollection', features: lineStrings}}>

Please refer to the extremely useful example application:
https://github.com/rnmapbox/maps/tree/main/example
https://rnmapbox.github.io/docs/examples

I recommend pulling/forking the whole repo, navigate into the example folder and read the README.md.
After installing it, you can run the application easily via: npx react-native start