1import React from 'react';
2import { ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
3import MapView from 'react-native-maps';
4import Layout from '../constants/Layout';
5import ListButton from '../components/ListButton';
6
7const REGION = {
8  latitude: 37.78825,
9  longitude: -122.4324,
10  latitudeDelta: 0.0922,
11  longitudeDelta: 0.0421,
12};
13
14const getRandomFloat = (min: number, max: number) => {
15  return Math.random() * (max - min) + min;
16};
17
18interface State {
19  isGoogleMap: boolean;
20}
21
22export default class MapsScreen extends React.Component<{}, State> {
23  static navigationOptions = {
24    title: '<MapView />',
25  };
26
27  readonly state: State = {
28    isGoogleMap: false,
29  };
30
31  _mapView?: MapView | null;
32
33  render() {
34    const provider: 'google' | undefined = this.state.isGoogleMap
35      ? 'google'
36      : undefined;
37    return (
38      <ScrollView style={StyleSheet.absoluteFill}>
39        <MapView
40          ref={ref => {
41            this._mapView = ref;
42          }}
43          style={{ width: Layout.window.width, height: 300 }}
44          initialRegion={REGION}
45          provider={provider}
46        />
47        {this._renderGoogleMapsSwitch()}
48        {this._renderJumpToCoordButton()}
49      </ScrollView>
50    );
51  }
52
53  _renderGoogleMapsSwitch = () => {
54    return (
55      <View
56        style={{
57          flexDirection: 'row',
58          height: 50,
59          alignItems: 'center',
60          justifyContent: 'center',
61          marginVertical: 10,
62          paddingRight: 30,
63        }}
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
81          onPress={this._animateToRandomCoord}
82          title="Animate to random SF Coord"
83        />
84        <ListButton
85          onPress={this._animateToRandomViewingAngle}
86          title="Animate to random Viewing Angle"
87        />
88      </View>
89    );
90  }
91
92  _animateToRandomViewingAngle = () => {
93    if (this._mapView) {
94      this._mapView.animateCamera({
95        pitch: getRandomFloat(0, 90),
96      });
97    }
98  }
99
100  _animateToRandomCoord = () => {
101    if (this._mapView) {
102      this._mapView.animateCamera({
103        center: {
104          latitude:
105            REGION.latitude +
106            (Math.random() - 0.5) * (REGION.latitudeDelta / 2),
107          longitude:
108            REGION.longitude +
109            (Math.random() - 0.5) * (REGION.longitudeDelta / 2),
110        },
111      });
112    }
113  }
114}
115