Changing onViewableItemsChanged on the fly is not supported

[zerocsss]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Changing onViewableItemsChanged on the fly is not supported

React Native version:

0.63.3

Snack, code example, screenshot, or link to a repository:

<FlatList
ref={FlatListRef}
data={data}
inverted={true}
contentContainerStyle={{
flexGrow: 1, justifyContent: 'flex-end',
}}
renderItem={renderItem}
keyExtractor={item => item.id}
viewabilityConfig={{waitForInteraction: true, viewAreaCoveragePercentThreshold: 95}}
onViewableItemsChanged={(info) => {
console.log(info)
}}
/>

[isnifer]

@zerocsss I recommend you to use this technique:
First of all change property to pass this callback

-onViewableItemsChanged={...}
+viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}

where viewabilityConfigCallbackPairs is:

const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }])

That's it.

[adblanc]

@zerocsss I recommend you to use this technique:
First of all change property to pass this callback

-onViewableItemsChanged={...}
+viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}

where viewabilityConfigCallbackPairs is:

const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }])

That's it.

Thanks it works like a charm

[arbaz-yousuf-jazsoft]

@zerocsss could you please explain it, It didn't work for me

[rajeshivn]

@zerocsss could you please explain it, It didn't work for me

same here not working

[Nikolay-Vovk-dataart]

you also could wrap it with useCallback if it hasn't any deps (useCallback(() => {...} , []))

[johnhaup]

@arbaz-yousuf-jazsoft @rajeshivn or anyone still trying to implement the solution above:

Add this to the top of your functional component:

const onViewableItemsChanged = ({
  viewableItems,
}) => {
  // Do stuff
};
const viewabilityConfigCallbackPairs = useRef([
  { onViewableItemsChanged },
]);

then render your Flatlist:

<FlatList
  style={styles.list}
  data={data}
  renderItem={renderItem}
  keyExtractor={(_, index) => `list_item${index}`}
  viewabilityConfigCallbackPairs={
    viewabilityConfigCallbackPairs.current
  }
/>

Thanks @isnifer this worked great!

[omitchen]

  viewabilityConfigCallbackPairs={
    viewabilityConfigCallbackPairs.current
  }

This method still has no response in my project. Although no error is reported, onViewableItemsChanged will not be executed.

[julienripet]

  viewabilityConfigCallbackPairs={
    viewabilityConfigCallbackPairs.current
  }

This method still has no response in my project. Although no error is reported, onViewableItemsChanged will not be executed.

@omitchen I had the same problem, my issue was that I had changed the name of the function onViewableItemsChanged in

const viewabilityConfigCallbackPairs = useRef([
{ onViewableItemsChanged },
]);

If you want to use a function with a different name, make sure to set it as the onViewableItemsChanged property in the useRef, as follows

const viewabilityConfigCallbackPairs = useRef([
  { onViewableItemsChanged: MyGreatFunction },
]);

[sobhanbera]

@zerocsss I recommend you to use this technique:
First of all change property to pass this callback

-onViewableItemsChanged={...}
+viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}

where viewabilityConfigCallbackPairs is:

const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }])

That's it.

This worked for me. Thanks!!

[sallarahmed]

Convert component from functional to class and call these methods, this will work like a charm

[Qazafi-Dev]

@johnhaup i doing same thing in class component but it giving me error can't find variable onviewablechangeitem but i defined it

[Qazafi-Dev]

@sallarahmed can u share class component code? i need it

[prasanthvenkatachalam]

tried viewabilityConfigCallbackPairs in the function component, But getting Changing onViewableItemsChanged on the fly is not supported Error and Invariant Violation: Changing onViewableItemsChanged on the fly is not supported. Below is my code

<FlatList
ref={homeFeedRef}
showsVerticalScrollIndicator={false}
ItemSeparatorComponent={FlatListItemSeparator}
data={
home.nuggets
}
style={{ flex: 1 }}

viewabilityConfigCallbackPairs={[
{
viewabilityConfig: {
itemVisiblePercentThreshold: 100,
},
onViewableItemsChanged: handleChangeVIew,
},
{
viewabilityConfig: {
itemVisiblePercentThreshold: 200,
},
onViewableItemsChanged: handleChangeVIew2,
},
]}
ListHeaderComponent={topSection}
renderItem={renderItem} />

Also tried the below code, this does not throw any error but function call is not happening. Help needed

const viewabilityConfigCallbackPairs = useRef([
{ viewabilityConfig, onViewableItemsChanged: handleChangeVIew },
]);

[abhilakshyadobhal]

@isnifer tried viewabilityConfigCallbackPairs in the function component, that error got resolved but in the onViewableItemsChanged function I'm using a prop whose value is getting changed but inside the function, I'm not getting that prop new value, it's always giving me the same value which is coming for it the first time

        const indexOfHighlightedProduct = viewableItems.findIndex(({ item }) => item?.styleId === inFocusProduct)
        console.log('inFocusProduct', inFocusProduct)

        // if it is currently visible don't animate else animate
        if (indexOfHighlightedProduct > -1) {
            console.log('don"t do something')
        } else {
            console.log('do something')
        }
    }

Here inFocusProduct is the prop whose value is getting but it's not showing the changed value