Skip to content

Commit 420e448

Browse files
JairajJangleJairajJangle
authored
Merge pull request #45 from JairajJangle/beta
feat: added percent visiblity callback
2 parents 10ef680 + e0e2c70 commit 420e448

10 files changed

Lines changed: 521 additions & 174 deletions

File tree

‎.github/workflows/beta-release.yml‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
name: Beta Release
2+
on:
3+
push:
4+
branches:
5+
- beta
6+
pull_request:
7+
branches:
8+
- beta
9+
merge_group:
10+
types:
11+
- checks_requested
12+
13+
jobs:
14+
lint:
15+
runs-on: ubuntu-latest
16+
steps:
17+
- name: Checkout
18+
uses: actions/checkout@v4
19+
20+
- name: Setup
21+
uses: ./.github/actions/setup
22+
23+
- name: Lint files
24+
run: yarn lint
25+
26+
- name: Typecheck files
27+
run: yarn typecheck
28+
29+
test:
30+
runs-on: ubuntu-latest
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v4
34+
35+
- name: Setup
36+
uses: ./.github/actions/setup
37+
38+
- name: Run unit tests
39+
run: yarn test --maxWorkers=2 --coverage
40+
41+
build-library:
42+
runs-on: ubuntu-latest
43+
steps:
44+
- name: Checkout
45+
uses: actions/checkout@v4
46+
47+
- name: Setup
48+
uses: ./.github/actions/setup
49+
50+
- name: Build package
51+
run: yarn prepack
52+
53+
build-web:
54+
runs-on: ubuntu-latest
55+
steps:
56+
- name: Checkout
57+
uses: actions/checkout@v4
58+
59+
- name: Setup
60+
uses: ./.github/actions/setup
61+
62+
- name: Build example for Web
63+
run: |
64+
yarn example expo export:web
65+
66+
publish-beta:
67+
needs: [lint, test, build-library, build-web]
68+
runs-on: ubuntu-latest
69+
permissions:
70+
contents: write # To publish a GitHub release
71+
issues: write # To comment on released issues
72+
pull-requests: write # To comment on released pull requests
73+
id-token: write # To enable use of OIDC for npm provenance
74+
if: github.ref == 'refs/heads/beta'
75+
steps:
76+
- name: Checkout
77+
uses: actions/checkout@v4
78+
with:
79+
fetch-depth: 0 # Ensures all tags are fetched
80+
81+
- name: Setup
82+
uses: ./.github/actions/setup
83+
84+
- name: Setup Node.js
85+
uses: actions/setup-node@v4
86+
with:
87+
node-version: "lts/*" # Use the latest LTS version of Node.js
88+
registry-url: 'https://registry.npmjs.org/' # Specify npm registry
89+
90+
- name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
91+
run: npm audit signatures # Check the signatures to verify integrity
92+
93+
- name: Release Beta
94+
run: npx semantic-release # Run semantic-release to manage versioning and publishing
95+
env:
96+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub token for authentication
97+
98+
# Why NODE_AUTH_TOKEN instead of NPM_TOKEN: https://github.com/semantic-release/semantic-release/issues/2313
99+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # npm token for publishing package
100+

