react-native-intersection-observer - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/index.d.ts

 import IntersectionObserver, { type IntersectionObserverEntry, type IntersectionObserverOptions, type RootMargin } from './IntersectionObserver';
 import InView, { type InViewProps } from './InView';
 import IOContext from './IOContext';
-import IOScrollView, { type IOScrollViewProps } from './IOScrollView';
-import withIO, { type IOScrollableComponentProps } from './withIO';
-export type { IntersectionObserverEntry, IntersectionObserverOptions, RootMargin, InViewProps, IOScrollViewProps, IOScrollableComponentProps, };
-export { IntersectionObserver, InView, IOContext, IOScrollView, withIO };
+import IOFlatList, { type IOFlatListController, type IOFlatListProps } from './IOFlatList';
+import IOScrollView, { type IOScrollViewController, type IOScrollViewProps } from './IOScrollView';
+import withIO, { type IOComponentProps } from './withIO';
+export type { IntersectionObserverEntry, IntersectionObserverOptions, RootMargin, InViewProps, IOComponentProps, IOFlatListController, IOFlatListProps, IOScrollViewController, IOScrollViewProps, };
+export { IntersectionObserver, InView, IOContext, IOFlatList, IOScrollView, withIO, };

lib/index.js

 import IntersectionObserver from './IntersectionObserver';
 import InView from './InView';
 import IOContext from './IOContext';
+import IOFlatList from './IOFlatList';
 import IOScrollView from './IOScrollView';
 import withIO from './withIO';
-export { IntersectionObserver, InView, IOContext, IOScrollView, withIO };
+export { IntersectionObserver, InView, IOContext, IOFlatList, IOScrollView, withIO, };

lib/IntersectionObserver.d.ts

@@ -29,3 +29,3 @@ import { LayoutRectangle, NativeScrollEvent } from 'react-native';
 }
-export declare type IntersectionObserverCallback = (entries: IntersectionObserverEntry[]) => void;
+export type IntersectionObserverCallback = (entries: IntersectionObserverEntry[]) => void;
 export declare const defaultRootMargin: RootMargin;
@@ -32,0 +32,0 @@ declare class IntersectionObserver {

lib/InView.d.ts

@@ -13,3 +13,3 @@ import React, { ComponentType, PureComponent, ReactElement, ReactNode, RefObject } from 'react';
 }
