Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to prevent FlatList from scrolling to top on content updates

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>