[Bug]: Android bug homescreen transparency when goBack

[matteohcf]

Mapbox Implementation

Mapbox

Mapbox Version

10.1.31

React Native Version

0.74.3

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<Point> {
  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>(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: () => <HeaderLeft showBack onPressGoBack={onPressGoBack} />,
      headerRight: () =>
        hasPermission && (
          <Row gap={8}>
            <Col style={styles.centerButton} onPress={onPressCenterPosition}>
              <Icon icon={['fal', 'location-arrow']} size={18} color={colors.primary} />
            </Col>
            <FilterButton onPress={() => onPressSelectedFilter(selectedFilter)} selectedFilter={selectedFilter} disabled={isLoading} />
          </Row>
        ),
    });
  }, [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 onPressPoint = (item: Pee[]) => {
  //   showBottomModal({
  //     children: <PeeDetailMapModal navigation={navigation} pees={item} />,
  //   });
  // };

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

  return (
    <View style={styles.page}>
      {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,
    },
    // userAnnotation: {
    //   width: 20,
    //   height: 20,
    //   borderRadius: 10,
    //   backgroundColor: colors.primary,
    //   borderColor: colors.white,
    //   borderWidth: 2,
    //   opacity: 0.8,
    // },
    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

Video ^^^

Notes / preliminary analysis

I tried:

• change backgroundColor
• change and put navigation.navigate('Home') instead of goBack
• change header transparency and put it with a color

IMPORTANT: the bug is only with the android build, in debug mode it works good (ONLY WITH SOME ANDROID, NOT ALL)

Additional links and references

Video ^^^

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: '../../core/navigation/RootNavigator.tsx' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:6:1:
  4 | import Mapbox from '@rnmapbox/maps';
  5 | import { NativeStackScreenProps } from '@react-navigation/native-stack';
> 6 | import { SharedStackParamList } from '../../core/navigation/RootNavigator.tsx';
    | ^
  7 | import { useStylesheet } from '../../hooks/useStylesheet.ts';
  8 | import { Theme } from '../../types';
  9 | import { userSelectors } from '../../store/user.ts';


error: '../../hooks/useStylesheet.ts' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:7:1:
   5 | import { NativeStackScreenProps } from '@react-navigation/native-stack';
   6 | import { SharedStackParamList } from '../../core/navigation/RootNavigator.tsx';
>  7 | import { useStylesheet } from '../../hooks/useStylesheet.ts';
     | ^
   8 | import { Theme } from '../../types';
   9 | import { userSelectors } from '../../store/user.ts';
  10 | import { useSelector } from 'react-redux';


error: '../../types' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:8:1:
   6 | import { SharedStackParamList } from '../../core/navigation/RootNavigator.tsx';
   7 | import { useStylesheet } from '../../hooks/useStylesheet.ts';
>  8 | import { Theme } from '../../types';
     | ^
   9 | import { userSelectors } from '../../store/user.ts';
  10 | import { useSelector } from 'react-redux';
  11 | import { colors, HEIGHT_DEVICE, SHADOW, spacing } from '../../constant';


error: '../../store/user.ts' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:9:1:
   7 | import { useStylesheet } from '../../hooks/useStylesheet.ts';
   8 | import { Theme } from '../../types';
>  9 | import { userSelectors } from '../../store/user.ts';
     | ^
  10 | import { useSelector } from 'react-redux';
  11 | import { colors, HEIGHT_DEVICE, SHADOW, spacing } from '../../constant';
  12 | import { CONFIG } from '../../../config';


error: '../../constant' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:11:1:
   9 | import { userSelectors } from '../../store/user.ts';
  10 | import { useSelector } from 'react-redux';
> 11 | import { colors, HEIGHT_DEVICE, SHADOW, spacing } from '../../constant';
     | ^
  12 | import { CONFIG } from '../../../config';
  13 | import { Col, HeaderLeft, Icon, Row, Text } from '../../components';
  14 | import { useApiUseQuery } from '../../hooks/useApiUseQuery.ts';


error: '../../../config' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:12:1:
  10 | import { useSelector } from 'react-redux';
  11 | import { colors, HEIGHT_DEVICE, SHADOW, spacing } from '../../constant';
> 12 | import { CONFIG } from '../../../config';
     | ^
  13 | import { Col, HeaderLeft, Icon, Row, Text } from '../../components';
  14 | import { useApiUseQuery } from '../../hooks/useApiUseQuery.ts';
  15 | import { useLocationPermission } from 'react-native-vision-camera';


error: '../../components' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:13:1:
  11 | import { colors, HEIGHT_DEVICE, SHADOW, spacing } from '../../constant';
  12 | import { CONFIG } from '../../../config';
> 13 | import { Col, HeaderLeft, Icon, Row, Text } from '../../components';
     | ^
  14 | import { useApiUseQuery } from '../../hooks/useApiUseQuery.ts';
  15 | import { useLocationPermission } from 'react-native-vision-camera';
  16 | import { t } from 'i18next';


error: '../../hooks/useApiUseQuery.ts' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:14:1:
  12 | import { CONFIG } from '../../../config';
  13 | import { Col, HeaderLeft, Icon, Row, Text } from '../../components';
> 14 | import { useApiUseQuery } from '../../hooks/useApiUseQuery.ts';
     | ^
  15 | import { useLocationPermission } from 'react-native-vision-camera';
  16 | import { t } from 'i18next';
  17 | import { Pee } from '../../types/pee.ts';


error: '../../types/pee.ts' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:17:1:
  15 | import { useLocationPermission } from 'react-native-vision-camera';
  16 | import { t } from 'i18next';
> 17 | import { Pee } from '../../types/pee.ts';
     | ^
  18 | import { showBottomModal } from '../../components/modal';
  19 | import { PeeDetailMapModal } from './components/PeeDetailMapModal.tsx';
  20 | import { FilterButton } from './components/FilterButton.tsx';


error: '../../components/modal' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:18:1:
  16 | import { t } from 'i18next';
  17 | import { Pee } from '../../types/pee.ts';
> 18 | import { showBottomModal } from '../../components/modal';
     | ^
  19 | import { PeeDetailMapModal } from './components/PeeDetailMapModal.tsx';
  20 | import { FilterButton } from './components/FilterButton.tsx';
  21 | import { trigger } from 'react-native-haptic-feedback';


error: './components/PeeDetailMapModal.tsx' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:19:1:
  17 | import { Pee } from '../../types/pee.ts';
  18 | import { showBottomModal } from '../../components/modal';
> 19 | import { PeeDetailMapModal } from './components/PeeDetailMapModal.tsx';
     | ^
  20 | import { FilterButton } from './components/FilterButton.tsx';
  21 | import { trigger } from 'react-native-haptic-feedback';
  22 | import { Feature, FeatureCollection, Point } from 'geojson';


error: './components/FilterButton.tsx' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:20:1:
  18 | import { showBottomModal } from '../../components/modal';
  19 | import { PeeDetailMapModal } from './components/PeeDetailMapModal.tsx';
> 20 | import { FilterButton } from './components/FilterButton.tsx';
     | ^
  21 | import { trigger } from 'react-native-haptic-feedback';
  22 | import { Feature, FeatureCollection, Point } from 'geojson';
  23 | 


12 errors found.```