Multiple LineLayer Colour doesn't change in the ShapeSource

Question

I have use the MapBox to draw multiple lines with different coordinate, So I use the ShapeSource layer and LineLayer for this, Currently I have take one ShapeSource layer in it. and add two line layer, The line should different color but in map it's display only single color.

One line layer color should red and other should green.

Code ::

let featureCollection = [
  {
    type: "Feature",
    properties: { color: "red" },
    geometry: {
      type: "LineString",
      coordinates: [
        [1.023194, 7.946528],
        [0.93005, 8.554639],
        [1.431726, 8.61838],
        [1.483318, 9.000202],
        [2.005096, 9.002147],
        [2.583486, 9.396939],
        [2.439416, 9.782727],
        [2.718134, 10.336571],
        [2.760431, 11.092622],
        [3.587083, 11.990781],
        [3.544915, 12.64725],
        [3.74451, 13.056562],
        [3.902861, 13.039418],
        [4.411557, 13.622376],
        [4.932224, 13.788399],
        [4.736514, 14.462161],
        [5.25854, 14.90048],
        [5.336759, 15.593429],
        [5.800658, 15.903908],
        [5.753171, 16.280243],
        [6.125972, 17.373351],
        [6.061882, 18.806859],
        [5.773197, 19.505027],
        [5.780191, 20.844999],
        [5.428159, 22.666003],
        [5.713896, 22.944738],
        [5.763205, 23.654738],
        [7.397073, 25.060067],
        [7.352812, 25.732464],
      ],
    },
  },
  {
    type: "Feature",
    properties: { color: "green" },
    geometry: {
      type: "LineString",
      coordinates: [
        [27.84931, -13.133984],
        [28.226637, -12.537425],
        [27.558161, -11.638463],
        [27.952453, -11.129576],
        [27.204369, -9.244411],
        [27.238034, -7.792886],
        [26.13459, -7.455348],
        [25.428301, -6.254818],
        [24.482978, -5.97556],
        [24.275024, -3.06516],
        [23.407, -2.22699],
        [23.393044, -1.333777],
        [22.269193, -0.586803],
        [22.457468, 0.68996],
        [20.968402, 1.779982],
        [21.521327, 2.142979],
        [21.454121, 2.947052],
        [20.75021, 2.814715],
        [19.392839, 4.146715],
        [18.58327, 4.357795],
        [18.651652, 5.052913],
      ],
    },
  },
];

MapBox ::

<MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Light}
        zoomLevel={2}
        centerCoordinate={[22.9375, 30.5595]}
        // centerCoordinate={[72.586952, 23.16729]}
        style={{
          height: deviceHeight,
          width: deviceWidth,
        }}
      >
        <MapboxGL.ShapeSource
          id="line"
          shape={{
            type: "FeatureCollection",
            features: featureCollection,
          }}
        >
          {featureCollection.map((item) => {
            return (
              <MapboxGL.LineLayer
                id={"linelayer"}
                style={{
                  lineJoin: "round",
                  lineColor: item.properties.color,
                  lineWidth: 5,
                  lineCap: "round",
                }}
              />
            );
          })}
        </MapboxGL.ShapeSource>
      </MapboxGL.MapView>

Output ::

Please help me

Answer 1

You only need one LineLayer to draw both the lines, and you need to use a data-driven property to grab the color from your feature collection and use it.

<MapboxGL.MapView style={styles.map} styleURL={MapboxGL.StyleURL.Light}>
  <MapboxGL.ShapeSource id="line" shape={feature}>
    <MapboxGL.LineLayer
      id={"linelayer"}
      style={{
        lineJoin: "round",
        lineColor: ["get", "color"],
        lineWidth: 5,
        lineCap: "round",
      }}
    />
  </MapboxGL.ShapeSource>
</MapboxGL.MapView>