svanboxel / visibility-sensor-react-native Goto Github PK

View Code? Open in Web Editor NEW

107.0 7.0 19.0 105 KB

React Native component that helps with determining whether a component is in the viewport.

JavaScript 17.15% TypeScript 82.85%

visibility-sensor-react-native's Introduction

React Native visibility sensor component

React Native component that helps with determining whether a component is visible to the user.

Inspired by react-native-inviewport and react-visibility-sensor.

All usable with Expo with no extra native dependencies!


🐶 visible Horizontal?	🐶 visible Vertical ?

Installation

Open a Terminal in the project root and run:

npm install @svanboxel/visibility-sensor-react-native

or if you use yarn:

yarn add @svanboxel/visibility-sensor-react-native

Usage

import VisibilitySensor from '@svanboxel/visibility-sensor-react-native'

const Example = props => {
  const handleImageVisibility = visible => {
    // handle visibility change
  }

  render() {
    return (
      <View style={styles.container}>
        <VisibilitySensor onChange={handleImageVisibility}>
          <Image
            style={styles.image}
            source={require("../assets/placeholder.png")}
           />
         </VisibilitySensor>
    </View>
   )
  }
}

Todo

It's not finished and some work has to be done yet.

Handle offsets. Callback if triggered is 1px is in viewport now.
Add correct Typescript types
Add tests

Contributing

If you have suggestions for how this component could be improved, or want to report a bug, open an issue! We'd love all and any contributions.

For more, check out the Contributing Guide.

License

visibility-sensor-react-native's People

Contributors

Stargazers

Watchers

Forkers

bramski csantarin al0kdash minhthao56 mujahidmansuri hamzawaleed0102 ddikodroid usmandilmeer postoclock summer-octo body-all-project suyashvash ivanstnsk-ecto bishalftsaikia dyc5828 wilmxre kimkong88 olcayertas pranay16

visibility-sensor-react-native's Issues

Not detecting in ios

thanks for the library, its really nice and working fine in android but in ios it doesnt detect yet

[iOS] Sometimes onChange triggers with non boolean value but SyntheticEvent

Not Working on IOS

thanks for this lib working fine on android but on not on IOS.
PS: It doesn't return the same value of measurement on IOS

Not available via npm

The package is not available via npm install

This is good stuff, just needs a small fix

This is a very simple package and the code quality is good, also works great after applying a fix.

Problems:

Sometimes onChange is not executed
onChange is not executed when entering the page

These are small problems and easy to fix.

Solution:

Change line 19:
const [lastValue, setLastValue] = useState<boolean>(false);
for this:
const [lastValue, setLastValue] = useState<boolean>(null);

Remove line 29:
setLastValue(false);

The package is only 1 file so if the maintainer doesn't fix it anyone can just copy the code into a file with no problems.

Are you going to update it to the newest react package?

While installing I got an error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving:
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.9.0" from @svanboxel/[email protected]
npm ERR! node_modules/@svanboxel/visibility-sensor-react-native
npm ERR! @svanboxel/visibility-sensor-react-native@"*" from the root project

Sometimes not working when scrolling down with videos

Im trying to implement video timeline on top of this library, its working in most cases but in few cases its not triggering on focus out from window viewport.

Trouble getting this library to work

Hi there,

Is there a full in-depth example on how to use this library? I am having trouble getting this to work on android and I am unsure what needs to be inside the handleImageVisibility function or could you clarify what needs to be in there. I am using a image carousel and I want the first item to display it's context and have the other images next to it to be blurred out.

Does not work for some Android Phones

I'm using this library in my Expo App, but somehow it does not trigger the visibility change event on some Android devices.

Could this be a potential bug or am I misusing this library?