Guías Técnicas

Consumir Datos desde un Archivo .json en React Native

  ¿Cómo consumir un archivo .json en React Native?

En React Native, podemos consumir datos desde un archivo .json de forma sencilla, ya sea con require o import. Estos archivos pueden estar dentro del proyecto, lo que permite utilizar datos locales sin necesidad de hacer peticiones a una API.

Estructura básica para consumir datos JSON

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

// Cargar archivo JSON de forma local con require
const data = require('./data/usuarios.json'); // Ruta al archivo JSON

const App = () => {
return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item.nombre}</Text>
            <Text>{item.email}</Text>
          </View>
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  item: {
    padding: 15,
    marginBottom: 10,
    backgroundColor: '#eaeaea',
    borderRadius: 5,
  },
  });

export default App;

¿Cómo funciona el consumo de datos JSON?

  • require(): Permite importar archivos JSON locales directamente como objetos JavaScript. Es ideal para datos estáticos incluidos en el proyecto.
  • import: También puedes usar import, aunque necesitarás asegurarte de que tu configuración de bundler (como Metro) lo permita para archivos .json.

📝 Ejemplo completo de consumir JSON

Supón que tenemos un archivo usuarios.json con el siguiente contenido:

js 
[
  { "id": 1, "nombre": "Urian Viera", "email": "urian@example.com" },
  { "id": 2, "nombre": "Brenda Catalella", "email": "brenda@example.com" },
  { "id": 3, "nombre": "Urian Viera", "email": "uriany@example.com" },
  { "id": 4, "nombre": "Abelardo Pérez", "email": "abelardo@example.com" },
  { "id": 5, "nombre": "Luis Fernández", "email": "luis@example.com" },
  { "id": 6, "nombre": "María López", "email": "maria@example.com" },
  { "id": 7, "nombre": "Any Somosa", "email": "any@example.com" }
]