Image Overlay

import React from 'react';
import Mapbox from '@rnmapbox/maps';
import { Text } from 'react-native';

import Bubble from '../common/Bubble';
import sheet from '../../styles/sheet';
import radar0 from '../../assets/radar.png';
import radar1 from '../../assets/radar1.png';
import radar2 from '../../assets/radar2.png';

const styles = {
  rasterLayer: { rasterOpacity: 0.6 },
  bubble: { bottom: 100 },
};

const frames = [radar0, radar1, radar2];
const coordQuads = [
  [
    [-80.425, 46.437], // top left
    [-71.516, 46.437], // top right
    [-71.516, 37.936], // bottom right
    [-80.425, 37.936], // bottom left
  ],
  [
    [-85.425, 45.437], // top left
    [-75.516, 45.437], // top right
    [-75.516, 36.936], // bottom right
    [-85.425, 36.936], // bottom left
  ],
];

class ImageOverlay extends React.Component {
  state = {
    radarFrameIndex: 0,
    coords: coordQuads[0],
    dynamic: false,
  };

  _timeout = null;

  componentDidMount() {
    this.heartbeat();
  }

  heartbeat() {
    this._timeout = setTimeout(() => {
      requestAnimationFrame(() => {
        let nextFrame = this.state.radarFrameIndex + 1;
        if (nextFrame > 1) {
          nextFrame = 0;
        }

        if (this.state.dynamic) {
          this.setState({
            radarFrameIndex: nextFrame,
            coords: coordQuads[nextFrame],
          });
        } else {
          this.setState({ radarFrameIndex: nextFrame });
        }
        this.heartbeat();
      });
    }, 1000);
  }

  componentWillUnmount() {
    if (this._timeout) {
      clearTimeout(this._timeout);
    }
  }

  render() {
    const bubbleText = this.state.dynamic
      ? 'Static coordinates'
      : 'Dynamic coordinates';
    return (
      <>
        <Mapbox.MapView
          ref={(ref) => (this.map = ref)}
          style={sheet.matchParent}
          styleURL={Mapbox.StyleURL.Satellite}
        >
          <Mapbox.Camera
            defaultSettings={{ zoomLevel: 4, centerCoordinate: [-79, 40] }}
          />

          <Mapbox.Animated.ImageSource
            key="d"
            id="radarSource"
            coordinates={this.state.coords}
            url={frames[this.state.radarFrameIndex]}
          >
            <Mapbox.RasterLayer id="radarLayer" style={styles.rasterLayer} />
          </Mapbox.Animated.ImageSource>
        </Mapbox.MapView>
        <Bubble
          onPress={() => {
            this.setState({ dynamic: !this.state.dynamic });
          }}
          style={styles.bubble}
        >
          <Text>{bubbleText}</Text>
        </Bubble>
      </>
    );
  }
}

export default ImageOverlay;

}