npm package: @moeenshah/react-native-inviewport
Description: [![npm version](https://img.shields.io/npm/v/@moeenshah/react-native-inviewport.svg)](https://www.npmjs.com/package/@moeenshah/react-native-inviewport) [![npm downloads](https://img.shields.io/npm/dm/@moeenshah/react-native-inviewport.svg)](https://www.np
Author: Moeen Shah
Latest version: 1.0.3

# moeenshah/react-native-in-viewport

[![npm version](https://img.shields.io/npm/v/@moeenshah/react-native-inviewport.svg)](https://www.npmjs.com/package/@moeenshah/react-native-inviewport)
[![npm downloads](https://img.shields.io/npm/dm/@moeenshah/react-native-inviewport.svg)](https://www.npmjs.com/package/@moeenshah/react-native-inviewport)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)


A lightweight React Native component to detect if a child component is visible inside the viewport. Perfect for lazy-loading, analytics tracking, or triggering actions when elements come into view.

---

## ✨ Features

* ✅ Detects if a component is visible on screen
* ✅ Simple API with `onChange` callback
* ✅ Configurable polling interval (`delay`)
* ✅ Optional `offsetTop` support (useful when you have headers)
* ✅ Works with **React Native 0.69+**
* ✅ Written in TypeScript

---

## 📦 Installation

```bash
npm install @moeenshah/react-native-inviewport
```

or with yarn:

```bash
yarn add @moeenshah/react-native-inviewport
```

---

## 🚀 Usage

```tsx
import React from "react";
import { Text, ScrollView } from "react-native";
import InViewPort from '@moeenshah/react-native-inviewport';

export default function App() {
  return (
    <ScrollView>
      <Text style={{ height: 600 }}>Scroll down 👇</Text>

      <InViewPort onChange={(isVisible) => console.log("Visible:", isVisible)}>
        <Text style={{ fontSize: 24 }}>👀 I am being watched!</Text>
      </InViewPort>

      <Text style={{ height: 800 }}>Keep scrolling...</Text>
    </ScrollView>
  );
}
```

👉 Open your logs — when the text enters/leaves the viewport, the `onChange` callback fires.

---

## ⚙️ Props

| Prop        | Type                           | Default      | Description                                         |
| ----------- | ------------------------------ | ------------ | --------------------------------------------------- |
| `onChange`  | `(isVisible: boolean) => void` | **required** | Callback triggered when visibility changes          |
| `disabled`  | `boolean`                      | `false`      | Disable visibility checking                         |
| `delay`     | `number`                       | `100`        | Polling interval in milliseconds                    |
| `offsetTop` | `number`                       | `0`          | Minimum distance from top before considered visible |
| `children`  | `React.ReactNode`              | –            | Components to render inside                         |

---

## 📋 Example with offset

```tsx
<InViewPort
  offsetTop={80} // Useful if you have a fixed header
  delay={200}
  onChange={(visible) => {
    if (visible) {
      console.log("Component is visible!");
    } else {
      console.log("Component is hidden!");
    }
  }}
>
  <Text style={{ fontSize: 18 }}>Track my visibility</Text>
</InViewPort>
```

---

## 🔧 Notes

* Uses `measure` + polling (`setInterval`) under the hood.
* `delay` determines how frequently the component checks visibility. Lower values = more accurate but higher CPU usage.
* For large lists, you may want to throttle checks or use FlatList’s `onViewableItemsChanged`.

---

## 🤝 Contributing

Contributions are welcome! 🎉

1. Fork the repo
2. Create a new branch (`git checkout -b feature/my-feature`)
3. Make your changes
4. Run `npm run build` to compile
5. Submit a PR 🚀

---

## 📜 License

MIT © 2025 [Moeen Shah](https://github.com/MoeenShah)

---