fix(android,v10): support navigating away and back from a sscreen wit…

[mfazekas]

…h map

Fixes: #2212

Not sure if this is good way to go, but seems to solve the issue. We attache a lifecycle to the MapView and we handle events on onDetachedFromWindow and onAttachedToWindow

[mfazekas]

Used this example to reproduce the issue:

import React, { useState } from 'react';
import {
  Button,
  Image,
  Pressable,
  View,
  StyleSheet,
  Modal,
  Text,
} from 'react-native';
import MapboxGL, {
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
} from '@rnmapbox/maps';

const styles = {
  mapView: { flex: 1 },
  circleLayer: {
    circleRadiusTransition: { duration: 5000, delay: 0 },
    circleColor: '#ff0000',
  },
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'example-icon-and-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        text: 'just-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.001097, 40.71527],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

class BugReportExample extends React.Component {
  state = {
    radius: 20,
    modalVisbile: false,
    showMap: false,
  };

  render() {
    const { navigation } = this.props;
    const { modalVisbile, showMap } = this.state;
    const circleLayerStyle = {
      ...styles.circleLayer,
      ...{ circleRadius: this.state.radius },
    };

    console.log('+++ modalVisible', modalVisbile);
    console.log('### rendering...');

    return (
      <>
        <Button
          title="Grow"
          onPress={() => this.setState({ radius: this.state.radius + 20 })}
        />
        <Button
          title="Modal"
          onPress={() => this.setState({ modalVisbile: true })}
        />
        <Button
          title="Toggle map"
          onPress={() => this.setState({ showMap: !showMap })}
        />
        <Button
          title="Navigate"
          onPress={() => navigation.navigate('ScreenWithoutMap')}
        />
        <Modal
          animationType="slide"
          transparent={false}
          visible={modalVisbile}
          onRequestClose={() => {
            this.setState({ modalVisbile: false });
          }}
        >
          <Text>this is a modal</Text>
          <Button
            title="close"
            onPress={() => {
              this.setState({ modalVisbile: false });
            }}
          />
          <MapView style={{ flex: 1 }} />
        </Modal>
        {showMap && (
          <MapView style={styles.mapView}>
            <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
            <ShapeSource id={'shape-source-id-0'} shape={features}>
              <CircleLayer id={'circle-layer'} style={circleLayerStyle} />
              <SymbolLayer
                id="symbol-id"
                style={{
                  iconImage: ['get', 'icon'],
                }}
              />
            </ShapeSource>
          </MapView>
        )}
      </>
    );
  }
}

export default BugReportExample;