diff --git a/package.json b/package.json index 48da6b3..e2bec52 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@react-native-community/masked-view": "^0.1.10", "@react-native-community/push-notification-ios": "^1.1.1", "@react-native-community/slider": "^3.0.0", + "@react-native-mapbox-gl/maps": "^8.1.0-rc.1", "@react-navigation/bottom-tabs": "^5.3.2", "@react-navigation/native": "^5.2.2", "@react-navigation/stack": "^5.2.17", diff --git a/src/navigation/MainNavigator.js b/src/navigation/MainNavigator.js index 79aca49..b173417 100644 --- a/src/navigation/MainNavigator.js +++ b/src/navigation/MainNavigator.js @@ -30,6 +30,7 @@ import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen"; import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils"; import BugReportScreen from "../screens/Other/FeedbackScreen"; +import MapScreen from "../screens/Services/MapScreen"; const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS; @@ -106,6 +107,13 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) { {getWebsiteStack("available-rooms", MainStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))} {getWebsiteStack("bib", MainStack, BibScreen, i18n.t('screens.bib'))} {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menuSelf'))} + {/* STUDENTS */} {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo'))} diff --git a/src/screens/Services/MapScreen.js b/src/screens/Services/MapScreen.js new file mode 100644 index 0000000..a660b5d --- /dev/null +++ b/src/screens/Services/MapScreen.js @@ -0,0 +1,65 @@ +// @flow + +import * as React from 'react'; +import {View} from 'react-native'; +import {withTheme} from 'react-native-paper'; +import {StackNavigationProp} from "@react-navigation/stack"; +import type {CustomTheme} from "../../managers/ThemeManager"; +import MapboxGL from "@react-native-mapbox-gl/maps"; + +type Props = { + navigation: StackNavigationProp, + theme: CustomTheme, +} + +MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw"); + +const layerStyles = { + smileyFace: { + fillAntialias: true, + fillColor: 'white', + fillOutlineColor: 'rgba(255, 255, 255, 0.84)', + }, +}; + +/** + * Class defining the app's map screen. + */ +class MapScreen extends React.Component { + + map : { current: null | MapboxGL.MapView }; + + constructor() { + super(); + this.map = React.createRef(); + } + + componentDidMount() { + MapboxGL.setTelemetryEnabled(false); + + } + + render() { + return ( + + { + const center = await this.map.current.getCenter(); + console.log(center); + }} + > + + + + ); + } +} + +export default withTheme(MapScreen); diff --git a/src/screens/Services/ServicesScreen.js b/src/screens/Services/ServicesScreen.js index 077a5fc..11eec17 100644 --- a/src/screens/Services/ServicesScreen.js +++ b/src/screens/Services/ServicesScreen.js @@ -49,6 +49,8 @@ type State = { isLoggedIn: boolean, } +// TODO translate subtitles + class ServicesScreen extends React.Component { amicaleDataset: cardList; @@ -119,6 +121,12 @@ class ServicesScreen extends React.Component { }, ]; this.insaDataset = [ + { + title: "MAP", // TODO translate + subtitle: "MAP", + image: RU_IMAGE, + onPress: () => nav.navigate("map"), + }, { title: i18n.t('screens.menuSelf'), subtitle: "the ru",