1import React from 'react';
2import { ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
3import MapView from 'react-native-maps';
4
5import ListButton from '../components/ListButton';
6import Layout from '../constants/Layout';
7
8const REGION = {
9  latitude: 37.78825,
10  longitude: -122.4324,
11  latitudeDelta: 0.0922,
12  longitudeDelta: 0.0421,
13};
14
15const getRandomFloat = (min: number, max: number) => {
16  return Math.random() * (max - min) + min;
17};
18
19interface State {
20  isGoogleMap: boolean;
21}
22
23// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
24// eslint-disable-next-line @typescript-eslint/ban-types
25export default class MapsScreen extends React.Component<{}, State> {
26  static navigationOptions = {
27    title: '<MapView />',
28  };
29
30  readonly state: State = {
31    isGoogleMap: false,
32  };
33
34  _mapView?: MapView | null;
35
36  render() {
37    const provider: 'google' | undefined = this.state.isGoogleMap ? 'google' : undefined;
38    return (
39      <ScrollView style={StyleSheet.absoluteFill}>
40        <MapView
41          ref={(ref) => {
42            this._mapView = ref;
43          }}
44          style={{ width: Layout.window.width, height: 300 }}
45          initialRegion={REGION}
46          provider={provider}
47        />
48        {this._renderGoogleMapsSwitch()}
49        {this._renderJumpToCoordButton()}
50      </ScrollView>
51    );
52  }
53
54  _renderGoogleMapsSwitch = () => {
55    return (
56      <View
57        style={{
58          flexDirection: 'row',
59          height: 50,
60          alignItems: 'center',
61          justifyContent: 'center',
62          marginVertical: 10,
63          paddingRight: 30,
64        }}>
65        <Switch
66          style={{ marginHorizontal: 10 }}
67          onValueChange={(isGoogleMap) => {
68            this.setState({ isGoogleMap });
69          }}
70          value={this.state.isGoogleMap}
71        />
72        <Text style={{ fontSize: 18 }}>Use Google maps</Text>
73      </View>
74    );
75  };
76
77  _renderJumpToCoordButton = () => {
78    return (
79      <View style={{ paddingHorizontal: 10 }}>
80        <ListButton onPress={this._animateToRandomCoord} title="Animate to random SF Coord" />
81        <ListButton
82          onPress={this._animateToRandomViewingAngle}
83          title="Animate to random Viewing Angle"
84        />
85      </View>
86    );
87  };
88
89  _animateToRandomViewingAngle = () => {
90    if (this._mapView) {
91      this._mapView.animateCamera({
92        pitch: getRandomFloat(0, 90),
93      });
94    }
95  };
96
97  _animateToRandomCoord = () => {
98    if (this._mapView) {
99      this._mapView.animateCamera({
100        center: {
101          latitude: REGION.latitude + (Math.random() - 0.5) * (REGION.latitudeDelta / 2),
102          longitude: REGION.longitude + (Math.random() - 0.5) * (REGION.longitudeDelta / 2),
103        },
104      });
105    }
106  };
107}
108