‎CHANGELOG.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,37 @@
1+
# [1.4.0-beta.3](https://github.com/JairajJangle/react-native-visibility-sensor/compare/v1.4.0-beta.2...v1.4.0-beta.3) (2025-08-26)
2+
3+
4+
### Bug Fixes
5+
6+
* **perf:** reduced unnecessary onPercentChange callback calls when last percent is already 0 ([39e8aa8](https://github.com/JairajJangle/react-native-visibility-sensor/commit/39e8aa847b42eabe9341e4bec96c35f1b8c67972))
7+
8+
# [1.4.0-beta.2](https://github.com/JairajJangle/react-native-visibility-sensor/compare/v1.4.0-beta.1...v1.4.0-beta.2) (2025-08-23)
9+
10+
11+
### Bug Fixes
12+
13+
* added missing state dependencies in visiblity calculations ([af0161c](https://github.com/JairajJangle/react-native-visibility-sensor/commit/af0161c6fcfb4d72f7db97e7fb1c88cc96706c13))
14+
15+
# [1.4.0-beta.1](https://github.com/JairajJangle/react-native-visibility-sensor/compare/v1.3.22...v1.4.0-beta.1) (2025-08-23)
16+
17+
18+
### Bug Fixes
19+
20+
* add window dimension change listener to handle orientation changes ([5f640db](https://github.com/JairajJangle/react-native-visibility-sensor/commit/5f640db1be9f447f9b82aece4b1e9a366df36573))
21+
* handle initial visibility state and improve measurement timing ([f5e4de7](https://github.com/JairajJangle/react-native-visibility-sensor/commit/f5e4de7dd7802951a5654fe9ab8cf574f9f4d52d))
22+
* prevent race conditions during rapid mount/unmount cycles ([de6cb59](https://github.com/JairajJangle/react-native-visibility-sensor/commit/de6cb59111b4b8944d3070bb826290b8941340c5))
23+
* prevent state updates on unmounted components ([6c9786a](https://github.com/JairajJangle/react-native-visibility-sensor/commit/6c9786a1ccc46e5c48813e349a7e6aabb9b4052a))
24+
25+
26+
### Features
27+
28+
* added percent visiblity callback requested in [#44](https://github.com/JairajJangle/react-native-visibility-sensor/issues/44) ([e78fa27](https://github.com/JairajJangle/react-native-visibility-sensor/commit/e78fa27a9fe2d8c37227f3ab6022964aeafe8b37))
29+
30+
31+
### Performance Improvements
32+
33+
* conserved percent calc. if view is not visible - [#44](https://github.com/JairajJangle/react-native-visibility-sensor/issues/44) ([81d0036](https://github.com/JairajJangle/react-native-visibility-sensor/commit/81d003651348dcfb871d832137330d174f1f56e2))
34+
135
## [1.3.22](https://github.com/JairajJangle/react-native-visibility-sensor/compare/v1.3.21...v1.3.22) (2025-08-12)
236

337

‎README.md‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
[![npm version](https://img.shields.io/npm/v/%40futurejj%2Freact-native-visibility-sensor)](https://badge.fury.io/js/%40futurejj%2Freact-native-visibility-sensor) [![License](https://img.shields.io/github/license/JairajJangle/react-native-visibility-sensor)](https://github.com/JairajJangle/react-native-visibility-sensor/blob/main/LICENSE) [![Workflow Status](https://github.com/JairajJangle/react-native-visibility-sensor/actions/workflows/ci.yml/badge.svg)](https://github.com/JairajJangle/react-native-visibility-sensor/actions/workflows/ci.yml) ![Android](https://img.shields.io/badge/-Android-555555?logo=android&logoColor=3DDC84) ![iOS](https://img.shields.io/badge/-iOS-555555?logo=apple&logoColor=white) ![Web](https://img.shields.io/badge/-Web-555555?logo=google-chrome&logoColor=0096FF) [![GitHub issues](https://img.shields.io/github/issues/JairajJangle/react-native-visibility-sensor)](https://github.com/JairajJangle/react-native-visibility-sensor/issues?q=is%3Aopen+is%3Aissue) ![TS](https://img.shields.io/badge/TypeScript-strict_💪-blue) [![Expo Snack](https://img.shields.io/badge/Expo%20Snack-555555?style=flat&logo=expo&logoColor=white)](https://snack.expo.dev/@futurejj/react-native-visibility-sensor-example) ![NPM Downloads](https://img.shields.io/npm/dm/%40futurejj%2Freact-native-visibility-sensor) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40futurejj%2Freact-native-visibility-sensor)
66

77
<div align="center">
8-
<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTlsaGEyaXd4ZDdicWdtYnM4d3FibWltZjJwd3RrOG80b2pzemQ4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hNCfKTz7YMuDPIM7eV/giphy.gif" alt="Visibility Sensor demo" style="border: 1px solid gray;" />
8+
<img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExOXN4ZWs5ejdiYmZ5Zm5xaWw5YXZ5OGYwMmczcnFneXNiYW5hcDh6cCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/gEbrrDtgnoq6Fs8FNq/giphy.gif" alt="Visibility Sensor demo" style="border: 1px solid gray;" />
99
</div>
1010

1111

12+
1213
## Installation
1314

1415
Using yarn
@@ -26,32 +27,28 @@ npm install @futurejj/react-native-visibility-sensor
2627

2728
## Usage
2829

29-
```typescript
30-
import React from 'react';
30+
```tsx
31+
import React, { useState } from 'react';
3132
import { ScrollView, Text } from 'react-native';
3233
import { VisibilitySensor } from '@futurejj/react-native-visibility-sensor';
3334

3435
export default function VisibilitySensorExample() {
35-
const [isInView, setIsInView] = React.useState(false);
36-
37-
function checkVisible(isVisible: boolean) {
38-
if (isVisible) {
39-
setIsInView(isVisible);
40-
} else {
41-
setIsInView(isVisible);
42-
}
43-
}
36+
const [isVisible, setIsVisible] = useState(false);
37+
const [percentVisible, setPercentVisible] = useState<number>(0);
4438

4539
return (
4640
<ScrollView>
4741
<VisibilitySensor
48-
onChange={(isVisible) => checkVisible(isVisible)}
49-
threshold={{
50-
left: 100,
51-
right: 100,
52-
}}
53-
style={[styles.item, { backgroundColor: isInView ? 'green' : 'red' }]}>
54-
<Text>This View is currently visible? {isInView ? 'yes' : 'no'}</Text>
42+
onChange={setIsVisible}
43+
onPercentChange={setPercentVisible} // optional callback for % change
44+
threshold={{ top: 100, bottom: 100 }}
45+
style={[styles.item, { backgroundColor: isVisible ? 'green' : 'red' }]}>
46+
47+
{/* Visibility state */}
48+
<Text>This View is currently visible? {isVisible ? 'yes' : 'no'}</Text>
49+
50+
{/* Percent visibility state */}
51+
<Text>{`Percent visible: ${percentVisible}%`}</Text>
5552
</VisibilitySensor>
5653
</ScrollView>
5754
);
@@ -61,26 +58,27 @@ export default function VisibilitySensorExample() {
6158

6259
`VisibilitySensorProps` extends `ViewProps` from React Native, which includes common properties for all views, such as `style`, `onLayout`, etc.
6360

64-
| Property | Type | Required | Description |
65-
| ----------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------ |
66-
| onChange | (visible: boolean) => void | Yes | Callback function that fires when visibility changes. |
67-
| disabled | boolean | No | If `true`, disables the sensor. |
68-
| triggerOnce | boolean | No | If `true`, the sensor will only trigger once. |
69-
| delay | number \| undefined | No | The delay in milliseconds before the sensor triggers. |
70-
| threshold | [VisibilitySensorThreshold](#visibilitysensorthreshold) | No | Defines the part of the view that must be visible for the sensor to trigger. |
61+
| Property | Type | Required | Description |
62+
| ----------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------ |
63+
| `onChange` | `(visible: boolean) => void` | Yes | Callback function that fires when visibility changes. |
64+
| `onPercentChange` | `(percentVisible: number) => void` | No | Callback function that fires when visibility % changes. |
65+
| `disabled` | `boolean` | No | If `true`, disables the sensor. |
66+
| `triggerOnce` | `boolean` | No | If `true`, the sensor will only trigger once. |
67+
| `delay` | `number` or `undefined` | No | The delay in milliseconds before the sensor triggers. |
68+
| `threshold` | [VisibilitySensorThreshold](#visibilitysensorthreshold) | No | Defines the part of the view that must be visible for the sensor to trigger. |
7169

7270
Additionally, all properties from `ViewProps` are also applicable.
7371

7472
---
7573

7674
### VisibilitySensorThreshold
7775

78-
| Property | Type | Required | Description |
79-
| -------- | ------ | -------- | ------------------------------------------ |
80-
| top | number | No | The top threshold value for visibility. |
81-
| bottom | number | No | The bottom threshold value for visibility. |
82-
| left | number | No | The left threshold value for visibility. |
83-
| right | number | No | The right threshold value for visibility. |
76+
| Property | Type | Required | Description |
77+
| -------- | -------- | -------- | ------------------------------------------ |
78+
| `top` | `number` | No | The top threshold value for visibility. |
79+
| `bottom` | `number` | No | The bottom threshold value for visibility. |
80+
| `left` | `number` | No | The left threshold value for visibility. |
81+
| `right` | `number` | No | The right threshold value for visibility. |
8482

8583
---
8684

‎example/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
"web": "expo start --web"
1010
},
1111
"dependencies": {
12-
"expo": "^53.0.20",
12+
"expo": "^53.0.22",
1313
"react": "19.0.0",
1414
"react-dom": "19.0.0",
15-
"react-native": "0.79.3",
15+
"react-native": "0.79.5",
1616
"react-native-web": "^0.20.0"
1717
},
1818
"devDependencies": {

0 commit comments

Comments
 (0)