Add MapLibre map with user location (#2)

* Add MapLibre map with user location

Replace the React Native template view with a MapLibre-powered map
using OpenFreeMap's hosted vector tiles. Requests foreground-only
location permissions on mount and flies to the user's first fix at
zoom 14, with a UserLocation puck + accuracy circle.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Mock @maplibre/maplibre-react-native in jest setup

The package ships ESM that jest can't parse with the default transform
config, causing App.test.tsx to fail. Mock it instead of widening
transformIgnorePatterns so tests stay fast and isolated from native code.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Add pre-push hook running tsc + biome

Catches the same TypeScript and lint failures CI surfaces, before the
push. Hook lives in `.githooks/` and is wired up via a postinstall
script that sets `core.hooksPath` (skipped silently outside a git repo).
No new dependency.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dfalling

.githooks/pre-push

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+echo "→ tsc --noEmit"
+bunx tsc --noEmit
+
+echo "→ biome check"
+bun run lint

App.tsx

@@ -5,7 +5,6 @@
  */
 
 import {ApolloProvider} from '@apollo/client';
-import {NewAppScreen} from '@react-native/new-app-screen';
 import {useEffect} from 'react';
 import {
   ActivityIndicator,
@@ -24,6 +23,7 @@ import {apolloClient, logout} from './src/auth/authClient';
 import {useDeepLinkListener} from './src/auth/deepLinks';
 import {LoginScreen} from './src/auth/LoginScreen';
 import {tokenStore, useAuth, useAuthHydrated} from './src/auth/tokenStore';
+import {MapScreen} from './src/map/MapScreen';
 
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
@@ -63,10 +63,7 @@ function AppContent() {
 
   return (
     <View style={styles.container}>
-      <NewAppScreen
-        templateFileName="App.tsx"
-        safeAreaInsets={safeAreaInsets}
-      />
+      <MapScreen />
       <View
         style={[styles.logoutBar, {paddingBottom: safeAreaInsets.bottom + 12}]}>
         <Text style={styles.signedInAs}>Signed in as {auth.user.email}</Text>

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 
     <application
       android:name=".MainApplication"

bun.lock

@@ -7,3 +7,24 @@ jest.mock('react-native-encrypted-storage', () => ({
     clear: jest.fn(() => Promise.resolve()),
   },
 }));
+
+jest.mock('@maplibre/maplibre-react-native', () => {
+  const React = require('react');
+  const passthrough = name => {
+    const Component = React.forwardRef(({children}, _ref) =>
+      React.createElement('View', {testID: name}, children),
+    );
+    Component.displayName = name;
+    return Component;
+  };
+  return {
+    __esModule: true,
+    Map: passthrough('Map'),
+    Camera: passthrough('Camera'),
+    UserLocation: passthrough('UserLocation'),
+    LocationManager: {
+      requestPermissions: jest.fn(() => Promise.resolve(false)),
+    },
+    useCurrentPosition: () => null,
+  };
+});

jest.setup.js

@@ -9,10 +9,12 @@
     "lint": "biome check",
     "lint:fix": "biome check --write",
     "format": "biome format --write",
-    "codegen": "graphql-codegen --config codegen.ts"
+    "codegen": "graphql-codegen --config codegen.ts",
+    "postinstall": "git rev-parse --git-dir > /dev/null 2>&1 && git config core.hooksPath .githooks || true"
   },
   "dependencies": {
     "@apollo/client": "^3.11.0",
+    "@maplibre/maplibre-react-native": "^11.2.1",
     "@react-native/new-app-screen": "0.85.3",
     "graphql": "^16.9.0",
     "react": "19.2.3",

package.json

@@ -0,0 +1,62 @@
+import {
+  Camera,
+  type CameraRef,
+  LocationManager,
+  Map as MapLibreMap,
+  UserLocation,
+  useCurrentPosition,
+} from '@maplibre/maplibre-react-native';
+import {useEffect, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+
+const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
+const USER_ZOOM = 14;
+
+export function MapScreen() {
+  const cameraRef = useRef<CameraRef>(null);
+  const hasCenteredRef = useRef(false);
+  const [permissionGranted, setPermissionGranted] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const granted = await LocationManager.requestPermissions();
+      if (!cancelled && granted) {
+        setPermissionGranted(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const position = useCurrentPosition({enabled: permissionGranted});
+
+  useEffect(() => {
+    if (hasCenteredRef.current || !position) return;
+    hasCenteredRef.current = true;
+    cameraRef.current?.flyTo({
+      center: [position.coords.longitude, position.coords.latitude],
+      zoom: USER_ZOOM,
+      duration: 1500,
+    });
+  }, [position]);
+
+  return (
+    <View style={styles.container}>
+      <MapLibreMap mapStyle={MAP_STYLE} style={styles.map}>
+        <Camera ref={cameraRef} initialViewState={{center: [0, 20], zoom: 1}} />
+        <UserLocation animated accuracy />
+      </MapLibreMap>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  map: {
+    flex: 1,
+  },
+});