I have an app that read data from the csv. I use the File System and Expo Asset to access my file. During the development, I'm using Project IDX by Google to code this app and debugging using web version of this app. Also, during the development, there is no error, all csv file can be read while doing expo start. But, when I tried to build the app using eas, the csv file is kinda not found, because it is always show the "loading...". My csv file is located in assets folder of expo (assets/jadwal_sholat.csv) and index.tsx is in app folder. I already doing USB debugging and there is no error in log.txt. Any solution? I put my code below
interface ParsedSholatTimes {
Tanggal: string;
Subuh: string;
Dzuhur: string;
Ashar: string;
Maghrib: string;
Isya: string;
}
useEffect(() => {
const fetchCsvData = async () => {
try {
const asset: Asset = Asset.fromModule(require('../assets/jadwal_sholat.csv'));
await asset.downloadAsync();
const csvFile: string = await FileSystem.readAsStringAsync(asset.localUri || '');
Papa.parse<ParsedSholatTimes>(csvFile, {
header: true,
complete: (results: ParseResult<ParsedSholatTimes>) => {
const now = new Date();
const formattedToday = `${now.getDate()}/${now.getMonth() + 1}/${now.getFullYear()}`;
const todayTimes = results.data.find((row: ParsedSholatTimes) => {
const [day, month, year] = row.Tanggal.split('/').map(Number);
const csvDate = new Date(year, month - 1, day);
return (
csvDate.getDate() === now.getDate() &&
csvDate.getMonth() === now.getMonth() &&
csvDate.getFullYear() === now.getFullYear()
);
});
if (todayTimes) {
setSholatTimes(todayTimes);
} else {
console.log('No times found for today');
}
},
});
} catch (error) {
console.error('Error fetching or parsing CSV:', error);
}
};
{prayerTimes.map((prayer: PrayerTime, index: number) => {
const borderColor = tw`border-${prayer.color}`;
const bgColor = tw`bg-${prayer.color}`;
return (
<View key={prayer.name} style={[tw`w-full bg-neutral-100 p-3 rounded-xl mb-3`, borderColor]}>
<View style={tw`flex-row items-center justify-between`}>
<View style={tw`flex-row items-center`}>
<View style={[tw`rounded-full px-5 py-3 mr-2 w-44 `, bgColor]}>
<Text style={tw`text-3xl font-bold text-white text-center`}>{prayer.name}</Text>
</View>
</View>
<Text style={tw`text-4xl font-bold`}>{prayer.time || 'Loading...'}</Text>
</View>
</View>
);
})}
I already try to use direct path using require()
, but it is not working too.I already doing USB debugging and there is no error in log.txt.
I fixed the issue by the solution suggested in this answer of Junek : enter link description here the tip is to add csv to supported file types for expo assets: edit metro.config.js and add csv type as follow
const { getDefaultConfig } = require('expo/metro-config');
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('csv');
module.exports = config;