[Bug]:The background is black instead of transparent

[pronchik]

Mapbox Implementation

Mapbox

Mapbox Version

10.1.38

React Native Version

0.76.9

Platform

iOS, Android

@rnmapbox/maps version

10.1.38

Standalone component to reproduce

import React, {
  memo, useCallback, useEffect, useMemo, useState,
} from 'react';
import MapboxGL from '@rnmapbox/maps';


const MemoizedMapView = memo(MapboxGL.MapView);

 const transparentStyle = {
    version: 8,
    name: 'Transparent Base',
    sources: {},
    layers: [
      {
        id: 'background',
        type: 'background',
        paint: {
          'background-color': 'rgba(0,0,0,0)',
          'background-opacity': 1,
        },
      },
    ],
  };

<MemoizedMapView
          styleJSON={JSON.stringify(transparentStyle)}
  />

Observed behavior and steps to reproduce

The background is black instead of transparent

Expected behavior

The background is black instead of transparent

Notes / preliminary analysis

No response

Additional links and references

No response

[mfazekas]

@pronchik next time pls add a full component, so it's easier to reproduce.

On iOS we'd need to use _mapView.isOpaque = false

On android maybe using textureView is enough? Not tried.

https://github.com/mapbox/mapbox-maps-android/blob/5fd5ded6c737809815f5d1fc80d955ee1b3afb53/app/src/main/res/layout/activity_transparent_background.xml
https://docs.mapbox.com/android/maps/examples/transparent-background/

import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
import Mapbox, { MapView } from '@rnmapbox/maps';
import { View } from 'react-native';

const transparentStyle = {
  version: 8,
  name: 'Transparent Base',
  sources: {},
  layers: [
    {
      id: 'background',
      type: 'background',
      paint: {
        'background-color': 'rgba(255, 0, 0, 0.1)',
        'background-opacity': 0.9,
      },
    },
  ],
};

export default function BugReportExample() {
  return (
    <View style={{ flex: 1, backgroundColor: 'blue' }}>
      <MapView
        style={{ flex: 1, margin: 10 }}
        styleJSON={JSON.stringify(transparentStyle)}
      />
    </View>
  );
}