React Native Flatlist element onPress not fired until List rendering is complete

Question

I have a FlatList that receives (immutable) data of max. 50 elements and it renders in each list item Svg using react-native-svg.

Parts of the graphics are wrapped with a Pressable component for selecting the element.

Now the problem is, that I can't select any of the elements, until the FlatList went through all 50 items.

What I don't get is, that the offscreen items aren't even rendered, it's just the containers. Once it's all rendered, I can click the elements, the ripple effect shows and the event is fired.

Specs:

Expo @ 46.0.0
React Native @ 0.69.6
React @ 18.0.0
Running with android via expo start --no-dev --minify then open in Expo Go

Reproduction:

import React, { useEffect, useState } from 'react'
import { FlatList } from 'react-native'
import { Foo } from '/path/to/Foo'
import { Bar } from '/path/to/Bar'

export const Overview = props => {
  const [data, setData] = useState(null)
  
  // 1. fetching data

  useEffect(() => {
    // load data from api
    const loaded = [{ id: 0, type: 'foo' }, { id: 1, type: 'bar' }] // make a list of ~50 here
    setData(loaded)
  }, [])

  if (!data?.length) {
    return null
  }

  // 2. render list item
  const onPressed = () => console.debug('pressed')

  const renderListItem = ({ index, item }) => {
    if (item.type === 'foo') {
      return ()
    } 


    if (item.type === 'bar') {
      return ()
    }
  
    return null
  }

  // at this point data exists but will not be changed anymore
  // so theoretically there should be no re-render
  return (
    
    )
  }
}


// optimized functions
const flatListKeyExtractor = (item) => item.id
const flatListGetItemLayout = (data, index) => {
  const entry = data[index]
  const length = entry && ['foo', 'bar'].includes(entry.type)
    ? 110
    : 59
  return { length, offset: length * index, index }
}

Svg component, only Foo is shown, since Bar is structurally similar and the issue affects both:

import React from 'react'
import Svg, { G, Circle } from 'react-native-svg'

const radius = 25
const size = radius * 2

// this is a very simplified example, 
// rendering a pressable circle
const FooSvg = props => {
  return (
    
      
    
  )
}

const rippleConfig = {
  radius: 50,
  borderless: true,
  color: '#00ff00'
}

// pure component
export const Foo = React.memo(FooSvg)

The rendering performance itself is quite good, however I can't understand, why I need to wait up to two seconds, until I can press the circles, allthough they have already been rendered.

Any help is greatly appreciated.

Edit

When scrolling the list very fast, I get:

 VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 4740, "dt": 4156, "prevDt": 5142}

However, the Components are already memoized (PureComponent) and not very complex. There must be another issue.

Hardware

I cross tested with an iPad and there is none if the issues described. It seems to only occur on Android.

React Native Flatlist element onPress not fired until List rendering is complete

Edit

Hardware

Answers (1)

Related Questions