Browse Source

Added basic map

Arnaud Vergnet 3 years ago
parent
commit
211e57167d

+ 1
- 0
package.json View File

24
     "@react-native-community/masked-view": "^0.1.10",
24
     "@react-native-community/masked-view": "^0.1.10",
25
     "@react-native-community/push-notification-ios": "^1.1.1",
25
     "@react-native-community/push-notification-ios": "^1.1.1",
26
     "@react-native-community/slider": "^3.0.0",
26
     "@react-native-community/slider": "^3.0.0",
27
+    "@react-native-mapbox-gl/maps": "^8.1.0-rc.1",
27
     "@react-navigation/bottom-tabs": "^5.3.2",
28
     "@react-navigation/bottom-tabs": "^5.3.2",
28
     "@react-navigation/native": "^5.2.2",
29
     "@react-navigation/native": "^5.2.2",
29
     "@react-navigation/stack": "^5.2.17",
30
     "@react-navigation/stack": "^5.2.17",

+ 8
- 0
src/navigation/MainNavigator.js View File

30
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
30
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
31
 import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
31
 import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
32
 import BugReportScreen from "../screens/Other/FeedbackScreen";
32
 import BugReportScreen from "../screens/Other/FeedbackScreen";
33
+import MapScreen from "../screens/Services/MapScreen";
33
 
34
 
34
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
35
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
35
 
36
 
106
             {getWebsiteStack("available-rooms", MainStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))}
107
             {getWebsiteStack("available-rooms", MainStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))}
107
             {getWebsiteStack("bib", MainStack, BibScreen, i18n.t('screens.bib'))}
108
             {getWebsiteStack("bib", MainStack, BibScreen, i18n.t('screens.bib'))}
108
             {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menuSelf'))}
109
             {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menuSelf'))}
110
+            <MainStack.Screen
111
+                name="map"
112
+                component={MapScreen}
113
+                options={{
114
+                    title: "MAP", // TODO translate
115
+                }}
116
+            />
109
 
117
 
110
             {/*     STUDENTS     */}
118
             {/*     STUDENTS     */}
111
             {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo'))}
119
             {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo'))}

+ 65
- 0
src/screens/Services/MapScreen.js View File

1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {View} from 'react-native';
5
+import {withTheme} from 'react-native-paper';
6
+import {StackNavigationProp} from "@react-navigation/stack";
7
+import type {CustomTheme} from "../../managers/ThemeManager";
8
+import MapboxGL from "@react-native-mapbox-gl/maps";
9
+
10
+type Props = {
11
+    navigation: StackNavigationProp,
12
+    theme: CustomTheme,
13
+}
14
+
15
+MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw");
16
+
17
+const layerStyles = {
18
+    smileyFace: {
19
+        fillAntialias: true,
20
+        fillColor: 'white',
21
+        fillOutlineColor: 'rgba(255, 255, 255, 0.84)',
22
+    },
23
+};
24
+
25
+/**
26
+ * Class defining the app's map screen.
27
+ */
28
+class MapScreen extends React.Component<Props> {
29
+
30
+    map : { current: null | MapboxGL.MapView };
31
+
32
+    constructor() {
33
+        super();
34
+        this.map = React.createRef();
35
+    }
36
+
37
+    componentDidMount() {
38
+        MapboxGL.setTelemetryEnabled(false);
39
+
40
+    }
41
+
42
+    render() {
43
+        return (
44
+            <View style={{flex: 1}}>
45
+                <MapboxGL.MapView
46
+                    style={{flex: 1}}
47
+                    styleURL={MapboxGL.StyleURL.Outdoors}
48
+                    ref={this.map}
49
+                    surfaceView={true}
50
+                    onPress={async () => {
51
+                        const center = await this.map.current.getCenter();
52
+                        console.log(center);
53
+                    }}
54
+                >
55
+                    <MapboxGL.Camera
56
+                        zoomLevel={15}
57
+                        centerCoordinate={[1.4669608, 43.5698867]}
58
+                    />
59
+                </MapboxGL.MapView>
60
+            </View>
61
+        );
62
+    }
63
+}
64
+
65
+export default withTheme(MapScreen);

+ 8
- 0
src/screens/Services/ServicesScreen.js View File

49
     isLoggedIn: boolean,
49
     isLoggedIn: boolean,
50
 }
50
 }
51
 
51
 
52
+// TODO translate subtitles
53
+
52
 class ServicesScreen extends React.Component<Props, State> {
54
 class ServicesScreen extends React.Component<Props, State> {
53
 
55
 
54
     amicaleDataset: cardList;
56
     amicaleDataset: cardList;
120
         ];
122
         ];
121
         this.insaDataset = [
123
         this.insaDataset = [
122
             {
124
             {
125
+                title: "MAP", // TODO translate
126
+                subtitle: "MAP",
127
+                image: RU_IMAGE,
128
+                onPress: () => nav.navigate("map"),
129
+            },
130
+            {
123
                 title: i18n.t('screens.menuSelf'),
131
                 title: i18n.t('screens.menuSelf'),
124
                 subtitle: "the ru",
132
                 subtitle: "the ru",
125
                 image: RU_IMAGE,
133
                 image: RU_IMAGE,

Loading…
Cancel
Save