zhbhun / react-native-intersection-observer Goto Github PK

Hey there @zhbhun I am having an issue where the children wrapped in the InView for Android arent rendering though it is working as expected for iOS. I am on "react-native": "0.66.4". I'm happy to provide any other information you may think is relevant. I appreciate your help. Here is what the code snippet looks like:

<IOScrollView style={styles.container}>
      <View style={styles.contentContainer}>
        {notificationCards.length ? (
          notificationCards?.map((item: ExtendedContentCard) => {
            return (
              <InView
                key={item.id}
                onChange={(inView: boolean) => {
                  if (inView && !beenViewed.includes(item.id)) {
                    setBeenViewed((current) => [...current, item.id]);
                    Braze.logContentCardImpression(item.id);
                  }
                }}>
                <NotificationCard
                  onPress={getCards}
                  key={item.id}
                  id={item.id}
                  title={item.title}
                  description={item.cardDescription}
                  image={item.image}
                  clicked={item.clicked}
                  ctaTitle={item.domain}
                  url={item.url}
                />
              </InView>
            );
          })
        ) : (
          <View style={styles.emptyState}>
            <Svg.EmptyNotificationState />
            <BodyRegular style={styles.emptyDesc}>
              {translate('notificationsPage.emptyState')}
            </BodyRegular>
          </View>
        )}
      </View>
    </IOScrollView>
  );
}

Your package is causing error on reactnative "excessive number of pending callbacks" when it's loaded on +600 components list.

Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"269138":{"module":"NativeAnimatedModule","method":"startAnimatingNode"},"269196":{},"269197":{},"269198":{},"269199":{},"269200":{},"269201":{},"269202":{},"269203":{},"269204":{},"269205":{},"269206":{},"269207":{},"269208":{},"269209":{},"269210":{},"269211":{},"269212":{},"269213":{},"269214":{},"269215":{},"269216":{},"269217":{},"269218":{},"269219":{},"269220":{},"269221":{},"269222":{},"269223":{},"269224":{},"269225":{},"269226":{},"269227":{},"269228":{},"269229":{},"269230":{},"269231":{},"269232":{},"269233":{},"269234":{},"269235":{},"269236":{},"269237":{},"269238":{},"269239":{},"269240":{},"269241":{},"269242":{},"269243":{},"269244":{},"...(truncated keys)...":451}

Hi,

For tracking banner views and clicks I recently added this package to observe some of the FlatList components in our app. However everything seems to work fine, since I added the package I receive this warning in the console after some props are changing (e.g. after filtering):

Warning: PickerItem: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)

I know the warning is triggered by another component inside IOFlatList, but I don't receive it when I replace IOFlatlist with FlatList. I found out the problem is the FilterSelect, which is in the ListHeaderComponent property, is remounted on each change using the IOFlatlist component. This isn't using the regular FlatList component.

Is there probably a way to prevent these components are remounted on every change using the IOFlatlist?

The FlatList component:

[...]

const ListNews = (props: Props) => {
  const dispatch = useAppDispatch();
  const [isLoading, setIsLoading] = useState(false);
  const [activeCategory, setActiveCategory] = useState('');
  const activeCategoryItems = props.items
    ? props.items[activeCategory] ?? props.items['all']
    : [];

  useMountEffect(() => {
    dispatch(getNews());
  });

  const IOFlatlist = withIO(FlatList);

  return (
    <IOFlatlist
      // @ts-ignore
      data={activeCategoryItems}
      ListHeaderComponent={
        props.categories && (
          <View style={styles.headerContainer}>
            <FilterSelect
              options={mapDataToFormSelectOptions(Object.values(props.categories), 'id', 'title')}
              activeOption={activeCategory}
              setActiveOption={setActiveCategory}
            />
          </View>
        )
      }

[...]

The filter component:

import SelectPicker from 'react-native-form-select-picker';

[...]

export type Props = {
  options: Array<TypeFormSelectOption>;
  activeOption: any;
  setActiveOption: Function;
};

const FilterSelect = (props: Props) => (
  <View style={styles.container}>
    <SelectPicker
      style={styles.input}
      placeholder={'Alles weergeven'}
      placeholderStyle={styles.text}
      selected={props.activeOption}
      onSelectedStyle={styles.text}
      onValueChange={value => {
        props.setActiveOption(value);
      }}>
      {Object.values(props.options).map((option, index) => (
        <SelectPicker.Item
          key={index}
          value={option.value}
          label={option.label}
        />
      ))}
    </SelectPicker>

[...]

Thanks in advance!

Kind regard,
Geert van Soest

Is it possible to add a license file for this package? My companies automated ingestion process requires a LICENSE.md file.

I could send a pull request, if you can let me know the type of license for this package.

Thanks for this great package!

I trying get ref of IOScrollView for reset this to initial position, but it did not work.

How i can reset this scrollView to initial position?

Hi, first of all, awesome component!

I have a question. Would it be possible to implement this with a Flatlist instead? Thanks!

After using the new React Native architecture, both Android and IOS reported errors due to enabling Fabric. The error is as follows: Warning: ref.measureLayout must be called with a ref to a native component

Hi,

We're using the IOFlatlist component to track Banner views in our FlatList components. These lists can be manually refreshed using the RefreshControl which is available in the regular FlatList component.

Unfortunately, today we found out that if the refreshing value returns to FALSE, there is no smooth transition. Instead, there's a hard "refresh" and all list items jumping back to the top. This seems no issue using the IOScrollView component. Is this a known issue and is there a solution for this?

I think this is also related to the component "remounts" every time a state value changes, as I also mentioned in #9.

const IOFlatlist = withIO(FlatList);

return (
   <IOFlatlist
      // @ts-ignore
      data={data}
      renderItem={({item, index}) => { ... }}
      style={styles.container}
      refreshControl={
        <RefreshControl
          refreshing={isLoading}
          onRefresh={async () => {
            await setIsLoading(true);
            await dispatch(getNews());
            await setIsLoading(false);
          }}
          colors={Colors.REFRESH_CONTROL_ANDROID}
          tintColor={Colors.REFRESH_CONTROL_IOS}
        />
      }
    />

Thanks in advance!

Kind regard,
Geert van Soest

In IOS it's working perfectly but in android, it's not.

Hello,

Firstly, your lib is very practical.

Do you think you can make it evolve to be able to manage the
threshold in addition to the rootMargin?

Thanks by advance

It would be useful to indicate in Readme file that parent context (IOFlatList or IOScrollView) is mandatory to make the library working, maybe introduce withIO hook would be usefull

Can you export types/props from root folder?