I’m building a data recollection application using React Native, in which said data is exported to an Excel file.
I’m running into an issue which is that whenever I attempt to export the data, the export process never starts processing the data and it just gets stuck.
Where the export is being called:
const sampleData = {
Datos: [
{ 'Nombre': 'Alice', 'Apellido': 'Smith', 'Correo Electrónico': '[email protected]' },
{ 'Nombre': 'Bob', 'Apellido': 'Johnson', 'Correo Electrónico': '[email protected]' },
{ 'Nombre': 'Charlie', 'Apellido': 'Brown', 'Correo Electrónico': '[email protected]' },
],
Superficies: [
['Room', 'Size (m2)'],
['Living Room', 20],
['Bedroom', 15],
['Kitchen', 10],
],
Huecos: [
{ 'Vivienda': 'Apt 101', 'Planta': '1', 'Iluminación': 'SI', 'Ventilación': 'NO' },
{ 'Vivienda': 'Apt 102', 'Planta': '1', 'Iluminación': 'NO', 'Ventilación': 'SI' },
{ 'Vivienda': 'Apt 103', 'Planta': '2', 'Iluminación': 'SI', 'Ventilación': 'SI' },
]
};
const handleExport = () => {
setLoading(true); // Start loading
console.log('Export started');
setTimeout(async () => {
try {
console.log('Processing data...');
// Use sampleData directly for export
const allData = sampleData;
console.log('Data processed. Starting export...');
const filePath = await exportToExcel(allData);
console.log('Export completed');
if (filePath) {
console.log('File exported successfully:', filePath);
Alert.alert('Success', 'File exported successfully', [
{ text: 'Open', onPress: () => openFile(filePath) },
{ text: 'OK', style: 'cancel' },
]);
} else {
console.log('Export failed: File path is null');
Alert.alert('Error', 'Failed to export file');
}
} catch (error) {
console.log('Export failed with error:', error);
Alert.alert('Error', `An error occurred: ${error.message}`);
} finally {
setLoading(false); // Stop loading
console.log('Loading stopped');
}
}, 0); // Delay to allow UI update
};
How the export is being handled:
import ExcelJS from 'exceljs';
import * as RNFS from 'react-native-fs';
import { Alert } from 'react-native';
import { openFile } from './openFile'; // Assuming openFile is implemented to open the file
export const exportToExcel = async (data) => {
// Create a new workbook
const workbook = new ExcelJS.Workbook();
// Add Datos sheet
const wsDatos = workbook.addWorksheet('Datos');
wsDatos.columns = [
{ header: 'Nombre', key: 'Nombre', width: 20 },
{ header: 'Apellido', key: 'Apellido', width: 20 },
{ header: 'Correo Electrónico', key: 'Correo Electrónico', width: 30 },
];
data.Datos.forEach(item => {
wsDatos.addRow(item);
});
// Add Superficies sheet
const wsSuperficies = workbook.addWorksheet('Superficies');
wsSuperficies.addRows(data.Superficies);
// Add Huecos sheet
const wsHuecos = workbook.addWorksheet('Huecos');
wsHuecos.columns = [
{ header: 'Vivienda', key: 'Vivienda', width: 20 },
{ header: 'Planta', key: 'Planta', width: 10 },
{ header: 'Iluminación', key: 'Iluminación', width: 15 },
{ header: 'Ventilación', key: 'Ventilación', width: 15 },
];
data.Huecos.forEach(item => {
wsHuecos.addRow(item);
});
// Save workbook to file
const filePath = `${RNFS.DocumentDirectoryPath}/TestData.xlsx`;
try {
const buffer = await workbook.xlsx.writeBuffer();
await RNFS.writeFile(filePath, buffer.toString('base64'), 'base64');
console.log('File saved successfully at:', filePath);
return filePath;
} catch (error) {
console.error('Error saving file', error);
return null;
}
};
I’ve tried a plethora of things, but none have worked so far. I don’t know if it’s a problem with my project or with how I’m handling the data, since it doesn’t even work with the sample data. The console never logs that it is processing the data, only that the export has started.
Alex Tiribeja is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.