Demos

Hi @roopemerikukka & @nirpeled, I noticed in another issue that you both mentioned using react-visibility-sensor in a production app. That’s great to hear! 😃

I’m trying to gather a set of officially supported demos that adequately show the different ways this component is being used in production. This will also help to ensure that as we modernise the codebase and refine the API, the features that are depended on take priority.

For example, if we look at this demo of scrolling through a list and activating items when they become visible, what are the differences between this and how you are using it? What would a demo that covered your use-case look like?

Thanks for your help!

PS. anyone else who is using this component in production, please join in the thread too! 😃

[nirpeled]

@alex-cory I used the ref.

Here’s the code I used about a year ago - should still work 😎

// inspired by
// https://github.com/yamill/react-native-inviewport
// which is inspired by
// https://github.com/joshwnj/react-visibility-sensor

import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import globalStyles from 'app/constants/styles';

class VisibilitySensor extends React.Component {

    static propTypes = {
        active: PropTypes.bool,
        delay: PropTypes.number,
    };

    static defaultProps = {
        active: true,
        delay: 100,
    };

    state = {
        rectTop: 0,
        rectBottom: 0,
    };

    componentDidMount() {

        const { active } = this.props;

        if (active) {
            this.startWatching();
        }
    }

    componentWillUnmount() {

        this.stopWatching();

    }

    componentWillReceiveProps(nextProps) {

        const { active } = nextProps;

        if (active) {
            this.lastValue = null;
            this.startWatching();
        } else {
            this.stopWatching();
        }

    }

    startWatching = () => {

        const { delay } = this.props;

        if (this.interval) {
            return;
        }

        this.interval = setInterval(this.check, delay);

    };

    stopWatching = () => {

        this.interval = clearInterval(this.interval);

    };

    check = () => {

        const { onChange } = this.props;
        const ref = this.refs.view;
        const width = globalStyles.dimensions.getWidth();
        const height = globalStyles.dimensions.getHeight();

        ref.measure((ox, oy, width, height, pageX, pageY) => {

            this.setState({
                rectTop: pageY,
                rectBottom: pageY + height,
                rectWidth: pageX + width,
            })

        });

        const isVisible = (
            (this.state.rectBottom !== 0) &&
            (this.state.rectTop >= 0) &&
            (this.state.rectBottom <= height) &&
            (this.state.rectWidth > 0) &&
            (this.state.rectWidth <= width)
        );

        // notify the parent when the value changes

        if (this.lastValue !== isVisible) {
            this.lastValue = isVisible;
            onChange(isVisible);
        }

    };

    render() {

        const { active, delay, children } = this.props;

        return (
            <View ref="view" active={active} delay={delay}>
                {children}
            </View>
        );

    }

}

export default VisibilitySensor;

[joshwnj]

Good idea @agentmilindu . Let’s follow this up in #132 and then circle back here.