feat: add event map (#22)

* feat: scaffold event map tab

* feat: add zoomable map

app/(tabs)/_layout.tsx

@@ -29,6 +29,14 @@ export default function TabLayout() {
                     ),
                 }}
             />
+            <Tabs.Screen
+                name='map'
+                options={{
+                    tabBarIcon: ({ color, focused }) => (
+                        <TabBarIcon name={focused ? 'map' : 'map-outline'} color={color} />
+                    ),
+                }}
+            />
         </Tabs>
     );
 }

app/(tabs)/map.tsx

@@ -0,0 +1,23 @@
+import AppBar from '@/elements/AppBar';
+import EventMap from '@/elements/map/EventMap';
+import { Surface } from 'react-native-paper';
+import { useTheme } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function MapScreen() {
+    const theme = useTheme();
+    const insets = useSafeAreaInsets();
+
+    return (
+        <Surface
+            style={{
+                height: '100%',
+                backgroundColor: theme.colors.background,
+                paddingTop: insets.top,
+            }}
+        >
+            <AppBar title='map' />
+            <EventMap />
+        </Surface>
+    );
+}

elements/map/EventMap.tsx

@@ -0,0 +1,29 @@
+import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
+import { Image, View } from 'react-native';
+
+function EventMap() {
+    return (
+        <ReactNativeZoomableView
+            maxZoom={2.5}
+            minZoom={0.5}
+            zoomStep={0.5}
+            initialZoom={1}
+            bindToBorders={true}
+            style={{
+                width: 'fit-content',
+            }}
+            // Image dimensions
+            contentWidth={1024}
+            contentHeight={576}
+        >
+            <View style={{ width: '100%' }}>
+                <Image
+                    style={{ objectFit: 'contain' }}
+                    source={require('@/assets/images/summer23-aluekartta.png')}
+                />
+            </View>
+        </ReactNativeZoomableView>
+    );
+}
+
+export default EventMap;

locales/en.ts

@@ -2,6 +2,7 @@ export default {
     translation: {
         home: 'Home',
         timetable: 'Timetable',
+        map: 'Map',
         location: 'Location',
         time: 'Time',
         'select-language': 'Select Language',

locales/fi.ts

@@ -2,6 +2,7 @@ export default {
     translation: {
         home: 'Koti',
         timetable: 'Aikataulu',
+        map: "Kartta",
         location: 'Sijainti',
         time: 'Aika',
         'select-language': 'Valitse kieli',

package.json

@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
+    "@openspacelabs/react-native-zoomable-view": "^2.1.6",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-navigation/native": "^6.0.2",
     "dayjs": "^1.11.11",
     "expo": "~51.0.14",
@@ -43,8 +45,7 @@
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "^4.10.1",
     "react-native-screens": "3.31.1",
-    "react-native-web": "~0.19.10",
-    "@react-native-async-storage/async-storage": "1.23.1"
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",