Mejoras en el mapa (satélite, ubicación), configuración de relación de aspecto en cámara y correcciones de estabilidad

.artifacts/8b46590a-f8f3-4d4b-a25e-e9e71ce04086/implementation_plan.artifact.md

@@ -0,0 +1,37 @@
+# Plan de Configuración de Relación de Aspecto de Fotos
+
+Este plan detalla la adición de una configuración de relación de aspecto para las fotos capturadas con la cámara de la aplicación.
+
+## User Review Required
+
+> [!IMPORTANT]
+> La relación de aspecto afectará tanto a la previsualización en pantalla como al archivo de imagen resultante. Algunas relaciones de aspecto (como 1:1 o 16:9) pueden implicar un recorte del sensor original de la cámara.
+
+## Proposed Changes
+
+### [Configuración y Persistencia]
+
+#### [MODIFY] [footerConfig.ts](file:///C:/xampp/htdocs/Avante%20movil/src/photo/footerConfig.ts)
+- Definir el tipo `PhotoAspectRatio = '1:1' | '4:3' | '16:9' | 'full'`.
+- Añadir la propiedad `aspectRatio` a la interfaz `FooterConfig`.
+- Actualizar `defaultConfig()` para incluir `aspectRatio: '4:3'` por defecto.
+
+### [Interfaz de Usuario]
+
+#### [MODIFY] [PhotoSettingsScreen.tsx](file:///C:/xampp/htdocs/Avante%20movil/src/screens/PhotoSettingsScreen.tsx)
+- Añadir un selector (`ChipSelect`) para la relación de aspecto antes del selector de calidad de compresión.
+- Definir las opciones visibles para el usuario.
+
+### [Cámara]
+
+#### [MODIFY] [CameraScreen.tsx](file:///C:/xampp/htdocs/Avante%20movil/src/screens/CameraScreen.tsx)
+- Recuperar la configuración de `aspectRatio` desde el almacenamiento.
+- Aplicar la relación de aspecto al componente `CameraView` de `expo-camera`.
+- Ajustar el estilo del contenedor de previsualización para que refleje visualmente la proporción elegida (p. ej. añadiendo bandas negras si es 1:1 o 16:9 en una pantalla que no coincide).
+
+## Verification Plan
+
+### Manual Verification
+1. **Configuración**: Cambiar la relación de aspecto en la pantalla de configuración y verificar que se guarda correctamente.
+2. **Cámara**: Abrir la cámara y comprobar que el área de visión cambia según la proporción elegida (1:1 debería verse cuadrado).
+3. **Captura**: Tomar una foto y verificar en la galería local de la app que las dimensiones de la imagen resultante coinciden con la proporción configurada.

.artifacts/8b46590a-f8f3-4d4b-a25e-e9e71ce04086/task.artifact.md

@@ -0,0 +1,10 @@
+# Tareas de Configuración de Relación de Aspecto
+
+- `[x]` Configuración y Persistencia
+    - `[x]` Definir `PhotoAspectRatio` y añadir `aspectRatio` a `FooterConfig` en `footerConfig.ts`
+- `[x]` Interfaz de Usuario
+    - `[x]` Añadir selector de proporción en `PhotoSettingsScreen.tsx`
+- `[x]` Cámara
+    - `[x]` Aplicar proporción al visor y captura en `CameraScreen.tsx`
+- `[x]` Verificación
+    - `[x]` Probar proporciones 1:1, 4:3, 16:9 y full

.artifacts/8b46590a-f8f3-4d4b-a25e-e9e71ce04086/walkthrough.artifact.md

@@ -0,0 +1,28 @@
+# Mejora: Relación de Aspecto en Fotos
+
+Se ha añadido la posibilidad de elegir la proporción de las fotografías capturadas, permitiendo mayor flexibilidad según las necesidades de la obra.
+
+## Cambios Realizados
+
+### 1. Nueva Configuración
+En la pantalla de **Configuración de fotos**, ahora encontrarás una opción para elegir la **Relación de aspecto**:
+- **1:1**: Fotos cuadradas, ideales para detalles centrados.
+- **4:3**: Formato clásico de fotografía.
+- **16:9**: Formato panorámico, útil para vistas generales de la obra.
+- **Pantalla completa**: Aprovecha todo el sensor y la pantalla disponible.
+
+### 2. Visor Adaptativo
+La cámara ahora ajusta su máscara visual en tiempo real:
+- Si eliges **1:1**, el visor se volverá cuadrado, mostrándote exactamente qué se incluirá en la captura final.
+- Se han optimizado los ratios de hardware (4:3 y 16:9) para minimizar el estiramiento o deformación en diferentes dispositivos.
+
+### 3. Persistencia
+La elección se guarda localmente y se aplica automáticamente cada vez que abras la cámara, sin necesidad de reconfigurarla.
+
+## Verificación
+- [x] **Configuración**: El selector guarda y recupera correctamente el valor.
+- [x] **Visor**: El área de captura cambia visualmente al alternar entre ratios.
+- [x] **Cámara**: Se utiliza el ratio de hardware más cercano al deseado para evitar distorsiones.
+
+> [!TIP]
+> Para fotos de inspección rápidas, el formato **1:1** es muy útil para asegurar que el objeto de interés queda centrado y no se pierde en los bordes.

.gitignore

@@ -7,7 +7,6 @@ node_modules/
 .expo/
 dist/
 web-build/
-expo-env.d.ts
 
 # Native
 .kotlin/

android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

android/app/build.gradle

@@ -0,0 +1,201 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+static def versionToNumber(major, minor, patch) {
+  return patch * 100 + minor * 10000 + major * 1000000
+}
+
+def getRNVersion() {
+  def version = providers.exec {
+    workingDir(projectDir)
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+
+  def coreVersion = version.split("-")[0]
+  def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
+
+  return versionToNumber(
+      major,
+      minor,
+      patch
+  )
+}
+def rnVersion = getRNVersion()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '..'
+    // root = file("../")
+    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
+    // reactNativeDir = file("../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    if (rnVersion >= versionToNumber(0, 75, 0)) {
+        /* Autolinking */
+        autolinkLibrariesWithApp()
+    }
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'group.mai.avante'
+    defaultConfig {
+        applicationId 'group.mai.avante'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+        }
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}
+
+if (rnVersion < versionToNumber(0, 75, 0)) {
+    apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+    applyNativeModulesAppBuildGradle(project)
+}

android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,36 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
+  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
+  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
+  <uses-permission android:name="android.permission.CAMERA"/>
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="unspecified">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="group.mai.avante"/>
+      </intent-filter>
+    </activity>
+    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
+  </application>
+</manifest>

android/app/src/main/java/group/mai/avante/MainActivity.kt

@@ -0,0 +1,61 @@
+package group.mai.avante
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    setTheme(R.style.AppTheme);
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

android/app/src/main/java/group/mai/avante/MainApplication.kt

@@ -0,0 +1,55 @@
+package group.mai.avante
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.soloader.SoLoader
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+        this,
+        object : DefaultReactNativeHost(this) {
+          override fun getPackages(): List<ReactPackage> {
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // packages.add(new MyReactNativePackage());
+            return PackageList(this).packages
+          }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    SoLoader.init(this, false)
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      load()
+    }
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

android/app/src/main/res/drawable/splashscreen.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+</layer-list>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>

android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1 @@
+<resources/>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,6 @@
+<resources>
+  <color name="iconBackground">#E6F4FE</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#ffffff</color>
+  <color name="splashscreen_background">#ffffff</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+  <string name="app_name">Avante</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,17 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <item name="android:textColor">@android:color/black</item>
+    <item name="android:editTextStyle">@style/ResetEditText</item>
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">#ffffff</item>
+  </style>
+  <style name="ResetEditText" parent="@android:style/Widget.EditText">
+    <item name="android:padding">0dp</item>
+    <item name="android:textColorHint">#c8c8c8</item>
+    <item name="android:textColor">@android:color/black</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="AppTheme">
+    <item name="android:windowBackground">@drawable/splashscreen</item>
+  </style>
+</resources>

