Add removeClippedSubviews option to ResponsiveGrid

[harcop]

Add removeClippedSubviews prop to ResponsiveGrid for Android performance

Problem

ResponsiveGrid scrolling becomes laggy on Android 15 when rendering lists with remote image URIs according to this issue reported here #77

Changes

• Added removeClippedSubviews?: boolean to ResponsiveGridProps
• Set default to true for better performance out of the box
• Passed prop to ScrollView component

Impact

• Fixes laggy scrolling on Android with remote images
• Improves memory management for long lists

Summary by CodeRabbit

• New Features
  • ResponsiveGrid adds a new removeClippedSubviews prop (default: true) to automatically remove off-screen child views, improving scroll performance for long lists (notably on Android). You can disable it if needed.
  • No other rendering or layout behavior changed; headers, footers, and virtualization are unaffected.

[coderabbitai]

Walkthrough

Adds a new optional prop removeClippedSubviews (default true) to ResponsiveGrid and forwards it to the internal ScrollView. Type definitions updated to include the prop. No other logic or rendering changes.

Changes

Cohort / File(s)	Summary
ResponsiveGrid API & Prop Forwarding src/responsive-grid/index.tsx, src/responsive-grid/types.ts	Adds removeClippedSubviews?: boolean to ResponsiveGridProps (default true) and passes it through to ScrollView via removeClippedSubviews={removeClippedSubviews}.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor Dev as Developer
    participant RG as ResponsiveGrid
    participant SV as ScrollView (native)

    Dev->>RG: render <ResponsiveGrid removeClippedSubviews?=X>
    Note right of RG: Defaults to true when omitted
    RG->>SV: render <ScrollView removeClippedSubviews=X>
    SV-->>RG: Mount with clipping behavior
    RG-->>Dev: Rendered grid content

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• Performance Issue on Android 15 with ResponsiveGrid and Remote Data #77 — Adds removeClippedSubviews prop to ResponsiveGrid and forwards it to ScrollView, matching the issue’s requested fix for Android scrolling lag.

Possibly related PRs

• Added bounces prop & fixed issue with ResponsiveGrid component horizontal padding #76 — Also updates ResponsiveGrid public props and forwards new props to the internal ScrollView, indicating a related API surface change.

Poem

A nibble of code, a hop through views,
I flip a tiny switch the scroller will use.
Clip, clip—off-screen bits snooze,
Smooth as clover on morning dews.
With one small prop, I bound and cruise. 🐇✨

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[iNerdStack]

LGTM!

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/responsive-grid/types.ts (1)

89-95: Clarify platform behavior and caveats; consider Android-only default.

Doc is good, but removeClippedSubviews can cause issues with sticky headers/animations on iOS. If you adopt the Android-only default suggested in index.tsx, please align the JSDoc:

-  /**
-   * When true, off-screen child views (whose overflow value is hidden) are automatically removed from the native view hierarchy.
-   * This can improve performance for long lists, especially on Android when rendering remote images.
-   * @default true
-   */
+  /**
+   * When true, off-screen child views are removed from the native view hierarchy to reduce memory/overdraw.
+   * Most beneficial on Android with remote images; can conflict with sticky headers/animations.
+   * @default Android: true, iOS: false (override via prop)
+   */

src/responsive-grid/index.tsx (1)

37-38: Default to Android to minimize iOS regressions; keep user override.

Set the default to true on Android only; callers can still opt-in on iOS.

-  removeClippedSubviews = true,
+  removeClippedSubviews = Platform.OS === 'android',

Add the import (outside this hunk):

import { ScrollView, View, StyleSheet, Platform } from 'react-native';

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 1c63e50 and bb61598.

📒 Files selected for processing (2)

• src/responsive-grid/index.tsx (2 hunks)
• src/responsive-grid/types.ts (1 hunks)

🔇 Additional comments (1)

src/responsive-grid/index.tsx (1)

243-244: LGTM: Prop correctly forwarded to ScrollView.

Pass-through is correct and preserves consumer control.