Crear una aplicación móvil sencilla que permita:

• Registrar productos (nombre y precio).

• Almacenarlos en una base de datos local.

• Listarlos en pantalla.

• Tener instalado Node.js

• Tener instalado el entorno de React Native:

  npx react-native init GestorProductos
  

• Instalar el emulador de Android Studio o conectar un dispositivo real.

• Entrar al proyecto:

  cd GestorProductos
  

npm install react-native-sqlite-storage 

npx pod-install  # (solo en iOS)

Estructura del proyecto:

/GestorProductos
  ├── App.js
  ├── db.js
  ├── productoDao.js

// db.js
import SQLite from 'react-native-sqlite-storage';

SQLite.enablePromise(true);

const db = SQLite.openDatabase(
  {
    name: 'miapp.db',
    location: 'default',
  },
  () => console.log('Base de datos abierta'),
  error => console.log('Error: ', error)
);

export default db;

// productoDao.js
import db from './db';

export const crearTablaProducto = () => {
  db.transaction(tx => {
    tx.executeSql(
      `CREATE TABLE IF NOT EXISTS productos (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        nombre TEXT,
        precio REAL
      );`
    );
  });
};

export const insertarProducto = (nombre, precio, callback) => {
  db.transaction(tx => {
    tx.executeSql(
      'INSERT INTO productos (nombre, precio) VALUES (?, ?);',
      [nombre, precio],
      (_, resultado) => callback(true, resultado),
      (_, error) => {
        callback(false, error);
        return false;
      }
    );
  });
};

export const obtenerProductos = callback => {
  db.transaction(tx => {
    tx.executeSql(
      'SELECT * FROM productos;',
      [],
      (_, { rows }) => callback(rows._array),
      (_, error) => {
        console.log(error);
        return false;
      }
    );
  });
};

import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import {
  crearTablaProducto,
  insertarProducto,
  obtenerProductos,
} from './productoDao';

export default function App() {
  const [nombre, setNombre] = useState('');
  const [precio, setPrecio] = useState('');
  const [productos, setProductos] = useState([]);

  useEffect(() => {
    crearTablaProducto();
    cargarProductos();
  }, []);

  const cargarProductos = () => {
    obtenerProductos(data => setProductos(data));
  };

  const guardar = () => {
    if (!nombre || !precio) return;
    insertarProducto(nombre, parseFloat(precio), (ok) => {
      if (ok) {
        setNombre('');
        setPrecio('');
        cargarProductos();
      }
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Gestor de Productos</Text>
      <TextInput placeholder="Nombre" value={nombre} onChangeText={setNombre} style={styles.input} />
      <TextInput placeholder="Precio" value={precio} onChangeText={setPrecio} style={styles.input} keyboardType="decimal-pad" />
      <Button title="Guardar" onPress={guardar} />
      <Text style={styles.subtitle}>Listado:</Text>
      <FlatList
        data={productos}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text>{item.nombre} - ${item.precio.toFixed(2)}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, marginTop: 50 },
  title: { fontSize: 20, marginBottom: 10 },
  subtitle: { marginTop: 20, fontWeight: 'bold' },
  input: { borderWidth: 1, marginBottom: 10, padding: 8 },
});

En Android:

npx react-native run-android

En iOS:

npx react-native run-ios

Más información en:

https://www.frexus.dev/post/modelado-de-datos-locales/

Crear una aplicación móvil sencilla que permita:

• Registrar productos (nombre y precio).

• Almacenarlos en una base de datos local.

• Listarlos en pantalla.

• Tener instalado Node.js

• Tener instalado el entorno de React Native:

  npx react-native init GestorProductos
  

• Instalar el emulador de Android Studio o conectar un dispositivo real.

• Entrar al proyecto:

  cd GestorProductos
  

npm install react-native-sqlite-storage 

npx pod-install  # (solo en iOS)

Estructura del proyecto:

/GestorProductos
  ├── App.js
  ├── db.js
  ├── productoDao.js

// db.js
import SQLite from 'react-native-sqlite-storage';

SQLite.enablePromise(true);

const db = SQLite.openDatabase(
  {
    name: 'miapp.db',
    location: 'default',
  },
  () => console.log('Base de datos abierta'),
  error => console.log('Error: ', error)
);

export default db;

// productoDao.js
import db from './db';

export const crearTablaProducto = () => {
  db.transaction(tx => {
    tx.executeSql(
      `CREATE TABLE IF NOT EXISTS productos (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        nombre TEXT,
        precio REAL
      );`
    );
  });
};

export const insertarProducto = (nombre, precio, callback) => {
  db.transaction(tx => {
    tx.executeSql(
      'INSERT INTO productos (nombre, precio) VALUES (?, ?);',
      [nombre, precio],
      (_, resultado) => callback(true, resultado),
      (_, error) => {
        callback(false, error);
        return false;
      }
    );
  });
};

export const obtenerProductos = callback => {
  db.transaction(tx => {
    tx.executeSql(
      'SELECT * FROM productos;',
      [],
      (_, { rows }) => callback(rows._array),
      (_, error) => {
        console.log(error);
        return false;
      }
    );
  });
};

import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import {
  crearTablaProducto,
  insertarProducto,
  obtenerProductos,
} from './productoDao';

export default function App() {
  const [nombre, setNombre] = useState('');
  const [precio, setPrecio] = useState('');
  const [productos, setProductos] = useState([]);

  useEffect(() => {
    crearTablaProducto();
    cargarProductos();
  }, []);

  const cargarProductos = () => {
    obtenerProductos(data => setProductos(data));
  };

  const guardar = () => {
    if (!nombre || !precio) return;
    insertarProducto(nombre, parseFloat(precio), (ok) => {
      if (ok) {
        setNombre('');
        setPrecio('');
        cargarProductos();
      }
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Gestor de Productos</Text>
      <TextInput placeholder="Nombre" value={nombre} onChangeText={setNombre} style={styles.input} />
      <TextInput placeholder="Precio" value={precio} onChangeText={setPrecio} style={styles.input} keyboardType="decimal-pad" />
      <Button title="Guardar" onPress={guardar} />
      <Text style={styles.subtitle}>Listado:</Text>
      <FlatList
        data={productos}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text>{item.nombre} - ${item.precio.toFixed(2)}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, marginTop: 50 },
  title: { fontSize: 20, marginBottom: 10 },
  subtitle: { marginTop: 20, fontWeight: 'bold' },
  input: { borderWidth: 1, marginBottom: 10, padding: 8 },
});

En Android:

npx react-native run-android

En iOS:

npx react-native run-ios

Más información en:

https://www.frexus.dev/post/modelado-de-datos-locales/