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

Activity

1. pronchik

   added

   bug 🪲Something isn't workingSomething isn't working

   on Sep 3, 2025
2. github-actions

   added

   error-in-code

   on Sep 3, 2025
3. github-actions

   closed this as completedon Sep 3, 2025
4. github-actions

   added

   reopen-on-code-fixed

   on Sep 3, 2025
5. pronchik

   changed the title [-][Bug]:[/-] [+][Bug]:The background is black instead of transparent[/+] on Sep 3, 2025
6. github-actions

   removed

   error-in-code

   on Sep 3, 2025
7. github-actions

   reopened this on Sep 3, 2025
8. github-actions

   removed

   reopen-on-code-fixed

   on Sep 3, 2025
9. mfazekas

   added

   reproducedThe issue could be reproducedThe issue could be reproduced

   feature

   on Sep 20, 2025
10. mfazekas commented on Sep 20, 2025

    

    mfazekas

    on Sep 20, 2025

    Contributor

    More actions

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