Photoshop Question posted in
The official user guide can be found here.

ReactNative – Android extremely slow within may image views – Photoshop

I’m implementing a Home screen that have lots of image views. The concept is like Photoshop layers. Each layer is an image view (PNG). The screen contains 20-30 images. The assets are stored locally.

The app runs smoothly on iOS but it is extremely slow in Android.
My first solution is reducing the file sizes but it doesn’t help much.

Thank you for any help you can offer!

react-native versions is 0.59.10.

Tags:

2

Answers


  1. 0

    There are a few things can do to improve your application performance.

    1. Reduce image size

    Use smaller sized images like a thumbnail.
    Use PNG as opposed to JPG.
    Convert your images to WebP format.

    2. Cache the images locally

    Since you are loading images from locally you don’t need to focus on this.

    3. Avoiding Unnecessary Renders Using PureComponent

    If you are using FlatList to render images,

    4. Add initialNumToRender prop on your FlatList

    This defines how many items will be rendered for the first time.

    5. Define the key(keyExtractor) prop on your Item Component

    This will avoid re-render dynamically added or removed items.

    6. Use getItemLayout to skip measurement of dynamic content.

    Also, there is some prop called maxToRenderPerBatch, windowSize that you can use to increase the performance of the application.

    Check React Native Flatlist & Performance official docmentations for more informations.

    Also, check this article to improve the performance of FlatList.

    Login or Signup to reply.
  2. 0

    use react-native-fast-image

    https://github.com/DylanVann/react-native-fast-image

    use webp format instead of png

    put your images at android or ios app package

    android/app/src/main/res/drawable
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search