-export declare type InViewProps<T extends Props = Props> = T & {
+export type InViewProps<T = Props> = T & {
     as?: ComponentType<any>;
@@ -21,3 +21,3 @@ children: ReactNode | ((fields: RenderProps) => ReactElement<View>);
 };
-export declare type InViewWrapper = ComponentType<{
+export type InViewWrapper = ComponentType<{
     ref?: RefObject<any> | ((ref: any) => void);
@@ -24,0 +24,0 @@ onLayout?: (event: LayoutChangeEvent) => void;

lib/IOManager.d.ts

 import { Element } from './IntersectionObserver';
 import IntersectionObserver, { IntersectionObserverOptions, IntersectionObserverEntry } from './IntersectionObserver';
-export declare type ObserverInstanceCallback = (inView: boolean) => void;
+export type ObserverInstanceCallback = (inView: boolean) => void;
 export interface ObserverInstance {
@@ -5,0 +5,0 @@ readonly callback: ObserverInstanceCallback;

lib/IOScrollView.d.ts

@@ -1,4 +0,7 @@
-import { type IOScrollableComponent, type IOScrollableComponentProps } from './withIO';
-export declare type IOScrollViewProps = IOScrollableComponentProps;
-declare const _default: typeof IOScrollableComponent;
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ScrollView, ScrollViewProps } from 'react-native';
+import { IOComponentProps } from './withIO';
+export type IOScrollViewController = ScrollView;
+export type IOScrollViewProps = IOComponentProps & ScrollViewProps;
+declare const _default: ForwardRefExoticComponent<IOComponentProps & ScrollViewProps & RefAttributes<ScrollView>>;
 export default _default;

lib/IOScrollView.js

 import { ScrollView } from 'react-native';
-import withIntersectionObserver from './withIO';
-export default withIntersectionObserver(ScrollView);
+import withIO from './withIO';
+const IOScrollView = withIO(ScrollView, [
+    'scrollTo',
+    'scrollToEnd',
+    'getScrollResponder',
+    'getScrollableNode',
+    'getInnerViewNode',
+]);
+export default IOScrollView;

lib/withIO.d.ts

@@ -1,15 +0,8 @@
-import { PureComponent } from 'react';
-import { ScrollResponderMixin, ScrollView, ScrollViewComponent, ScrollViewProps } from 'react-native';
+import { type ComponentProps } from 'react';
+import { ScrollView } from 'react-native';
 import { RootMargin } from './IntersectionObserver';
-export interface IOScrollableComponentProps extends ScrollViewProps {
+export interface IOComponentProps {
     rootMargin?: RootMargin;
 }
-export declare class IOScrollableComponent extends PureComponent<IOScrollableComponentProps> {
-    scrollTo: ScrollView['scrollTo'];
-    scrollToEnd: ScrollView['scrollToEnd'];
-    getScrollResponder(): ScrollResponderMixin | undefined;
-    getScrollableNode: ScrollView['getScrollableNode'];
-    getInnerViewNode: ScrollView['getInnerViewNode'];
-}
-declare const withIO: (ScrollableComponent: typeof ScrollViewComponent) => typeof IOScrollableComponent;
+declare function withIO<CompProps extends Pick<ComponentProps<typeof ScrollView>, 'horizontal' | 'scrollEventThrottle' | 'onContentSizeChange' | 'onLayout' | 'onScroll'>>(Comp: new (props: CompProps) => any, methods: string[]): new (props: CompProps) => any;
 export default withIO;

lib/withIO.js

@@ -1,7 +0,7 @@
-import React, { PureComponent, createRef } from 'react';
+import React, { PureComponent, createRef, } from 'react';
 import { findNodeHandle, } from 'react-native';
 import IOContext from './IOContext';
 import IOManager from './IOManager';
-const withIO = (ScrollableComponent) => {
-    class IOScrollView extends PureComponent {
+function withIO(Comp, methods) {
+    const IOScrollableComponent = class extends PureComponent {
         node;
@@ -58,2 +58,7 @@ scroller;
             this.node = findNodeHandle(this.scroller.current);
+            methods.forEach((method) => {
+                this[method] = (...args) => {
+                    this.scroller.current?.[method]?.(...args);
+                };
+            });
         }
@@ -95,24 +100,9 @@ handleContentSizeChange = (width, height) => {
         };
-        scrollTo(y, x, animated) {
-            this.scroller.current?.scrollTo(y, x, animated);
-        }
-        scrollToEnd = (options) => {
-            this.scroller.current?.scrollToEnd(options);
-        };
-        getScrollResponder = () => {
-            return this.scroller.current?.getScrollResponder();
-        };
-        getScrollableNode = () => {
-            return this.scroller.current?.getScrollableNode();
-        };
-        getInnerViewNode = () => {
-            return this.scroller.current?.getInnerViewNode();
-        };
         render() {
             return (React.createElement(IOContext.Provider, { value: this.contextValue },
-                React.createElement(ScrollableComponent, { scrollEventThrottle: 16, ...this.props, ref: this.scroller, onContentSizeChange: this.handleContentSizeChange, onLayout: this.handleLayout, onScroll: this.handleScroll })));
+                React.createElement(Comp, { scrollEventThrottle: 16, ...this.props, ref: this.scroller, onContentSizeChange: this.handleContentSizeChange, onLayout: this.handleLayout, onScroll: this.handleScroll })));
         }
-    }
-    return IOScrollView;
-};
+    };
+    return IOScrollableComponent;
+}
 export default withIO;

package.json

 {
   "name": "react-native-intersection-observer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "react native intersection observer",
@@ -46,3 +46,3 @@ "keywords": [
     "react-test-renderer": "17.0.2",
-    "typescript": "^4.4.4"
+    "typescript": "^4.9.5"
   },
@@ -49,0 +49,0 @@ "resolutions": {

No alert changes

Improved metrics

Total package byte prevSize

23275

increased by2.93%

Number of package files

19

increased by11.76%

Lines of code

519

increased by3.18%

No dependency changes