With react native, I have a FlatList that is used to render user information. A user's profile picture may not be immediately loaded, so they can be asynchronously loaded in the background.
Example psudocode:
interface LocalUser { id: string; name: string; profilePicture?: string;}interface User { id: string; name: string;}interface UserItem { user: User; profilePicture?: string;}function MyList(props: { users: User[]; localUsers: LocalUser[]; dispatch: Dispatch; // Redux style dispatch}) { const items: UserItem[] = props.users.map(user => ({ user, profilePicture: props.localUsers.filter(lu => lu.id === user.id)[0]?.profilePicture }) useEffect(() => { // Some effect to dispatch the loading of missing localUsers }); return (<FlatList data={items} keyExtractor={u => u.id} renderItem={/* some renderer */} /> )}
Everything works as intended, but whenever a load completes the list jumps back to the top. This can be quite frustrating, especially when a lot of loads occur. Is there anyway to prevent this? I've heard of the "hidden" maintainVisibleContentPosition
prop, however that doesn't appear to work, at least not on Android. Any advice?