Map(RNMapboxGL) is blank when taking a screenshot on ANDROID

[gabrielluka]

Bug report

Map(RNMapboxGL) is blank when taking a screenshot on ANDROID

I'm trying to take a screenshot of the map to share, but on the android platform it doesn't work as expected because the map doesn't appear on the screenshot

Version & Platform

    "react-native": "0.61.5"
    "react-native-view-shot": "^3.1.2"
    "@react-native-mapbox-gl/maps": "8.0.0"

Platform: Android

Expected behavior

only android happens, in ios works perfetly

Actual behavior

Steps to reproduce the behavior

Implementation

StoryContainer.tsx

  const viewShot = useRef(null)
  
  ....
   
  const onShareHandler = async () => {
    try {
      // eslint-disable-next-line
      const shareImage = await viewShot.current.capture()
      // eslint-disable-next-line
      const shareResponse = await Share.open({ url: shareImage })
    } catch (error) {
      sentryService().captureException(error)
    }
  }
  
  
  ....

  return (
    <ViewShot ref={viewShot} style={styles.storyContainer} options={{ format: 'jpg', quality: 1 }}>
      <Carousel
        ref={fowardedRef}
        data={farmStories}
        firstItem={currentFarmStory}
        renderItem={({ item, index }) => (
          <StoryContainerItem
            onClose={onClose}
            onNextStoryHandler={onNextStoryHandler}
            onPrevStoryHandler={onPrevStoryHandler}
            onShareHandler={onShareHandler}
            activeStory={item}
            activeIndex={index}
          />
        )}
        sliderWidth={width}
        itemWidth={width}
        slideStyle={{ opacity: 1 }}
        inactiveSlideOpacity={1}
        containerCustomStyle={{ width }}
        onSnapToItem={onAreaStoryChange}
        scrollInterpolator={scrollInterpolator}
        slideInterpolatedStyle={animatedStyles}
      />
    </ViewShot>
  )

[maryaibtissem]

Hey, I have the same problem, did you find a solution?

[bartlomiejlechowski]

+1