ViewableItems not working with FlashList

[brunolcarlos]

With FlatList and react-native-big-list the ViewableItems works fine but with FlashList does't works

When the items change the FlashList it's not passing the new state to Component inside of the renderItem

How can I fix It ?

This is a Android APP expo 46 and Expo GO

const onViewRef = React.useRef(({ viewableItems, changed }) => {
    if (viewableItems && viewableItems.length > 0) {
      setItemState(viewableItems[0]);
    }
  });

  const viewConfigRef = React.useRef({
    viewAreaCoveragePercentThreshold: 50,
  });

 const keyExtractor = useCallback(
    (item, index) => `${item.hash}${index}${item.post_id}`,
    []
  );

  const renderItemFinal = ({ item, index }) => {
    if (item?.post_type == "video") {
      return (
        <Video
          patrocinado={item?.patrocinado}
          index={index * page}
          userStorage={userStorage}
          postUnlike={postUnlike}
          postLike={postLike}
          onViewRef={
            itemState?.item?.post_id == item?.post_id && itemState?.isViewable
              ? true
              : false
          }
          item={item}
        />
      );
    }
  };

 const itemRender= useMemo(() => renderItemFinal, [itemState]);


 <FlashList
    refreshControl={refreshingjsx}
    data={videos}
    onEndReachedThreshold={0.2}
    onEndReached={reachedJsx}
    renderItem={itemRender}
    onViewableItemsChanged={onViewRef.current}
    viewabilityConfig={viewConfigRef.current}
    keyExtractor={keyExtractor}
    snapToAlignment={"start"}
    decelerationRate={"fast"}
    snapToInterval={win.height}
    itemHeight={win.height}
    estimatedItemSize={100}
/>

[fortmarek]

Hey @brunolcarlos 👋

Could you create a reproducible sample (either on GitHub or on expo's snack) and add steps how to reproduce the issue, detailing the exact specifics of what you are seeing? The code snippet you posted does not include the complete code.

[brunolcarlos]

Hey @brunolcarlos 👋

Could you create a reproducible sample (either on GitHub or on expo's snack) and add steps how to reproduce the issue, detailing the exact specifics of what you are seeing? The code snippet you posted does not include the complete code.

HI formarek, it's not a message error ou compiling error exactly.
This is a state error, when I use the original FlatList I change the state (play) and pass to my child to play or stop the videos, with the FlashList the state inside of my child does't change, if I use with images will works very well but videos I need to play and stop.
If I put the FlatList everything works but with FlashList the videos dont receive the new state passed on props.

[naqvitalha]

@brunolcarlos the incomplete code is making debugging this harder but if I have to guess, it's probably because FlashList doesn't update all the items unless your data or extraData change.
If there's additional prop rendering depends on, pass it as extraData.

[brunolcarlos]

@brunolcarlos the incomplete code is making debugging this harder but if I have to guess, it's probably because FlashList doesn't update all the items unless your data or extraData change.
If there's additional prop rendering depends on, pass it as extraData.

Hi, I don't need to update the array list, I only update the child when is on viewport and pass a prop to child with true or false.
This app is like the Instagram reels, when the video is on viewport I play the video and stop when is not on viewport.

The Component Video doesn't receive this new information with the flashlist but receive with FlatList.

[naqvitalha]

@brunolcarlos I got that. Did you try updating extraData when you want the list to render?
You can also set it to extraData={{}} for checking quickly. Updating on every render, unless necessary, can cause perf problems. But you can quickly try this way.

[brunolcarlos]

Hi @naqvitalha , I'm not sure if you understood whats is happening.
I dont need change the array list, I need to play and stop videos while they move on my feed.

Using viewableItems I can get them

const onViewRef = React.useRef(({ viewableItems, changed }) => {
    if (viewableItems && viewableItems.length > 0) {
      setItemState(viewableItems[0]);
    }
  });

  const viewConfigRef = React.useRef({
    viewAreaCoveragePercentThreshold: 50,
  });

AND here I pass the information to my Video Component

const renderItemFinal = ({ item, index }) => {
    if (item?.post_type == "video") {
      return (
        <Video
          patrocinado={item?.patrocinado}
          index={index * page}
          userStorage={userStorage}
          postUnlike={postUnlike}
          postLike={postLike}

         /*###############################################*/

          onViewRef={
            itemState?.item?.post_id == item?.post_id && itemState?.isViewable 
              ? true
              : false
          }

        /*###############################################t*/


          item={item}
        />
      );
    }
  };

ON this line

onViewRef={
        itemState?.item?.post_id == item?.post_id && itemState?.isViewable
          ? true
          : false
 }

With FlashList its not working but with FlatList works how I expected

With FlashList the rendered components do not receive from props the new state

[fortmarek]

The issue with your solution is that the item does not re-render when renderItem memoized value changes. That's why @naqvitalha recommended using extraData when your itemState changes as your list needs to re-render (and that's not happening as of now).

[chrisedington]

I had a similar issue and tried this out by using extraData. but when it comes to updating any state I get an infinite rerender. Any suggestions on how I can perhaps overcome that?

@brunolcarlos did you manage to find a solution?

[brunolcarlos]

I had a similar issue and tried this out by using extraData. but when it comes to updating any state I get an infinite rerender. Any suggestions on how I can perhaps overcome that?

@brunolcarlos did you manage to find a solution?

Nope, I moved back to FlatList.

[fortmarek]

I had a similar issue and tried this out by using extraData. but when it comes to updating any state I get an infinite rerender. Any suggestions on how I can perhaps overcome that?

@chrisedington happy to help if you provide a sample

[hirbod]

I can tell you that Viewability works absolutely fine with FlashList. I am using it in production apps on huge lists. The issues I've came across have been the use of state inside my children and the way I've kept track of my refs. You need to make sure to react to changes within useEffect when using state in your items or use a smarter way, like context to react to visibility inside your items (starting/stopping videos is exactly what I am doing)

I'd recommend you this Gist by @intergalacticspacehighway
https://gist.github.com/intergalacticspacehighway/02a36b05b2236bc750a065833b71c94a

I've ported his approach to FlashList within 5 minutes and its actually the most performant way to react to visibility changes.

[brunolcarlos]

With FlatList works, with FlashList not.

[hirbod]

As said, it does. You're doing something wrong and not sharing enough to really help

[brunolcarlos]

No, It's not working. I'm doing everything right, I have this feature on my app about 3 years and wirh flashlist it's not working. Only with FlatList. Em dom., 11 de set. de 2022 11:03 AM, Hirbod ***@***.***> escreveu:

…

As said, it does. You're doing something wrong — Reply to this email directly, view it on GitHub <#566 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADAWQWG6DFPD7URSGAQSVHTV5XRCBANCNFSM56WS4FGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>