react-native-visibility-tracker
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

react-native-visibility-tracker

WIP

NOTICE currently only android is supported so if in a rush react-native-inviewport.

Why not react-native-inviewport? It's js based. This library is native and can be used with react-native-reanimated or react-native's own Animated API.

PRs are welcome.

Getting started

$ npm install react-native-visibility-tracker --save OR $ yarn add react-native-visibility-tracker

Usage

import VisibilityTracker from 'react-native-visibility-tracker';
 
function VisiblityTrackerItem(props: { index: number }) {
    const [isVisible, setVisible] = useState(false);
    return (
        <VisibilityTracker
            onVisibilityChanged={e => setVisible(e.nativeEvent.visible)}
        >
            <View
                collapsable={false}
                style={[{
                    backgroundColor: isVisible ? 'blue' : 'red',
                    height: 100,
                    margin: 5
                }]}
            >
                <Text>{props.index}</Text>
            </View>
        </VisibilityTracker>
    )
}
 

Package Sidebar

Install

npm i react-native-visibility-tracker

Weekly Downloads

2

Version

0.1.2

License

MIT

Unpacked Size

474 kB

Total Files

58

Last publish

Collaborators

  • shaman123