[Bug]: Android homescreen transparency when goBack

[matteohcf]

Mapbox Implementation

Mapbox

Mapbox Version

10.1.31

React Native Version

0.76.5

Platform

Android

@rnmapbox/maps version

10.1.31

Standalone component to reproduce

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { SharedStackParamList } from '../../core/navigation/RootNavigator.tsx';
import { useStylesheet } from '../../hooks/useStylesheet.ts';
import { Theme } from '../../types';
import { userSelectors } from '../../store/user.ts';
import { useSelector } from 'react-redux';
import { colors, HEIGHT_DEVICE, SHADOW, spacing } from '../../constant';
import { CONFIG } from '../../../config';
import { Col, HeaderLeft, Icon, Row, Text } from '../../components';
import { useApiUseQuery } from '../../hooks/useApiUseQuery.ts';
import { useLocationPermission } from 'react-native-vision-camera';
import { t } from 'i18next';
import { Pee } from '../../types/pee.ts';
import { showBottomModal } from '../../components/modal';
import { PeeDetailMapModal } from './components/PeeDetailMapModal.tsx';
import { FilterButton } from './components/FilterButton.tsx';
import { trigger } from 'react-native-haptic-feedback';
import { Feature, FeatureCollection, Point } from 'geojson';

Mapbox.setAccessToken(CONFIG.MAPBOX_ACCESS_TOKEN);

type Props = NativeStackScreenProps<SharedStackParamList, 'Map'>;

export enum FilterEnum {
ALL = '',
LAST = 100,
}

interface PeeFeature extends Feature {
properties: {
id: string;
};
}

export const Map = ({ navigation, route }: Props) => {
const passedPee = route.params?.pee;
const styles = useStylesheet(createStyles);
const camera = useRef<Mapbox.Camera>(null);
const map = useRef<Mapbox.MapView>(null);
const { hasPermission } = useLocationPermission();
const userCoordinates = useSelector(userSelectors.geolocation);
const [selectedFilter, setSelectedFilter] = useState(FilterEnum.LAST);
const { data, isLoading, error } = useApiUseQuery({
queryKey: [pees/history-map-${selectedFilter}],
queryUrl: 'pees/history',
filters: { limit: selectedFilter, sort: '-createdAt' },
});

const onPressSelectedFilter = (filter: FilterEnum) => {
if (filter === FilterEnum.ALL) {
setSelectedFilter(FilterEnum.LAST);
}
if (filter === FilterEnum.LAST) {
setSelectedFilter(FilterEnum.ALL);
}
};

const onPressGoBack = () => {
navigation.navigate('Home');
};

useEffect(() => {
navigation.setOptions({
headerLeft: () => ,
headerRight: () =>
hasPermission && (


<Icon icon={['fal', 'location-arrow']} size={18} color={colors.primary} />

<FilterButton onPress={() => onPressSelectedFilter(selectedFilter)} selectedFilter={selectedFilter} disabled={isLoading} />

),
});
}, [navigation, hasPermission, selectedFilter, isLoading]);

const zoomLevel = passedPee ? 16 : 10;
const centerCoordinates = passedPee ? passedPee?.position?.coordinates : userCoordinates?.coordinates;

const featureCollection = useMemo<FeatureCollection<Point, PeeFeature['properties']>>(
() => ({
type: 'FeatureCollection',
features:
data?.map((pee: Pee) => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: pee.position?.coordinates || [0, 0],
},
properties: {
id: pee.id,
},
})) || [],
}),
[data],
);

const onPressCenterPosition = () => {
if (userCoordinates?.coordinates) {
trigger('impactLight');
camera.current?.setCamera({
centerCoordinate: userCoordinates.coordinates,
zoomLevel: 16,
animationDuration: 1000,
});
}
};

return (

{hasPermission && (
<Mapbox.MapView
ref={map}
style={styles.map}
styleURL="mapbox://styles/mapbox/light-v11"
projection={'globe'}
logoEnabled={false}
attributionEnabled={false}
scaleBarEnabled={false}>
<Mapbox.Camera ref={camera} zoomLevel={zoomLevel} centerCoordinate={centerCoordinates} animationMode={'flyTo'} animationDuration={2000} />

      <Mapbox.ShapeSource id="clusteredPoints" cluster clusterMaxZoomLevel={16} clusterRadius={30} shape={featureCollection}>
        <Mapbox.CircleLayer
          id="clusters"
          filter={['has', 'point_count']}
          style={{
            circleColor: colors.primary,
            circleRadius: [
              'interpolate',
              ['linear'],
              ['get', 'point_count'],
              1,
              12, // per 1 punto, raggio 20
              5,
              15, // per 5 punti, raggio 22
              10,
              20, // per 10 punti, raggio 20
              50,
              22, // per 50 punti, raggio 22
              100,
              25, // per 100 punti, raggio 25
              200,
              30, // per 200 punti, raggio 30
              500,
              30, // per 500 punti, raggio 30
              750,
              30, // per 750 punti, raggio 30
            ],
            circleOpacity: 0.9,
            circleStrokeWidth: 1,
            circleStrokeColor: 'white',
          }}
        />

        <Mapbox.SymbolLayer
          id="cluster-count"
          filter={['has', 'point_count']}
          style={{
            textField: '{point_count_abbreviated}',
            textFont: ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
            textSize: 13,
            textColor: 'white',
          }}
        />

        <Mapbox.CircleLayer
          id="unclustered-point"
          filter={['!', ['has', 'point_count']]}
          style={{
            circleColor: colors.primary,
            circleRadius: 10,
            circleOpacity: 0.9,
            circleStrokeWidth: 1,
            circleStrokeColor: 'white',
          }}
        />
      </Mapbox.ShapeSource>
    </Mapbox.MapView>
  )}
  {!hasPermission && (
    <Col alignItems={'center'} mt={HEIGHT_DEVICE / 3} mh={spacing.screenHorizontal}>
      <Text mt={50} fontSize={16}>
        {t('you do not have location permission')}
      </Text>
    </Col>
  )}
</View>

);
};

const createStyles = ({ colors, insets, shapes }: Theme) =>
StyleSheet.create({
page: {
backgroundColor: colors.containerBckGround,
flex: 1,
},
map: {
backgroundColor: colors.containerBckGround,
flex: 1,
},
centerButton: {
justifyContent: 'center',
alignItems: 'center',
width: 40,
height: 40,
borderRadius: shapes.md,
backgroundColor: colors.white,
...SHADOW.MEDIUM,
},
});

Observed behavior and steps to reproduce

592a60e0-9a8a-484d-b8f1-4f8847d45e8a.MP4

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[github-actions]

No code example found in issue body - More info