I have the following folder structure
my-app/
├─ node_modules/
├─ src/
│ ├─ RepositoryItem.jsx
│ ├─ RepositoryList.jsx
│ ├─ Main.jsx
├─ package.json
├─ README.md
├─ App.js
RepositoryList and RepositoryItem are imported into Main.jsx. Main.jsx imported into App.js
If I modify the code in App.js or Main.js, and save it. The Expo GO app immediately shows the changes.
If I modify RepositoryList.jsx or RepositoryItem.jsx components and save, fast refresh happens, but the changes are not shown. Only if i manually reload the app.
If I modify RepositoryList.jsx component AND Main.jsx. The changes in Main.jsx are shown immediately, bit the changes in RepositoryList.jsx only after a manual reload.
Also if I change RepositoryItem or RepositoryList... "Refreshing... Using Fast Refresh shows" but the changes are not reflected in the app
I tried it with a phone and a tablet, problem is present on both devices.
Is there a way to fix this?
You are using JSX files (RepositoryItem.jsx; RepositoryList.jsx; Main.jsx). Have you tried changing the extension just to JS? (Javascript) I.e: RepositoryItem.js
Fast Refresh works in files that are nested in subfolders like RepositoryList.js and RepositoryItem.js.
Why it didn't refresh for me is because in RepositoryList I return a FlatList component, and inside of that the renderItem is the RepositoryItem. Like so:
return (
<View>
<FlatList
data={repositories}
ItemSeparatorComponent={ItemSeparator}
renderItem={RepositoryItem}
/>
</View>
);
Now the question is: Why does Fast Refresh not work if I change RepositoryItem, which is the renderItem attribute of FlatList?