Guía de Desarrollo
BioSello en React Native (JavaScript)

# Crear el proyecto BioSello
npx react-native@latest init BioSello

# Entrar al proyecto
cd BioSello

# Correr en Android (con emulador o dispositivo conectado)
npx react-native run-android

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>🐄 BioSello</Text>
      <Text style={styles.sub}>Trazabilidad cárnica en tu mano</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#0d1117' },
  title:     { fontSize: 32, fontWeight: 'bold', color: '#3fb950' },
  sub:       { fontSize: 16, color: '#8b949e', marginTop: 8 },
});

BioSello/
├── android/               # Código nativo Android
├── ios/                   # Código nativo iOS
├── src/
│   ├── api/               # Llamadas HTTP al backend
│   │   ├── animales.js
│   │   ├── lotes.js
│   │   ├── auth.js
│   │   └── client.ts      # Instancia Axios configurada
│   ├── components/        # Componentes reutilizables
│   │   ├── AnimalCard.jsx
│   │   ├── LoteCard.jsx
│   │   ├── QRScanner.jsx
│   │   └── AlertaBadge.jsx
│   ├── screens/           # Una pantalla = un archivo
│   │   ├── LoginScreen.jsx
│   │   ├── DashboardScreen.jsx
│   │   ├── AnimalDetailScreen.jsx
│   │   ├── LoteFormScreen.jsx
│   │   ├── GuiaTransitoScreen.jsx
│   │   └── QRResultScreen.jsx
│   ├── navigation/        # Configuración de rutas
│   │   ├── AppNavigator.jsx
│   │   ├── AuthNavigator.jsx
│   │   └── TabNavigator.jsx
│   ├── store/             # Estado global (Zustand)
│   │   ├── authStore.js
│   │   └── loteStore.js
│   ├── hooks/             # Hooks personalizados
│   │   ├── useAnimales.js
│   │   └── useAlerts.js
│   ├── utils/             # Funciones utilitarias
│   │   ├── validators.js
│   │   └── formatters.js
│   ├── constants/
│   │   └── theme.ts       # Colores y tipografía
│   └── types/
│       └── index.ts       # Tipos TypeScript del dominio
├── App.jsx
├── package.json
└── babel.config.js

// En JavaScript puro no hay interfaces.
// Documentamos la forma de los objetos con JSDoc:

/**
 * @typedef {Object} Animal
 * @property {number} id_animal
 * @property {string} num_arete
 * @property {'BOVINO'|'PORCINO'|'OVINO'|'CAPRINO'|'EQUINO'} especie
 * @property {'MACHO'|'HEMBRA'} sexo
 * @property {'VAQUILLA'|'VACA'|'TORETE'|'TORO'|'BECERRO'|'BECERRA'|'BUEY'} clasificacion
 * @property {number} meses_edad
 * @property {boolean} arete_faltante
 * @property {string} [foto_url]
 * @property {number} id_origen
 * @property {number} id_propietario
 * @property {string} created_at
 */

/**
 * @typedef {Object} Lote
 * @property {number} id_lote
 * @property {string} codigo_lote
 * @property {string} tipo_corte
 * @property {number} peso_kg
 * @property {string} fecha_ingreso
 * @property {string} fecha_vencimiento
 * @property {'activo'|'procesado'|'vendido'|'caducado'} estado
 * @property {number} [id_animal]
 * @property {string} [foto_url]
 */

/**
 * @typedef {Object} Usuario
 * @property {number} id_usuario
 * @property {string} nombre
 * @property {string} email
 * @property {'admin'|'empleado'|'cliente'} perfil
 * @property {boolean} activo
 */

npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useAuthStore } from '../store/authStore';

// Pantallas
import LoginScreen         from '../screens/LoginScreen';
import DashboardScreen     from '../screens/DashboardScreen';
import AnimalDetailScreen  from '../screens/AnimalDetailScreen';
import LoteFormScreen      from '../screens/LoteFormScreen';
import QRResultScreen      from '../screens/QRResultScreen';

