Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FastImage images in a Flashlist make scroll laggy #171

Open
rklf opened this issue Jan 7, 2025 · 3 comments
Open

FastImage images in a Flashlist make scroll laggy #171

rklf opened this issue Jan 7, 2025 · 3 comments
Assignees

Comments

@rklf
Copy link

rklf commented Jan 7, 2025

Describe the bug
Scrolling in a Flashlist using FastImage images make scroll laggy.

To Reproduce
Steps to reproduce the behavior if possible, or a link to a reproduction repo:

  1. Get code below
  2. Test it and assign data variable
  3. Scroll down and up
  4. It'll be laggy which doesn't happen using React Native Image

Expected behavior
Should scroll smoothly

Screenshots
N/A

Dependency versions
"react": "18.2.0",
"react-native": "0.74.2",
"@shopify/flash-list": "^1.7.2",
"@d11/react-native-fast-image": "^8.9.0",

Code:

import FastImage from '@d11/react-native-fast-image';
import { FlashList, ListRenderItem } from '@shopify/flash-list';
import { View } from 'react-native';

const Home = ({ navigation }: any) => {
  const data = /* https://picsum.photos/v2/list?limit=400 <= Go to URL and paste content here */
  const NUM_COLUMNS = 3;
  const _renderItem: ListRenderItem<any> = ({ item, index }) => {
    return (
      <View style={{ flex: 1, padding: 8 }}>
        <FastImage
          style={{ width: '100%', aspectRatio: 1 }}
          defaultSource={require('@/assets/images/default-avatar.png')}
          source={{
            uri: item.download_url,
          }}
        />
      </View>
    );
  };
  
  return (
    <View style={{ flex: 1 }}>
      <FlashList
        data={data}
        keyExtractor={item => item.id}
        renderItem={_renderItem}
        estimatedItemSize={30}
        contentContainerStyle={{ padding: 8 }}
        numColumns={NUM_COLUMNS}
        ItemSeparatorComponent={() => <View style={{ height: 20 }} />}
      />
    </View>
  );
};

export default Home;
Copy link

github-actions bot commented Jan 7, 2025

👋 Welcome to the community!
Thank you for opening your first issue. We appreciate your contribution and will review it as soon as possible.
Feel free to ask questions, share ideas, or provide any additional details! We're here to help. 😄

@mensonones
Copy link

bug not reproduced

WhatsApp.Video.2025-01-07.at.12.25.46.mp4

"react-native": "0.76.5",
"@d11/react-native-fast-image": "^8.9.0",
"@shopify/flash-list": "^1.7.2",

Device: Samsung Galaxy S23 FE

@rklf
Copy link
Author

rklf commented Jan 7, 2025

Please try on iOS.

@princektripathi princektripathi self-assigned this Jan 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants