[Bug]:The background is black instead of transparent

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

@pronchik

@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>
  );
}

feat: add transparent prop to MapView (#4361)

Navigation Menu

Repository navigation

[Bug]:The background is black instead of transparent #3961

Mapbox Implementation

Mapbox Version

React Native Version

Platform

`@rnmapbox/maps` version

Standalone component to reproduce

Observed behavior and steps to reproduce

Expected behavior

Notes / preliminary analysis

Additional links and references

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Bug]:The background is black instead of transparent #3961

Description

Mapbox Implementation

Mapbox Version

React Native Version

Platform

@rnmapbox/maps version

Standalone component to reproduce

Observed behavior and steps to reproduce

Expected behavior

Notes / preliminary analysis

Additional links and references

Activity

mfazekas commented on Sep 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`@rnmapbox/maps` version