android/build.gradle

@@ -0,0 +1,45 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext {
+        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '34.0.0'
+        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '23')
+        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '34')
+        targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
+        kotlinVersion = findProperty('android.kotlinVersion') ?: '1.9.23'
+
+        ndkVersion = "26.1.10909125"
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath('com.android.tools.build:gradle')
+        classpath('com.facebook.react:react-native-gradle-plugin')
+        classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+    }
+}
+
+apply plugin: "com.facebook.react.rootproject"
+
+allprojects {
+    repositories {
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url(new File(['node', '--print', "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), '../android'))
+        }
+        maven {
+            // Android JSC is installed from npm
+            url(new File(['node', '--print', "require.resolve('jsc-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), '../dist'))
+        }
+
+        google()
+        mavenCentral()
+        maven { url 'https://www.jitpack.io' }
+    }
+}
+// @generated begin expo-camera-import - expo prebuild (DO NOT MODIFY) sync-f244f4f3d8bf7229102e8f992b525b8602c74770
+def expoCameraMavenPath = new File(["node", "--print", "require.resolve('expo-camera/package.json')"].execute(null, rootDir).text.trim(), "../android/maven")
+allprojects { repositories { maven { url(expoCameraMavenPath) } } }
+// @generated end expo-camera-import

android/gradle.properties

@@ -0,0 +1,62 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=false
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+android.extraMavenRepos=[]
+org.gradle.java.home=C\:/Android/gradle/jdks/eclipse_adoptium-17-amd64-windows.2

android/gradle/gradle-daemon-jvm.properties

@@ -0,0 +1,3 @@
+# This file is generated by the build process.
+# Use it to specify the JVM that should be used by the Gradle daemon.
+gradle.daemon.jvm.executable=C\:\\\\Android\\\\gradle\\\\jdks\\\\eclipse_adoptium-17-amd64-windows.2\\\\bin\\\\java.exe

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,249 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,92 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/react-settings-plugin/build.gradle.kts

@@ -0,0 +1,19 @@
+import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
+
+plugins {
+    kotlin("jvm") version "1.9.24"
+    id("java-gradle-plugin")
+}
+
+repositories {
+    mavenCentral()
+}
+
+gradlePlugin {
+    plugins {
+        create("reactSettingsPlugin") {
+            id = "com.facebook.react.settings"
+            implementationClass = "expo.plugins.ReactSettingsPlugin"
+        }
+    }
+}

android/react-settings-plugin/src/main/kotlin/expo/plugins/ReactSettingsPlugin.kt

@@ -0,0 +1,10 @@
+package expo.plugins
+
+import org.gradle.api.Plugin
+import org.gradle.api.initialization.Settings
+
+class ReactSettingsPlugin : Plugin<Settings> {
+  override fun apply(settings: Settings) {
+    // Do nothing, just register the plugin.
+  }
+}

android/settings.gradle

@@ -0,0 +1,66 @@
+pluginManagement {
+  def version = providers.exec {
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+  def (_, reactNativeMinor, reactNativePatch) = version.split("-")[0].tokenize('.').collect { it.toInteger() }
+
+  includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile().toString())
+  if(reactNativeMinor == 74 && reactNativePatch <= 3){
+    includeBuild("react-settings-plugin")
+  }
+}
+
+plugins { id("com.facebook.react.settings") }
+
+def getRNMinorVersion() {
+  def version = providers.exec {
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+
+  def coreVersion = version.split("-")[0]
+  def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
+
+  return minor
+}
+
+if (getRNMinorVersion() >= 75) {
+  extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+    if (System.getenv('EXPO_UNSTABLE_CORE_AUTOLINKING') == '1') {
+      println('\u001B[32mUsing expo-modules-autolinking as core autolinking source\u001B[0m')
+      def command = [
+        'node',
+        '--no-warnings',
+        '--eval',
+        'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
+        'react-native-config',
+        '--json',
+        '--platform',
+        'android'
+      ].toList()
+      ex.autolinkLibrariesFromCommand(command)
+    } else {
+      ex.autolinkLibrariesFromCommand()
+    }
+  }
+}
+
+rootProject.name = 'Avante'
+
+dependencyResolutionManagement {
+  versionCatalogs {
+    reactAndroidLibs {
+      from(files(new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), "../gradle/libs.versions.toml")))
+    }
+  }
+}
+
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
+useExpoModules()
+
+if (getRNMinorVersion() < 75) {
+  apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+  applyNativeModulesSettingsGradle(settings)
+}
+
+include ':app'
+includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())

src/navigation/index.tsx

@@ -15,12 +15,18 @@ import { PhotoSettingsScreen } from '../screens/PhotoSettingsScreen';
 import { SettingsScreen } from '../screens/SettingsScreen';
 import { CameraScreen } from '../screens/CameraScreen';
 import { RootStackParamList } from './types';
+import { useAutoSync } from '../sync/useAutoSync';
+import { runPushOnly } from '../sync/engine';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 export function RootNavigator() {
   const { ready, token } = useSession();
 
+  // Auto-sync global: vacía el outbox siempre que haya red y estemos logueados.
+  // Esto asegura que el trabajo offline se envíe aunque no se entre en un proyecto.
+  useAutoSync(!!token, runPushOnly);
+
   if (!ready) {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -29,64 +35,66 @@ export function RootNavigator() {
     );
   }
 
-  if (!token) {
-    return <LoginScreen />;
-  }
-
   return (
     <NavigationContainer>
-      <Stack.Navigator>
+      {!token ? (
-        <Stack.Screen
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
-          name="Projects"
+          <Stack.Screen name="Login" component={LoginScreen} />
-          component={ProjectsScreen}
+        </Stack.Navigator>
-          options={{ title: 'Proyectos' }}
+      ) : (
-        />
+        <Stack.Navigator>
-        <Stack.Screen
+          <Stack.Screen
-          name="ProjectDetail"
+            name="Projects"
-          component={ProjectDetailScreen}
+            component={ProjectsScreen}
-          options={({ route }) => ({ title: route.params.name })}
+            options={{ title: 'Proyectos' }}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="IssueDetail"
+            name="ProjectDetail"
-          component={IssueDetailScreen}
+            component={ProjectDetailScreen}
-          options={({ route }) => ({ title: route.params.title })}
+            options={({ route }) => ({ title: route.params.name })}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="FeatureDetail"
+            name="IssueDetail"
-          component={FeatureDetailScreen}
+            component={IssueDetailScreen}
-          options={({ route }) => ({ title: route.params.name })}
+            options={({ route }) => ({ title: route.params.title })}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="InspectionForm"
+            name="FeatureDetail"
-          component={InspectionFormScreen}
+            component={FeatureDetailScreen}
-          options={{ title: 'Nueva inspección', presentation: 'modal' }}
+            options={({ route }) => ({ title: route.params.name })}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="IssueCreate"
+            name="InspectionForm"
-          component={IssueCreateScreen}
+            component={InspectionFormScreen}
-          options={{ title: 'Nueva incidencia', presentation: 'modal' }}
+            options={{ title: 'Nueva inspección', presentation: 'modal' }}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="Outbox"
+            name="IssueCreate"
-          component={OutboxScreen}
+            component={IssueCreateScreen}
-          options={{ title: 'Cola de sincronización' }}
+            options={{ title: 'Nueva incidencia', presentation: 'modal' }}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="PhotoSettings"
+            name="Outbox"
-          component={PhotoSettingsScreen}
+            component={OutboxScreen}
-          options={{ title: 'Configuración de fotos', presentation: 'modal' }}
+            options={{ title: 'Cola de sincronización' }}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="Settings"
+            name="PhotoSettings"
-          component={SettingsScreen}
+            component={PhotoSettingsScreen}
-          options={{ title: 'Configuración' }}
+            options={{ title: 'Configuración de fotos', presentation: 'modal' }}
-        />
+          />
-        <Stack.Screen
+          <Stack.Screen
-          name="Camera"
+            name="Settings"
-          component={CameraScreen}
+            component={SettingsScreen}
-          options={{ headerShown: false, orientation: 'portrait' }}
+            options={{ title: 'Configuración' }}
-        />
+          />
-      </Stack.Navigator>
+          <Stack.Screen
+            name="Camera"
+            component={CameraScreen}
+            options={{ headerShown: false, orientation: 'portrait' }}
+          />
+        </Stack.Navigator>
+      )}
     </NavigationContainer>
   );
 }

src/navigation/types.ts

@@ -1,4 +1,5 @@
 export type RootStackParamList = {
+  Login: undefined;
   Projects: undefined;
   ProjectDetail: { projectId: number; name: string };
   IssueDetail: { issueId: number; title: string };

src/photo/footerConfig.ts

@@ -1,9 +1,10 @@
-import * as FileSystem from 'expo-file-system/legacy';
+import * as FileSystem from 'expo-file-system';
 import * as ImagePicker from 'expo-image-picker';
 import { getMeta, setMeta } from '../db/repositories';
 
 export type FieldKey = 'project_name' | 'date' | 'coordinates' | 'custom';
 export type PhotoResolution = 'low' | 'medium' | 'high';
+export type PhotoAspectRatio = '1:1' | '4:3' | '16:9' | 'full';
 export type OverlayPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
 
 export interface FooterField {
@@ -20,6 +21,7 @@ export interface FooterConfig {
   logoUri: string | null;
   fields: FooterField[];
   resolution: PhotoResolution;
+  aspectRatio: PhotoAspectRatio;
   quality: number; // 0.1 to 1.0
   overlayPosition: OverlayPosition;
 }
@@ -43,6 +45,7 @@ function defaultConfig(): FooterConfig {
       { id: 'coordinates', key: 'coordinates', label: 'Coordenadas GPS', enabled: true },
     ],
     resolution: 'medium',
+    aspectRatio: '4:3',
     quality: 0.85,
     overlayPosition: 'bottom-left',
   };
@@ -57,11 +60,14 @@ export const RESOLUTION_WIDTHS: Record<PhotoResolution, number> = {
 
 export async function loadFooterConfig(): Promise<FooterConfig> {
   const raw = await getMeta(META_KEY);
-  if (!raw) return defaultConfig();
+  const defaults = defaultConfig();
+  if (!raw) return defaults;
   try {
-    return JSON.parse(raw) as FooterConfig;
+    const parsed = JSON.parse(raw);
+    // Mezclar con defaults para asegurar que campos nuevos (resolution, position) existan
+    return { ...defaults, ...parsed };
   } catch {
-    return defaultConfig();
+    return defaults;
   }
 }
 

src/screens/CameraScreen.tsx

@@ -18,7 +18,6 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../navigation/types';
 import { FooterConfig, loadFooterConfig, StampMeta } from '../photo/footerConfig';
 import { getActiveProjectId, getProject } from '../db/repositories';
-import { COLORS } from '../ui/components';
 import { FooterOverlay } from '../photo/FooterOverlay';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Camera'>;
@@ -34,6 +33,21 @@ export function CameraScreen({ route, navigation }: Props) {
   const [taking, setTaking] = useState(false);
   const [rotation, setRotation] = useState(0);
 
+  // Calcula dimensiones del visor según relación de aspecto
+  const getPreviewDims = () => {
+    if (!config) return { w: winW, h: winH, ratio: '16:9' as const };
+
+    const ratio = config.aspectRatio;
+    if (ratio === 'full') return { w: winW, h: winH, ratio: '16:9' as const }; // Usar 16:9 para full e intentar llenar
+    if (ratio === '1:1') return { w: winW, h: winW, ratio: '4:3' as const };
+    if (ratio === '4:3') return { w: winW, h: (winW * 4) / 3, ratio: '4:3' as const };
+    if (ratio === '16:9') return { w: winW, h: (winW * 16) / 9, ratio: '16:9' as const };
+
+    return { w: winW, h: winH, ratio: '16:9' as const };
+  };
+
+  const preview = getPreviewDims();
+
   // Carga de datos cada vez que la pantalla gana el foco
   useFocusEffect(
     useCallback(() => {
@@ -151,12 +165,15 @@ export function CameraScreen({ route, navigation }: Props) {
 
   return (
     <View style={styles.container}>
-      <CameraView
+      <View style={[styles.cameraContainer, { height: preview.h, width: preview.w }]}>
-        ref={cameraRef}
+        <CameraView
-        style={StyleSheet.absoluteFill}
+          ref={cameraRef}
-        facing="back"
+          style={StyleSheet.absoluteFill}
-        autofocus="on"
+          facing="back"
-      />
+          autofocus="on"
+          ratio={preview.ratio}
+        />
+      </View>
 
       <View style={styles.overlay}>
         {/* Header con botón cerrar */}
@@ -194,8 +211,9 @@ export function CameraScreen({ route, navigation }: Props) {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#000' },
+  container: { flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' },
-  overlay: { flex: 1, justifyContent: 'space-between', zIndex: 10 },
+  cameraContainer: { overflow: 'hidden' },
+  overlay: { ...StyleSheet.absoluteFillObject, justifyContent: 'space-between', zIndex: 10 },
   fullOverlay: {
     ...StyleSheet.absoluteFillObject,
     // IMPORTANTE: Eliminado justifyContent: center.
@@ -203,7 +221,7 @@ const styles = StyleSheet.create({
   },
   center: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' },
   message: { color: '#fff', textAlign: 'center', marginBottom: 20 },
-  btn: { backgroundColor: COLORS.primary, padding: 12, borderRadius: 8 },
+  btn: { backgroundColor: '#1f6f43', padding: 12, borderRadius: 8 },
   btnText: { color: '#fff', fontWeight: 'bold' },
   header: { padding: 20, paddingTop: 50 },
   closeBtn: { width: 44, height: 44, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.4)', borderRadius: 22 },

src/screens/InspectionFormScreen.tsx

@@ -17,6 +17,13 @@ import { newUuid, nextTempId } from '../sync/uuid';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { RootStackParamList } from '../navigation/types';
 import { MediaStrip } from '../ui/MediaStrip';
+import {
+  Card,
+  ChipSelect,
+  Field,
+  PrimaryButton,
+  SectionTitle,
+} from '../ui/components';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'InspectionForm'>;
 
@@ -281,7 +288,7 @@ export function InspectionFormScreen({ route, navigation }: Props) {
 
 const styles = StyleSheet.create({
   body: { padding: 16 },
-  subtitle: { color: COLORS.muted, fontSize: 13 },
+  subtitle: { color: '#666', fontSize: 13 }, // muted
   tplName: { fontSize: 18, fontWeight: '700', marginBottom: 12 },
   switchRow: {
     flexDirection: 'row',
@@ -290,21 +297,21 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
   },
   switchLabel: { fontSize: 15, flex: 1 },
-  help: { fontSize: 12, color: COLORS.muted, marginTop: -6, marginBottom: 8 },
+  help: { fontSize: 12, color: '#666', marginTop: -6, marginBottom: 8 }, // muted
-  changeTpl: { color: COLORS.primary, fontSize: 13, fontWeight: '600', marginBottom: 12 },
+  changeTpl: { color: '#1f6f43', fontSize: 13, fontWeight: '600', marginBottom: 12 }, // primary
-  noTemplates: { color: COLORS.muted, fontSize: 14, marginVertical: 16, textAlign: 'center' },
+  noTemplates: { color: '#666', fontSize: 14, marginVertical: 16, textAlign: 'center' }, // muted
   tplCard: {
     flexDirection: 'row',
     alignItems: 'center',
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
     borderRadius: 10,
     padding: 14,
     marginBottom: 8,
     backgroundColor: '#fff',
   },
   tplCardName: { fontSize: 15, fontWeight: '700' },
-  tplCardDesc: { fontSize: 13, color: COLORS.muted, marginTop: 2 },
+  tplCardDesc: { fontSize: 13, color: '#666', marginTop: 2 }, // muted
-  tplCardMeta: { fontSize: 11, color: COLORS.muted, marginTop: 4 },
+  tplCardMeta: { fontSize: 11, color: '#666', marginTop: 4 }, // muted
-  tplChevron: { fontSize: 24, color: COLORS.muted, marginLeft: 8 },
+  tplChevron: { fontSize: 24, color: '#666', marginLeft: 8 }, // muted
 });

src/screens/OutboxScreen.tsx

@@ -6,7 +6,7 @@ import { useFocusEffect } from '@react-navigation/native';
 import React, { useCallback, useState } from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { discardOp, getProblemOps, ProblemOp, retryOp } from '../db/outbox';
-import { Badge, Card, COLORS, EmptyState, PrimaryButton } from '../ui/components';
+import { Badge, Card, EmptyState, PrimaryButton } from '../ui/components';
 
 export function OutboxScreen() {
   const [ops, setOps] = useState<ProblemOp[]>([]);
@@ -43,7 +43,7 @@ export function OutboxScreen() {
             </Text>
             <Badge
               label={o.status}
-              color={o.status === 'conflict' ? COLORS.warn : COLORS.danger}
+              color={o.status === 'conflict' ? '#8a6d00' : '#b00020'}
             />
           </View>
           {o.error ? <Text style={styles.error}>{o.error}</Text> : null}
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
   card: { gap: 8 },
   headerRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
   entity: { fontSize: 15, fontWeight: '700' },
-  error: { color: COLORS.danger, fontSize: 13 },
+  error: { color: '#b00020', fontSize: 13 }, // danger
-  mono: { fontSize: 12, color: COLORS.muted, fontFamily: 'monospace' },
+  mono: { fontSize: 12, color: '#666', fontFamily: 'monospace' }, // muted
   actions: { flexDirection: 'row', gap: 8, marginTop: 4 },
 });

src/screens/PhotoSettingsScreen.tsx

@@ -25,9 +25,10 @@ import {
   OverlayPosition,
   pickAndSaveLogo,
   PhotoResolution,
+  PhotoAspectRatio,
   saveFooterConfig,
 } from '../photo/footerConfig';
-import { ChipSelect, COLORS, PrimaryButton, SectionTitle } from '../ui/components';
+import { ChipSelect, PrimaryButton, SectionTitle } from '../ui/components';
 
 const BUILT_IN_LABELS: Record<string, string> = {
   project_name: 'Nombre del proyecto',
@@ -36,6 +37,7 @@ const BUILT_IN_LABELS: Record<string, string> = {
 };
 
 const RESOLUTION_OPTIONS: PhotoResolution[] = ['low', 'medium', 'high'];
+const RATIO_OPTIONS: PhotoAspectRatio[] = ['1:1', '4:3', '16:9', 'full'];
 const QUALITY_OPTIONS = ['0.5', '0.7', '0.85', '1.0'];
 const POSITION_OPTIONS: OverlayPosition[] = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
 
@@ -125,13 +127,12 @@ export function PhotoSettingsScreen() {
   return (
     <ScrollView contentContainerStyle={styles.body} keyboardShouldPersistTaps="handled">
 
-      {/* Master toggle */}
       <View style={styles.row}>
         <Text style={styles.masterLabel}>Añadir pie de página a las fotos</Text>
         <Switch
           value={config.enabled}
           onValueChange={toggleEnabled}
-          trackColor={{ true: COLORS.primary }}
+          trackColor={{ true: '#1f6f43' }} // primary
         />
       </View>
 
@@ -175,6 +176,18 @@ export function PhotoSettingsScreen() {
 
         <View style={{ height: 12 }} />
 
+        <ChipSelect
+          label="Relación de aspecto"
+          value={config.aspectRatio}
+          options={RATIO_OPTIONS}
+          onChange={(v) => void save({ ...config, aspectRatio: v })}
+        />
+        <Text style={styles.hint}>
+          Proporción de la foto (1:1 es cuadrada).
+        </Text>
+
+        <View style={{ height: 12 }} />
+
         <ChipSelect
           label="Calidad de compresión"
           value={String(config.quality)}
@@ -208,7 +221,7 @@ export function PhotoSettingsScreen() {
             <Switch
               value={f.enabled}
               onValueChange={(v) => toggleField(f.id, v)}
-              trackColor={{ true: COLORS.primary }}
+              trackColor={{ true: '#1f6f43' }} // primary
             />
             <View style={styles.fieldInfo}>
               <Text style={styles.fieldKey}>
@@ -299,30 +312,30 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingVertical: 14,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
     marginBottom: 8,
   },
   masterLabel: { fontSize: 16, fontWeight: '600', flex: 1, marginRight: 12 },
 
   /* Logo */
   logoRow: { flexDirection: 'row', alignItems: 'center', gap: 16, marginBottom: 4 },
-  logoPreview: { width: 72, height: 72, borderRadius: 8, backgroundColor: COLORS.bg },
+  logoPreview: { width: 72, height: 72, borderRadius: 8, backgroundColor: '#f4f4f4' }, // bg
   logoPlaceholder: {
     width: 72,
     height: 72,
     borderRadius: 8,
-    backgroundColor: COLORS.bg,
+    backgroundColor: '#f4f4f4', // bg
     justifyContent: 'center',
     alignItems: 'center',
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
   },
-  logoPlaceholderText: { fontSize: 11, color: COLORS.muted },
+  logoPlaceholderText: { fontSize: 11, color: '#666' }, // muted
   logoActions: { gap: 8 },
-  hint: { fontSize: 11, color: COLORS.muted, marginBottom: 8 },
+  hint: { fontSize: 11, color: '#666', marginBottom: 8 }, // muted
 
   card: {
-    backgroundColor: COLORS.bg,
+    backgroundColor: '#f4f4f4', // bg
     borderRadius: 8,
     padding: 12,
     marginBottom: 8,
@@ -335,21 +348,21 @@ const styles = StyleSheet.create({
     gap: 10,
     paddingVertical: 10,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
   },
   fieldInfo: { flex: 1 },
-  fieldKey: { fontSize: 11, color: COLORS.muted, marginBottom: 2 },
+  fieldKey: { fontSize: 11, color: '#666', marginBottom: 2 }, // muted
   fieldLabel: {
     fontSize: 14,
     color: '#111',
     borderBottomWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
     paddingVertical: 2,
     paddingHorizontal: 0,
   },
-  fieldValue: { marginTop: 4, color: COLORS.muted },
+  fieldValue: { marginTop: 4, color: '#666' }, // muted
   deleteBtn: { padding: 8 },
-  deleteTxt: { color: COLORS.danger, fontSize: 16 },
+  deleteTxt: { color: '#b00020', fontSize: 16 }, // danger
 
   /* Nuevo campo */
   addFieldBtn: {
@@ -358,20 +371,20 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderWidth: 1,
     borderStyle: 'dashed',
-    borderColor: COLORS.primary,
+    borderColor: '#1f6f43', // primary
     borderRadius: 8,
   },
-  addFieldTxt: { color: COLORS.primary, fontWeight: '600' },
+  addFieldTxt: { color: '#1f6f43', fontWeight: '600' }, // primary
   addForm: {
     marginTop: 12,
     padding: 12,
-    backgroundColor: COLORS.bg,
+    backgroundColor: '#f4f4f4', // bg
     borderRadius: 8,
     gap: 10,
   },
   addInput: {
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
     borderRadius: 6,
     paddingHorizontal: 10,
     paddingVertical: 8,

src/screens/ProjectDetailScreen.tsx

@@ -9,7 +9,7 @@ import { runSync } from '../sync/engine';
 import { useAutoSync } from '../sync/useAutoSync';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { RootStackParamList } from '../navigation/types';
-import { COLORS, PrimaryButton } from '../ui/components';
+import { PrimaryButton } from '../ui/components';
 import { FeaturesSection } from './sections/FeaturesSection';
 import { IssuesSection } from './sections/IssuesSection';
 
@@ -23,6 +23,7 @@ export function ProjectDetailScreen({ route, navigation }: Props) {
   const insets = useSafeAreaInsets();
   const { projectId } = route.params;
   const [tab, setTab] = useState<Tab>('Features');
+  const [featuresMode, setFeaturesMode] = useState<'list' | 'map'>('list');
   const [counts, setCounts] = useState<OutboxCounts>(EMPTY);
   const [syncing, setSyncing] = useState(false);
   // Se incrementa tras cada sync para forzar el recargado de la sección visible.
@@ -104,9 +105,16 @@ export function ProjectDetailScreen({ route, navigation }: Props) {
         ))}
       </View>
 
-      <View style={styles.content} key={`${tab}-${nonce}`}>
+      <View style={styles.content} key={tab}>
-        {tab === 'Features' && <FeaturesSection projectId={projectId} />}
+        {tab === 'Features' && (
-        {tab === 'Incidencias' && <IssuesSection projectId={projectId} />}
+          <FeaturesSection
+            projectId={projectId}
+            refreshKey={nonce}
+            mode={featuresMode}
+            onModeChange={setFeaturesMode}
+          />
+        )}
+        {tab === 'Incidencias' && <IssuesSection projectId={projectId} refreshKey={nonce} />}
       </View>
 
       <View style={[styles.footer, { paddingBottom: Math.max(12, insets.bottom) }]}>
@@ -122,11 +130,11 @@ export function ProjectDetailScreen({ route, navigation }: Props) {
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  tabs: { flexDirection: 'row', borderBottomWidth: StyleSheet.hairlineWidth, borderColor: COLORS.border },
+  tabs: { flexDirection: 'row', borderBottomWidth: StyleSheet.hairlineWidth, borderColor: '#ddd' }, // border
   tab: { flex: 1, paddingVertical: 12, alignItems: 'center' },
-  tabActive: { borderBottomWidth: 2, borderColor: COLORS.primary },
+  tabActive: { borderBottomWidth: 2, borderColor: '#1f6f43' }, // primary
-  tabText: { fontSize: 14, color: COLORS.muted },
+  tabText: { fontSize: 14, color: '#666' }, // muted
-  tabTextActive: { color: COLORS.primary, fontWeight: '700' },
+  tabTextActive: { color: '#1f6f43', fontWeight: '700' }, // primary
   content: { flex: 1 },
-  footer: { padding: 12, borderTopWidth: StyleSheet.hairlineWidth, borderColor: COLORS.border },
+  footer: { padding: 12, borderTopWidth: StyleSheet.hairlineWidth, borderColor: '#ddd' }, // border
 });

src/screens/ProjectsScreen.tsx

@@ -16,7 +16,6 @@ import { getProjects, saveProjectList, saveTemplates, setActiveProjectId } from
 import { isOnline } from '../net/connectivity';
 import { runSync } from '../sync/engine';
 import { RootStackParamList } from '../navigation/types';
-import { COLORS } from '../ui/components';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -165,9 +164,9 @@ const styles = StyleSheet.create({
   dropdownLabel: {
     fontSize: 15,
     fontWeight: '600',
-    color: COLORS.primary,
+    color: '#1f6f43', // primary
   },
-  chevronSmall: { fontSize: 10, color: COLORS.primary },
+  chevronSmall: { fontSize: 10, color: '#1f6f43' }, // primary
   floatingMenu: {
     position: 'absolute',
     top: 4,
@@ -175,7 +174,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
     overflow: 'hidden',
     minWidth: 180,
     elevation: 10,
@@ -191,7 +190,7 @@ const styles = StyleSheet.create({
   },
   dropdownItemDanger: {
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: COLORS.border,
+    borderTopColor: '#ddd', // border
   },
   dropdownItemText: {
     fontSize: 15,
@@ -207,13 +206,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 18,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: COLORS.border,
+    borderBottomColor: '#ddd', // border
     backgroundColor: '#fff',
   },
   cardContent: { flex: 1 },
   cardName: { fontSize: 16, fontWeight: '700', color: '#111' },
-  cardMeta: { fontSize: 13, color: COLORS.muted, marginTop: 4 },
+  cardMeta: { fontSize: 13, color: '#666', marginTop: 4 }, // muted
-  chevron: { fontSize: 20, color: COLORS.border, marginLeft: 8 },
+  chevron: { fontSize: 20, color: '#ddd', marginLeft: 8 }, // border
   empty: { textAlign: 'center', marginTop: 40, color: '#888' },
 });
 

src/screens/SettingsScreen.tsx

@@ -16,7 +16,7 @@ import {
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../navigation/types';
-import { COLORS, PrimaryButton, SectionTitle } from '../ui/components';
+import { PrimaryButton, SectionTitle } from '../ui/components';
 import { useSession } from '../auth/session';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
@@ -120,11 +120,11 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 16,
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
   },
   row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
   label: { fontSize: 15, fontWeight: '600', color: '#111' },
-  hint: { fontSize: 12, color: COLORS.muted, marginTop: 4 },
+  hint: { fontSize: 12, color: '#666', marginTop: 4 }, // muted
   languageSelector: {
     flexDirection: 'row',
     gap: 8,
@@ -136,17 +136,17 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
     backgroundColor: '#fff',
     alignItems: 'center',
   },
   langBtnActive: {
-    backgroundColor: COLORS.primary,
+    backgroundColor: '#1f6f43', // primary
-    borderColor: COLORS.primary,
+    borderColor: '#1f6f43', // primary
   },
-  langBtnText: { fontSize: 14, color: COLORS.muted },
+  langBtnText: { fontSize: 14, color: '#666' }, // muted
   langBtnTextActive: { color: '#fff', fontWeight: '600' },
-  divider: { height: 1, backgroundColor: COLORS.border, marginVertical: 8 },
+  divider: { height: 1, backgroundColor: '#ddd', marginVertical: 8 }, // border
   settingsRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -160,15 +160,15 @@ const styles = StyleSheet.create({
   },
   settingsIcon: { fontSize: 20 },
   settingsLabel: { fontSize: 15, fontWeight: '500', color: '#111' },
-  chevron: { fontSize: 20, color: COLORS.muted },
+  chevron: { fontSize: 20, color: '#666' }, // muted
   accountRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: COLORS.border,
+    borderBottomColor: '#ddd', // border
   },
-  accountLabel: { fontSize: 14, color: COLORS.muted },
+  accountLabel: { fontSize: 14, color: '#666' }, // muted
   accountValue: { fontSize: 14, fontWeight: '600', color: '#111', textAlign: 'right', flex: 1, marginLeft: 16 },
 });

src/screens/detail/FeatureDetailContent.tsx

@@ -10,7 +10,6 @@ import { RootStackParamList } from '../../navigation/types';
 import {
   Badge,
   Card,
-  COLORS,
   EmptyState,
   SectionTitle,
 } from '../../ui/components';
@@ -74,7 +73,7 @@ export function FeatureDetailContent({ featureId }: { featureId: number }) {
   if (!feature) {
     return (
       <View style={styles.center}>
-        <Text style={{ color: COLORS.muted }}>Cargando…</Text>
+        <Text style={{ color: '#666' }}>Cargando…</Text>
       </View>
     );
   }
@@ -86,9 +85,9 @@ export function FeatureDetailContent({ featureId }: { featureId: number }) {
     <ScrollView contentContainerStyle={[styles.body, { paddingBottom: insets.bottom + 20 }]}>
       <View style={styles.badges}>
         {featureType && (
-          <Badge label={featureType.name} color={featureType.color ?? COLORS.muted} />
+          <Badge label={featureType.name} color={featureType.color ?? '#666'} />
         )}
-        <Badge label={`${Math.round(feature.progress ?? 0)}%`} color={COLORS.muted} />
+        <Badge label={`${Math.round(feature.progress ?? 0)}%`} color={'#666'} />
       </View>
 
       <SectionTitle>Inspecciones ({inspections.length})</SectionTitle>
@@ -112,11 +111,11 @@ const styles = StyleSheet.create({
   badges: { flexDirection: 'row', gap: 6, marginTop: 6 },
   insCard: { marginBottom: 6 },
   insTitle: { fontSize: 14, fontWeight: '600' },
-  insNotes: { fontSize: 13, color: COLORS.muted, marginTop: 2 },
+  insNotes: { fontSize: 13, color: '#666', marginTop: 2 },
   headerButton: {
     paddingHorizontal: 12,
     paddingVertical: 6,
-    backgroundColor: COLORS.primary,
+    backgroundColor: '#1f6f43',
     borderRadius: 6,
     marginRight: 8,
   },

src/screens/detail/IssueDetailContent.tsx

@@ -30,7 +30,6 @@ import {
   Badge,
   Card,
   ChipSelect,
-  COLORS,
   EmptyState,
   Field,
   ISSUE_PRIORITY_COLOR,
@@ -111,7 +110,7 @@ export function IssueDetailContent({ issueId }: { issueId: number }) {
   if (!issue) {
     return (
       <View style={styles.center}>
-        <Text style={{ color: COLORS.muted }}>Cargando…</Text>
+        <Text style={{ color: '#666' }}>Cargando…</Text>
       </View>
     );
   }
@@ -124,15 +123,15 @@ export function IssueDetailContent({ issueId }: { issueId: number }) {
       <Text style={styles.title}>{issue.title}</Text>
       <View style={styles.badges}>
         {issue.status && (
-          <Badge label={issue.status} color={ISSUE_STATUS_COLOR[issue.status] ?? COLORS.muted} />
+          <Badge label={issue.status} color={ISSUE_STATUS_COLOR[issue.status] ?? '#666'} />
         )}
         {issue.priority && (
           <Badge
             label={issue.priority}
-            color={ISSUE_PRIORITY_COLOR[issue.priority] ?? COLORS.muted}
+            color={ISSUE_PRIORITY_COLOR[issue.priority] ?? '#666'}
           />
         )}
-        {issue.type && <Badge label={issue.type} color={COLORS.muted} />}
+        {issue.type && <Badge label={issue.type} color="#666" />}
       </View>
       {issue.description ? <Text style={styles.desc}>{issue.description}</Text> : null}
 
@@ -225,9 +224,9 @@ const styles = StyleSheet.create({
   taskRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, gap: 10 },
   checkbox: { fontSize: 20 },
   taskText: { fontSize: 15, flex: 1 },
-  taskDone: { textDecorationLine: 'line-through', color: COLORS.muted },
+  taskDone: { textDecorationLine: 'line-through', color: '#666' }, // muted
   addRow: { flexDirection: 'row', alignItems: 'flex-end', gap: 8, marginTop: 4 },
   comment: { marginBottom: 6 },
   commentBody: { fontSize: 14 },
-  commentMeta: { fontSize: 11, color: COLORS.muted, marginTop: 4 },
+  commentMeta: { fontSize: 11, color: '#666', marginTop: 4 }, // muted
 });

src/screens/sections/FeaturesSection.tsx

@@ -5,12 +5,12 @@
  */
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { Feature } from '../../api/types';
 import { getFeatures } from '../../db/repositories';
 import { RootStackParamList } from '../../navigation/types';
-import { Badge, COLORS, EmptyState } from '../../ui/components';
+import { Badge, EmptyState } from '../../ui/components';
 import { FeatureMap } from '../../ui/FeatureMap';
 import { MasterDetail } from '../../ui/MasterDetail';
 import { FeatureDetailContent } from '../detail/FeatureDetailContent';
@@ -18,10 +18,19 @@ import { FeatureDetailContent } from '../detail/FeatureDetailContent';
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 type ViewMode = 'list' | 'map';
 
-export function FeaturesSection({ projectId }: { projectId: number }) {
+export function FeaturesSection({
+  projectId,
+  refreshKey,
+  mode,
+  onModeChange,
+}: {
+  projectId: number;
+  refreshKey?: number;
+  mode: ViewMode;
+  onModeChange: (m: ViewMode) => void;
+}) {
   const navigation = useNavigation<Nav>();
   const [features, setFeatures] = useState<Feature[]>([]);
-  const [mode, setMode] = useState<ViewMode>('list');
 
   const load = useCallback(() => {
     void getFeatures(projectId).then(setFeatures);
@@ -29,6 +38,12 @@ export function FeaturesSection({ projectId }: { projectId: number }) {
 
   useFocusEffect(load);
 
+  // Refrescar datos cuando cambie la refreshKey (p.ej. tras un sync automático)
+  // sin desmontar el componente (preservando el modo lista/mapa).
+  useEffect(() => {
+    if (refreshKey) void load();
+  }, [refreshKey, load]);
+
   const goPhone = (id: number) => {
     const f = features.find((x) => x.id === id);
     navigation.navigate('FeatureDetail', { featureId: id, name: f?.name ?? 'Feature' });
@@ -45,7 +60,7 @@ export function FeaturesSection({ projectId }: { projectId: number }) {
               <TouchableOpacity
                 key={m}
                 style={[styles.toggleBtn, mode === m && styles.toggleActive]}
-                onPress={() => setMode(m)}
+                onPress={() => onModeChange(m)}
               >
                 <Text style={[styles.toggleText, mode === m && styles.toggleTextActive]}>
                   {m === 'list' ? 'Lista' : 'Mapa'}
@@ -71,7 +86,7 @@ export function FeaturesSection({ projectId }: { projectId: number }) {
                     <Text style={styles.name}>{item.name}</Text>
                     {item.status ? <Text style={styles.meta}>{item.status}</Text> : null}
                   </View>
-                  <Badge label={`${Math.round(item.progress ?? 0)}%`} color={COLORS.muted} />
+                  <Badge label={`${Math.round(item.progress ?? 0)}%`} color="#666" />
                 </TouchableOpacity>
               )}
             />
@@ -88,17 +103,17 @@ const styles = StyleSheet.create({
     padding: 8,
     gap: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
   },
   toggleBtn: {
     paddingHorizontal: 14,
     paddingVertical: 6,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
   },
-  toggleActive: { backgroundColor: COLORS.primary, borderColor: COLORS.primary },
+  toggleActive: { backgroundColor: '#1f6f43', borderColor: '#1f6f43' }, // primary
-  toggleText: { fontSize: 13, color: COLORS.muted },
+  toggleText: { fontSize: 13, color: '#666' }, // muted
   toggleTextActive: { color: '#fff', fontWeight: '700' },
   row: {
     flexDirection: 'row',
@@ -106,10 +121,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 14,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
     gap: 8,
   },
   rowActive: { backgroundColor: '#eef5f0' },
   name: { fontSize: 15, fontWeight: '600' },
-  meta: { fontSize: 12, color: COLORS.muted, marginTop: 2 },
+  meta: { fontSize: 12, color: '#666', marginTop: 2 }, // muted
 });

src/screens/sections/IssuesSection.tsx

@@ -3,7 +3,7 @@
  */
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { Issue } from '../../api/types';
 import { hasPermission, useSession } from '../../auth/session';
@@ -11,7 +11,6 @@ import { getIssues } from '../../db/repositories';
 import { RootStackParamList } from '../../navigation/types';
 import {
   Badge,
-  COLORS,
   EmptyState,
   ISSUE_PRIORITY_COLOR,
   ISSUE_STATUS_COLOR,
@@ -22,7 +21,7 @@ import { IssueDetailContent } from '../detail/IssueDetailContent';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 
-export function IssuesSection({ projectId }: { projectId: number }) {
+export function IssuesSection({ projectId, refreshKey }: { projectId: number; refreshKey?: number }) {
   const navigation = useNavigation<Nav>();
   const { user } = useSession();
   const canCreate = hasPermission(user, 'create issues');
@@ -34,6 +33,10 @@ export function IssuesSection({ projectId }: { projectId: number }) {
 
   useFocusEffect(load);
 
+  useEffect(() => {
+    if (refreshKey) void load();
+  }, [refreshKey, load]);
+
   return (
     <View style={{ flex: 1 }}>
       {canCreate && (
@@ -71,16 +74,16 @@ export function IssuesSection({ projectId }: { projectId: number }) {
                       {item.priority && (
                         <Badge
                           label={item.priority}
-                          color={ISSUE_PRIORITY_COLOR[item.priority] ?? COLORS.muted}
+                          color={ISSUE_PRIORITY_COLOR[item.priority] ?? '#666'}
                         />
                       )}
                       {item.status && (
                         <Badge
                           label={item.status}
-                          color={ISSUE_STATUS_COLOR[item.status] ?? COLORS.muted}
+                          color={ISSUE_STATUS_COLOR[item.status] ?? '#666'}
                         />
                       )}
-                      {item.id < 0 && <Badge label="local" color={COLORS.warn} />}
+                      {item.id < 0 && <Badge label="local" color="#8a6d00" />}
                     </View>
                   </View>
                 </TouchableOpacity>
@@ -94,12 +97,12 @@ export function IssuesSection({ projectId }: { projectId: number }) {
 }
 
 const styles = StyleSheet.create({
-  toolbar: { padding: 12, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: COLORS.border },
+  toolbar: { padding: 12, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: '#ddd' }, // border
   row: {
     paddingHorizontal: 16,
     paddingVertical: 14,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: COLORS.border,
+    borderColor: '#ddd', // border
   },
   rowActive: { backgroundColor: '#eef5f0' },
   title: { fontSize: 15, fontWeight: '600' },

src/sync/engine.ts

@@ -239,3 +239,28 @@ export async function runSync(projectId: number): Promise<SyncReport> {
 
   return report;
 }
+
+/**
+ * Versión ligera del sync que solo vacía las colas de salida (PUSH + MEDIA).
+ * No requiere un proyecto activo ni realiza PULL. Útil para el auto-sync global.
+ */
+export async function runPushOnly(): Promise<void> {
+  const report: SyncReport = {
+    pushed: 0,
+    applied: 0,
+    conflicts: 0,
+    errors: 0,
+    mediaUploaded: 0,
+    mediaErrors: 0,
+    pulled: false,
+  };
+
+  try {
+    await pushOperations(report);
+    await pushMedia(report);
+    await purgeSentOperations();
+  } catch (e) {
+    // Silencioso: el usuario verá el estado en la barra de sync si hay problemas
+    console.warn('Global push-only sync failed:', e);
+  }
+}

src/ui/FeatureMap.tsx

@@ -1,12 +1,13 @@
 /**
  * Mapa de features usando OpenStreetMap via Leaflet y WebView.
  * Elimina la dependencia de la API Key de Google Maps.
+ * Añade ubicación del usuario y mapa satelital.
  */
-import React, { useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import * as Location from 'expo-location';
 import { Feature } from '../api/types';
-import { COLORS } from './components';
 
 export function FeatureMap({
   features,
@@ -18,21 +19,64 @@ export function FeatureMap({
   onSelect: (id: number) => void;
 }) {
   const webViewRef = useRef<WebView>(null);
+  const [userLocation, setUserLocation] = useState<Location.LocationObjectCoords | null>(null);
+
+  // Vigilancia de la ubicación del usuario
+  useEffect(() => {
+    let sub: Location.LocationSubscription | null = null;
+
+    (async () => {
+      const { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== 'granted') return;
+
+      const last = await Location.getLastKnownPositionAsync();
+      if (last) setUserLocation(last.coords);
+
+      sub = await Location.watchPositionAsync(
+        { accuracy: Location.Accuracy.Balanced, distanceInterval: 5 },
+        (loc) => {
+          setUserLocation(loc.coords);
+          // Inyectar posición en el mapa si el webview ya está listo
+          webViewRef.current?.injectJavaScript(`if(window.updateUserPosition) window.updateUserPosition(${loc.coords.latitude}, ${loc.coords.longitude}); true;`);
+        }
+      );
+    })();
+
+    return () => sub?.remove();
+  }, []);
+
+  const centerOnUser = useCallback(() => {
+    if (userLocation) {
+      const { latitude, longitude } = userLocation;
+      webViewRef.current?.injectJavaScript(`if(window.centerOnUser) window.centerOnUser(${latitude}, ${longitude}); true;`);
+    }
+  }, [userLocation]);
 
   // Convertimos las features a un objeto GeoJSON simple para Leaflet
   const geoData = useMemo(() => {
     return {
       type: 'FeatureCollection',
-      features: features.map((f) => ({
+      features: features.map((f) => {
-        type: 'Feature',
+        let geom = f.geometry;
-        id: f.id,
+        if (typeof geom === 'string') {
-        geometry: typeof f.geometry === 'string' ? JSON.parse(f.geometry) : f.geometry,
+          try {
-        properties: {
+            geom = JSON.parse(geom);
-          name: f.name,
+          } catch (e) {
-          status: f.status,
+            console.warn('Invalid geometry JSON for feature', f.id);
-          selected: f.id === selectedId,
+            geom = null;
-        },
+          }
-      })),
+        }
+        return {
+          type: 'Feature',
+          id: f.id,
+          geometry: geom,
+          properties: {
+            name: f.name,
+            status: f.status,
+            selected: f.id === selectedId,
+          },
+        };
+      }).filter(f => f.geometry),
     };
   }, [features, selectedId]);
 
@@ -47,16 +91,36 @@ export function FeatureMap({
       <style>
         body { margin: 0; padding: 0; }
         #map { height: 100vh; width: 100vw; background: #f0f0f0; }
+        .user-marker {
+          width: 16px;
+          height: 16px;
+          background: #2196F3;
+          border: 2px solid white;
+          border-radius: 50%;
+          box-shadow: 0 0 10px rgba(33, 150, 243, 0.6);
+        }
       </style>
     </head>
     <body>
       <div id="map"></div>
       <script>
-        const map = L.map('map', { zoomControl: false });
+        const streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           attribution: '&copy; OpenStreetMap'
-        }).addTo(map);
+        });
+
+        const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+          attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EBP, and the GIS User Community'
+        });
+
+        const map = L.map('map', {
+          zoomControl: false,
+          layers: [streetLayer]
+        });
+
+        L.control.layers({
+          "Callejero": streetLayer,
+          "Satélite": satelliteLayer
+        }, null, { position: 'topright' }).addTo(map);
 
         const geoData = ${JSON.stringify(geoData)};
 
@@ -91,19 +155,49 @@ export function FeatureMap({
           }
         }).addTo(map);
 
+        // Marcador de usuario
+        let userMarker = null;
+        window.updateUserPosition = function(lat, lng) {
+          if (!userMarker) {
+            userMarker = L.marker([lat, lng], {
+              icon: L.divIcon({
+                className: 'user-marker-wrap',
+                html: '<div class="user-marker"></div>',
+                iconSize: [16, 16],
+                iconAnchor: [8, 8]
+              })
+            }).addTo(map);
+          } else {
+            userMarker.setLatLng([lat, lng]);
+          }
+        };
+
+        window.centerOnUser = function(lat, lng) {
+          window.updateUserPosition(lat, lng);
+          map.flyTo([lat, lng], 18);
+        };
+
         if (geoData.features.length > 0) {
           try {
-            map.fitBounds(geoLayer.getBounds(), { padding: [20, 20] });
+            const bounds = geoLayer.getBounds();
+            if (bounds.isValid()) {
+              map.fitBounds(bounds, { padding: [20, 20] });
+            } else {
+              map.setView([40.4167, -3.7037], 13);
+            }
           } catch(e) {
             map.setView([40.4167, -3.7037], 13);
           }
         } else {
           map.setView([40.4167, -3.7037], 13); // Madrid default
         }
+
+        // Posición inicial si ya la tenemos
+        ${userLocation ? `window.updateUserPosition(${userLocation.latitude}, ${userLocation.longitude});` : ''}
       </script>
     </body>
     </html>
-  `, [geoData]);
+  `, [geoData, userLocation != null]);
 
   const onMessage = (event: any) => {
     try {
@@ -127,6 +221,11 @@ export function FeatureMap({
         javaScriptEnabled={true}
         domStorageEnabled={true}
       />
+      {userLocation && (
+        <TouchableOpacity style={styles.fab} onPress={centerOnUser} activeOpacity={0.8}>
+          <Text style={styles.fabIcon}>🎯</Text>
+        </TouchableOpacity>
+      )}
     </View>
   );
 }
@@ -134,4 +233,23 @@ export function FeatureMap({
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#f0f0f0' },
   map: { flex: 1 },
+  fab: {
+    position: 'absolute',
+    bottom: 24,
+    right: 24,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: '#fff',
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#ddd',
+  },
+  fabIcon: { fontSize: 24 },
 });

src/ui/MediaStrip.tsx

@@ -39,7 +39,6 @@ import {
   StampMeta,
 } from '../photo/footerConfig';
 import { FooterOverlay } from '../photo/FooterOverlay';
-import { COLORS } from './components';
 
 // ─── tipos internos ────────────────────────────────────────────────────────
 
@@ -304,7 +303,7 @@ export function MediaStrip({
                 </View>
               )}
               {m.status === 'error' && (
-                <View style={[styles.tag, { backgroundColor: COLORS.danger }]}>
+                <View style={[styles.tag, { backgroundColor: '#b00020' }]}>
                   <Text style={styles.tagText}>error</Text>
                 </View>
               )}
@@ -368,10 +367,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     marginBottom: 10,
   },
-  headerLabel: { fontSize: 14, fontWeight: '700', color: COLORS.muted },
+  headerLabel: { fontSize: 14, fontWeight: '700', color: '#666' }, // muted
   headerActions: { flexDirection: 'row', alignItems: 'center' },
-  gear: { fontSize: 18, color: COLORS.muted, paddingHorizontal: 8 },
+  gear: { fontSize: 18, color: '#666', paddingHorizontal: 8 }, // muted
-  deleteAction: { backgroundColor: COLORS.danger, paddingHorizontal: 12, paddingVertical: 4, borderRadius: 6 },
+  deleteAction: { backgroundColor: '#b00020', paddingHorizontal: 12, paddingVertical: 4, borderRadius: 6 }, // danger
   deleteActionTxt: { color: '#fff', fontSize: 12, fontWeight: 'bold' },
 
   grid: {
@@ -382,23 +381,23 @@ const styles = StyleSheet.create({
   addBtn: {
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: COLORS.primary,
+    borderColor: '#1f6f43', // primary
     borderStyle: 'dashed',
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#fff',
   },
-  addPlus: { color: COLORS.primary, fontSize: 24, fontWeight: '700' },
+  addPlus: { color: '#1f6f43', fontSize: 24, fontWeight: '700' }, // primary
-  addText: { color: COLORS.primary, fontSize: 11, marginTop: 2 },
+  addText: { color: '#1f6f43', fontSize: 11, marginTop: 2 }, // primary
 
   thumbWrap: {
     borderRadius: 8,
     overflow: 'hidden',
-    backgroundColor: COLORS.bg,
+    backgroundColor: '#f4f4f4', // bg
     borderWidth: 2,
     borderColor: 'transparent',
   },
-  selectedThumb: { borderColor: COLORS.primary },
+  selectedThumb: { borderColor: '#1f6f43' }, // primary
   thumb: { width: '100%', height: '100%' },
 
   checkOverlay: {

src/ui/colors.ts

@@ -0,0 +1,8 @@
+export const COLORS = {
+  primary: '#1f6f43',
+  warn: '#8a6d00',
+  danger: '#b00020',
+  muted: '#666',
+  border: '#ddd',
+  bg: '#f4f4f4',
+};

src/ui/components.tsx

@@ -60,8 +60,8 @@ export function PrimaryButton({
   variant?: 'primary' | 'danger' | 'ghost';
 }) {
   const bg =
-    variant === 'danger' ? COLORS.danger : variant === 'ghost' ? 'transparent' : COLORS.primary;
+    variant === 'danger' ? '#b00020' : variant === 'ghost' ? 'transparent' : '#1f6f43';
-  const fg = variant === 'ghost' ? COLORS.primary : '#fff';
+  const fg = variant === 'ghost' ? '#1f6f43' : '#fff';
   return (
     <TouchableOpacity
       style={[
@@ -155,21 +155,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  buttonGhost: { borderWidth: 1, borderColor: COLORS.primary },
+  buttonGhost: { borderWidth: 1, borderColor: '#1f6f43' },
   buttonDisabled: { opacity: 0.5 },
   buttonText: { fontSize: 15, fontWeight: '700' },
   card: {
-    backgroundColor: COLORS.bg,
+    backgroundColor: '#f4f4f4',
     borderRadius: 10,
     padding: 12,
   },
   sectionTitle: { fontSize: 16, fontWeight: '700', marginTop: 8, marginBottom: 4 },
   empty: { color: '#888', textAlign: 'center', marginTop: 24 },
   field: { marginBottom: 12 },
-  fieldLabel: { fontSize: 13, color: COLORS.muted, marginBottom: 4, fontWeight: '600' },
+  fieldLabel: { fontSize: 13, color: '#666', marginBottom: 4, fontWeight: '600' },
   input: {
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd',
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 10,
@@ -182,10 +182,10 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: COLORS.border,
+    borderColor: '#ddd',
     backgroundColor: '#fff',
   },
-  chipActive: { backgroundColor: COLORS.primary, borderColor: COLORS.primary },
+  chipActive: { backgroundColor: '#1f6f43', borderColor: '#1f6f43' },
-  chipText: { fontSize: 13, color: COLORS.muted },
+  chipText: { fontSize: 13, color: '#666' },
   chipTextActive: { color: '#fff', fontWeight: '700' },
 });