// Tipado de rutas
export type RootStackParamList = {
  Login:        undefined;
  Tabs:         undefined;
  AnimalDetail: { id_animal };
  LoteForm:     { id_lote? };
  QRResult:     { codigo_lote };
};

const Stack = createNativeStackNavigator();
const Tab   = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator screenOptions={{ tabBarStyle: { backgroundColor: '#161b22' }, tabBarActiveTintColor: '#3fb950' }}>
      <Tab.Screen name="Dashboard" component={DashboardScreen} options={{ tabBarLabel: 'Inicio', tabBarIcon: () => '🏠' }} />
      <Tab.Screen name="Animales" component={AnimalDetailScreen} options={{ tabBarLabel: 'Animales', tabBarIcon: () => '🐄' }} />
      <Tab.Screen name="QR" component={QRResultScreen} options={{ tabBarLabel: 'Escanear', tabBarIcon: () => '📷' }} />
    </Tab.Navigator>
  );
}

export default function AppNavigator() {
  const usuario = useAuthStore(s => s.usuario);

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#161b22' }, headerTintColor: '#e6edf3' }}>
        {!usuario ? (
          <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
        ) : (
          <>
            <Stack.Screen name="Tabs" component={MainTabs} options={{ headerShown: false }} />
            <Stack.Screen name="AnimalDetail" component={AnimalDetailScreen} options={{ title: 'Detalle del Animal' }} />
            <Stack.Screen name="LoteForm" component={LoteFormScreen} options={{ title: 'Registrar Lote' }} />
            <Stack.Screen name="QRResult" component={QRResultScreen} options={{ title: 'Resultado QR' }} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/AppNavigator';

export default function AnimalRow({ animal }: { animal: Animal }) {
  const nav = useNavigation();

  return (
    <TouchableOpacity onPress={() => nav.navigate('AnimalDetail', { id_animal: animal.id_animal })}>
      <Text>{animal.num_arete}</Text>
    </TouchableOpacity>
  );
}

export const colors = {
  bg:       '#0d1117',
  surface:  '#161b22',
  border:   '#30363d',
  accent:   '#3fb950',   // verde BioSello
  blue:     '#58a6ff',
  danger:   '#f78166',
  gold:     '#d29922',
  text:     '#e6edf3',
  muted:    '#8b949e',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1:   { fontSize: 28, fontWeight: 'bold', color: colors.text },
  h2:   { fontSize: 22, fontWeight: '700', color: colors.text },
  body: { fontSize: 15, color: colors.text },
  mono: { fontFamily: 'monospace', fontSize: 13, color: colors.blue },
};

const styles = StyleSheet.create({
  screen:      { flex: 1, backgroundColor: colors.bg },
  header:      { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: spacing.md, borderBottomWidth: 1, borderColor: colors.border },
  statsRow:    { flexDirection: 'row', gap: 12, padding: spacing.md },
  statCard:    { flex: 1, backgroundColor: colors.surface, borderRadius: 10, padding: spacing.md, alignItems: 'center' },
  statNum:     { fontSize: 28, fontWeight: 'bold', color: colors.accent },
  statLabel:   { fontSize: 11, color: colors.muted, marginTop: 4, textAlign: 'center' },
});

import React, { useState } from 'react';
import { View, TextInput, Text, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
import { colors, spacing } from '../constants/theme';
import { crearAnimal } from '../api/animales';

const ESPECIES = ['BOVINO', 'PORCINO', 'OVINO', 'CAPRINO', 'EQUINO'];
const SEXOS    = ['MACHO', 'HEMBRA'];

export default function NuevoAnimalScreen() {
  const [form, setForm] = useState({
    num_arete:     '',
    especie:       'BOVINO',
    sexo:          'HEMBRA',
    meses_edad:    '',
    arete_faltante: false,
  });
  const [errores, setErrores] = useState({});

  const validar = () => {
    const e = {};
    if (!form.num_arete || form.num_arete.length < 10) e.num_arete = 'Arete inválido (mín. 10 dígitos)';
    if (!form.meses_edad || isNaN(Number(form.meses_edad))) e.meses_edad = 'Edad requerida';
    return e;
  };

  const guardar = async () => {
    const e = validar();
    if (Object.keys(e).length) { setErrores(e); return; }
    await crearAnimal({ ...form, meses_edad: Number(form.meses_edad) });
  };

  return (
    <ScrollView style={s.screen}>
      <Text style={s.label}>Número de Arete *</Text>
      <TextInput style={[s.input, errores.num_arete && s.inputErr]} value={form.num_arete}
        onChangeText={v => setForm(f => ({...f, num_arete: v}))} placeholder="1301226566" placeholderTextColor={colors.muted} keyboardType="numeric" />
      {errores.num_arete && <Text style={s.err}>{errores.num_arete}</Text>}

      <Text style={s.label}>Especie</Text>
      <View style={s.chips}>
        {ESPECIES.map(esp => (
          <TouchableOpacity key={esp} style={[s.chip, form.especie===esp && s.chipActive]} onPress={() => setForm(f => ({...f, especie:esp}))}>
            <Text style={form.especie===esp ? s.chipTxtActive : s.chipTxt}>{esp}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <TouchableOpacity style={s.btn} onPress={guardar}>
        <Text style={s.btnTxt}>Registrar Animal</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const s = StyleSheet.create({
  screen:       { flex: 1, backgroundColor: colors.bg, padding: spacing.md },
  label:        { color: colors.muted, fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.8, marginTop: spacing.md, marginBottom: 6 },
  input:        { backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, borderRadius: 8, padding: spacing.md, color: colors.text, fontSize: 15 },
  inputErr:     { borderColor: colors.danger },
  err:          { color: colors.danger, fontSize: 12, marginTop: 4 },
  chips:        { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 8 },
  chip:         { paddingHorizontal: 12, paddingVertical: 7, borderRadius: 20, borderWidth: 1, borderColor: colors.border },
  chipActive:   { backgroundColor: colors.accent, borderColor: colors.accent },
  chipTxt:      { color: colors.muted, fontSize: 13 },
  chipTxtActive:{ color: '#000', fontWeight: '700', fontSize: 13 },
  btn:          { backgroundColor: colors.accent, borderRadius: 10, padding: spacing.md, alignItems: 'center', marginTop: spacing.lg },
  btnTxt:       { color: '#000', fontWeight: '700', fontSize: 16 },
});

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const api = axios.create({
  baseURL: __DEV__ ? 'http://192.168.1.100:3000/api' : 'https://biosello.app/api',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' },
});

// Interceptor: agrega JWT a cada petición
api.interceptors.request.use(async config => {
  const token = await AsyncStorage.getItem('biosello_token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Interceptor: redirige al login si el token expiró
api.interceptors.response.use(
  r => r,
  async err => {
    if (err.response?.status === 401) {
      await AsyncStorage.removeItem('biosello_token');
      // navegar al login...
    }
    return Promise.reject(err);
  }
);

import { api } from './client';
import { Animal } from '../constants/shapes';

export const getAnimales = async () => {
  const { data } = await api.get('/animales');
  return data;
};

export const getAnimalByArete = async (num_arete): Promise<Animal> => {
  const { data } = await api.get(`/animales/arete/${num_arete}`);
  return data;
};

export const crearAnimal = async (payload): Promise<Animal> => {
  const { data } = await api.post('/animales', payload);
  return data;
};

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Usuario } from '../constants/shapes';

export const useAuthStore = create()(
  persist(
    (set) => ({
      usuario: null,
      token:   null,
      login:   (usuario, token) => set({ usuario, token }),
      logout:  () => set({ usuario: null, token: null }),
    }),
    {
      name:    'biosello-auth',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

export const validarArete = (arete) => {
  if (!/^\d{10,13}$/.test(arete)) return 'El arete debe tener 10–13 dígitos numéricos';
  return null;
};

export const validarFolio = (folio) => {
  if (!folio.trim()) return 'El folio de guía es obligatorio';
  if (folio.length > 20) return 'Máximo 20 caracteres';
  return null;
};

import mysql from 'mysql2/promise';
import dotenv from 'dotenv';
dotenv.config();

export const pool = mysql.createPool({
  host:     process.env.DB_HOST     ?? 'localhost',
  user:     process.env.DB_USER     ?? 'root',
  password: process.env.DB_PASSWORD ?? '',
  database: process.env.DB_NAME     ?? 'biosello',
  port:     Number(process.env.DB_PORT) || 3306,
  waitForConnections: true,
  connectionLimit:    10,
  charset:            'utf8',
});

// Función helper
export async function query(sql, values?[]) {
  const [rows] = await pool.execute(sql, values);
  return rows;
}

backend/
├── src/
│   ├── db.js
│   ├── app.js
│   ├── routes/
│   │   ├── auth.routes.js
│   │   ├── animales.routes.js
│   │   ├── lotes.routes.js
│   │   ├── guias.routes.js
│   │   └── qr.routes.js
│   ├── controllers/
│   │   ├── animales.controller.js
│   │   └── lotes.controller.js
│   └── middleware/
│       └── auth.middleware.js
├── .env
└── package.json

import express from 'express';
import cors from 'cors';
import authRoutes    from './routes/auth.routes';
import animalRoutes  from './routes/animales.routes';
import loteRoutes    from './routes/lotes.routes';
import guiaRoutes    from './routes/guias.routes';
import qrRoutes      from './routes/qr.routes';

const app = express();
app.use(cors());
app.use(express.json());

app.use('/api/auth',     authRoutes);
app.use('/api/animales', animalRoutes);
app.use('/api/lotes',    loteRoutes);
app.use('/api/guias',    guiaRoutes);
app.use('/api/qr',       qrRoutes);

app.listen(3000, () => console.log('🐄 BioSello API corriendo en :3000'));

import { Request, Response } from 'express';
import { query } from '../db';
import { Animal } from '../constants/shapes';

export const getAnimales = async (req, res) => {
  const animales = await query(
    `SELECT a.*, p.nombre_propietario, o.localidad_origen
       FROM animal a
       JOIN propietario p ON p.id_propietario = a.id_propietario
       JOIN origen o      ON o.id_origen = a.id_origen
      ORDER BY a.created_at DESC`
  );
  res.json(animales);
};

export const getAnimalByArete = async (req, res) => {
  const { num_arete } = req.params;
  const [animal] = await query(
    'SELECT * FROM animal WHERE num_arete = ?', [num_arete]
  );
  if (!animal) return res.status(404).json({ error: 'Animal no encontrado' });
  res.json(animal);
};

export const crearAnimal = async (req, res) => {
  const { num_arete, especie, sexo, clasificacion, meses_edad, id_origen, id_propietario } = req.body;
  const [result] = await query(
    'INSERT INTO animal (num_arete,especie,sexo,clasificacion,meses_edad,id_origen,id_propietario) VALUES (?,?,?,?,?,?,?)',
    [num_arete, especie, sexo, clasificacion, meses_edad, id_origen, id_propietario]
  );
  res.status(201).json({ id_animal: result.insertId });
};

import express from 'express';
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { query } from '../db';

const router = express.Router();
const JWT_SECRET = process.env.JWT_SECRET ?? 'biosello_secret';

router.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const [usuario] = await query(
    'SELECT * FROM usuario WHERE email = ? AND activo = 1', [email]
  );
  if (!usuario) return res.status(401).json({ error: 'Credenciales inválidas' });

  const ok = await bcrypt.compare(password, usuario.contrasena_hash);
  if (!ok) return res.status(401).json({ error: 'Credenciales inválidas' });

  const token = jwt.sign(
    { id_usuario: usuario.id_usuario, perfil: usuario.perfil },
    JWT_SECRET, { expiresIn: '8h' }
  );

  // Guardar sesión en BD
  await query(
    'INSERT INTO sesion (id_usuario, token, fecha_expira) VALUES (?,?,DATE_ADD(NOW(),INTERVAL 8 HOUR))',
    [usuario.id_usuario, token]
  );

  res.json({ token, usuario: { id_usuario: usuario.id_usuario, nombre: usuario.nombre, perfil: usuario.perfil } });
});

export default router;

import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

const JWT_SECRET = process.env.JWT_SECRET ?? 'biosello_secret';

// Requiere JWT válido
export const auth = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ error: 'Token requerido' });
  try {
    req.user = jwt.verify(token, JWT_SECRET);
    next();
  } catch {
    res.status(401).json({ error: 'Token inválido' });
  }
};

// Requiere rol específico
export const requireRole = (...roles[]) =>
  (req, res, next) => {
    const user = req.user;
    if (!roles.includes(user?.perfil))
      return res.status(403).json({ error: 'Sin permiso' });
    next();
  };

// Uso: router.post('/animales', auth, requireRole('admin','empleado'), crearAnimal);

import express from 'express';
import QRCode from 'qrcode';
import { query } from '../db';
import { auth } from '../middleware/auth.middleware';

const router = express.Router();

// Genera QR para un lote y lo guarda en BD
router.post('/generar/:id_lote', auth, async (req, res) => {
  const { id_lote } = req.params;
  const url = `https://biosello.app/scan/${id_lote}`;

  const qrBase64 = await QRCode.toDataURL(url, { errorCorrectionLevel: 'H', width: 400 });

  const user = req.user;
  const [result] = await query(
    'INSERT INTO codigo_qr (id_lote, url_destino, generado_por) VALUES (?,?,?)',
    [id_lote, url, user.id_usuario]
  );
  res.json({ id_qr: result.insertId, url, qrBase64 });
});

// Endpoint público para cuando alguien escanea el QR
router.get('/scan/:id_lote', async (req, res) => {
  const { id_lote } = req.params;

  // Registrar el escaneo
  const [qr] = await query('SELECT id_qr FROM codigo_qr WHERE id_lote=? ORDER BY fecha_generado DESC LIMIT 1',[id_lote]);
  if (qr) await query('INSERT INTO escaneo(id_qr,ip,dispositivo) VALUES(?,?,?)',[qr.id_qr, req.ip, req.headers['user-agent']]);

  const [lote] = await query(
    `SELECT l.*, a.num_arete, a.especie, a.clasificacion, p.nombre_propietario, r.nombre_rastro
       FROM lote l
  LEFT JOIN animal a ON a.id_animal = l.id_animal
  LEFT JOIN propietario p ON p.id_propietario = a.id_propietario
  LEFT JOIN guia_animal ga ON ga.id_animal = a.id_animal
  LEFT JOIN guia_transito gt ON gt.id_guia = ga.id_guia
  LEFT JOIN rastro r ON r.id_rastro = gt.id_rastro
      WHERE l.id_lote = ?`, [id_lote]
  );
  if (!lote) return res.status(404).json({ error: 'Lote no encontrado' });
  res.json(lote);
});

export default router;

// npm install react-native-vision-camera
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { Camera, useCameraDevices, useCodeScanner } from 'react-native-vision-camera';
import { useNavigation } from '@react-navigation/native';

export default function QRScannerScreen() {
  const devices = useCameraDevices();
  const device  = devices.back;
  const nav     = useNavigation();
  const [scanned, setScanned] = useState(false);

  const codeScanner = useCodeScanner({
    codeTypes: ['qr'],
    onCodeScanned: (codes) => {
      if (scanned || !codes[0]?.value) return;
      setScanned(true);
      const url = codes[0].value;
      const id_lote = url.split('/').pop();
      nav.navigate('QRResult', { codigo_lote: id_lote });
    },
  });

  if (!device) return <Text>Cargando cámara…</Text>;

  return (
    <View style={s.container}>
      <Camera style={StyleSheet.absoluteFill} device={device} isActive={!scanned} codeScanner={codeScanner} />
      <View style={s.overlay}>
        <View style={s.frame} />
        <Text style={s.hint}>Apunta al código QR del lote</Text>
        {scanned && <TouchableOpacity style={s.btn} onPress={() => setScanned(false)}><Text>Escanear otro</Text></TouchableOpacity>}
      </View>
    </View>
  );
}

const s = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000' },
  overlay:   { ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center' },
  frame:     { width: 240, height: 240, borderWidth: 2, borderColor: '#3fb950', borderRadius: 12 },
  hint:      { color: '#fff', marginTop: 20, fontSize: 14 },
  btn:       { marginTop: 20, padding: 12, backgroundColor: '#3fb950', borderRadius: 8 },
});

npm install react-native-vision-camera @shopify/react-native-skia
npm install vision-camera-code-scanner

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import { Canvas, RoundedRect, Text, Fill, useFont } from '@shopify/react-native-skia';
import { Lote } from '../constants/shapes';

export default function ARLoteScreen({ lote }) {
  const devices = useCameraDevices();
  const device  = devices.back;
  const font    = useFont(require('../assets/fonts/Inter-Bold.ttf'), 14);

  if (!device) return null;

  return (
    <View style={s.container}>
      <Camera style={StyleSheet.absoluteFill} device={device} isActive={true} />

      {lote && (
        <Canvas style={StyleSheet.absoluteFill}>
          <{/* Panel semi-transparente */}
          <RoundedRect x={20} y={100} width={300} height={160} r={12} color="rgba(13,17,23,0.85)" />

          <{/* Datos del lote sobre la cámara */}
          <Text x={36} y={130} text={`🏷 ${lote.codigo_lote}`} font={font} color="#3fb950" />
          <Text x={36} y={155} text={`Corte: ${lote.tipo_corte}`} font={font} color="#e6edf3" />
          <Text x={36} y={180} text={`Peso: ${lote.peso_kg} kg`} font={font} color="#e6edf3" />
          <Text x={36} y={205} text={`Vence: ${lote.fecha_vencimiento}`} font={font}
            color={lote.estado === 'caducado' ? '#f78166' : '#3fb950'} />
          <Text x={36} y={230} text={`Estado: ${lote.estado.toUpperCase()}`} font={font} color="#8b949e" />
        </Canvas>
      )}
    </View>
  );
}

const s = StyleSheet.create({ container: { flex: 1 } });

npm install @viro-community/react-viro

import { ViroARScene, ViroText, ViroNode, ViroARImageMarker, ViroARTrackingTargets } from '@viro-community/react-viro';

// Registrar la imagen del QR como marker
ViroARTrackingTargets.createTargets({
  bioselloQR: { source: require('../assets/qr_target.png'), orientation: 'Up', physicalWidth: 0.1 },
});

export function ARLoteScene({ lote }) {
  return (
    <ViroARScene>
      <ViroARImageMarker target="bioselloQR">
        <ViroNode position={[0, 0.1, 0]}>
          <ViroText text={`${lote.tipo_corte}\n${lote.peso_kg} kg\n${lote.estado}`}
            position={[0, 0, 0]} scale={[0.5, 0.5, 0.5]}
            style={{ fontFamily: 'Arial', fontSize: 20, color: '#3fb950' }} />
        </ViroNode>
      </ViroARImageMarker>
    </ViroARScene>
  );
}

keytool -genkeypair -v \
  -keystore android/app/biosello-release.keystore \
  -alias biosello \
  -keyalg RSA -keysize 2048 \
  -validity 10000

BIOSELLO_UPLOAD_STORE_FILE=biosello-release.keystore
BIOSELLO_UPLOAD_KEY_ALIAS=biosello
BIOSELLO_UPLOAD_STORE_PASSWORD=tu_password
BIOSELLO_UPLOAD_KEY_PASSWORD=tu_password

android {
  ...
  signingConfigs {
    release {
      storeFile     file(BIOSELLO_UPLOAD_STORE_FILE)
      storePassword BIOSELLO_UPLOAD_STORE_PASSWORD
      keyAlias      BIOSELLO_UPLOAD_KEY_ALIAS
      keyPassword   BIOSELLO_UPLOAD_KEY_PASSWORD
    }
  }
  buildTypes {
    release {
      signingConfig signingConfigs.release
      minifyEnabled enableProguardInReleaseBuilds
      shrinkResources enableProguardInReleaseBuilds
    }
  }
}

# APK para distribución directa
cd android && ./gradlew assembleRelease

# AAB para Google Play (recomendado)
cd android && ./gradlew bundleRelease

# El APK queda en:
# android/app/build/outputs/apk/release/app-release.apk