I'm creating a custom image/video picker component, like instagram does for the stories. I've decided to use expo-media-library to retrieve all assets from user camera roll. Now the problem occurs where this assets need to be displayed, because the FlatList, as you can imagine, lag too much while rendering all the photos. I've tried to wrap cells inside .memo but nothing change, so I think the images need to be cached, but packages like FastImage doesn't work with asset-library.
How can I cache images from user camera roll?
Here's what I've tried, I'm not showing all stuffs related to onEndReach in scrollview that loads more photos, but it exists.
export default function App() {
const [assets, setAssets] = useState([]);
useEffect(() => {
MediaLibrary.getAssetsAsync({ first: 50 }).then((data) => {
setAssets(data.assets);
});
}, []);
return (
<View style={styles.container}>
<FlatList
renderItem={({ item, index }) => (
<Asset asset={item} navigation={navigation} />
)}
data={assets}
/>
</View>
);
}
const Asset = memo(({ asset, navigation }) => {
return (<View></View>), (prev, next) => prev.asset.uri == next.asset.uri;
});