gre / gre/react-native-view-shot

[iOS][Fabric] Content disappears when capturing a ScrollView item with borderWidth and snapshotContentContainer

Open
#677 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2.9k
Forks
375
Avg merge
6d 23h
Merged PRs (30d)
15

Description

After upgrading `react-native-view-shot` from `3.5.0` to `5.1.1`, I found an iOS screenshot issue when capturing the full content of a vertical `ScrollView`.

The screenshot can be generated successfully, but some list-item content disappears when the item container has a `borderWidth` style. The missing area is rendered as an empty white block. Other content in the same `ScrollView`, such as charts, headers, and table-based items, is captured correctly.

Removing `borderWidth` from the content container makes the item content appear in the screenshot again.

## Environment

- React Native: `0.82.1`
- react-native-view-shot: `5.1.1`
- Platform: iOS
- Architecture: Fabric / New Architecture
- Device: Physical iOS device
- Captured component: Vertical `ScrollView`

## Capture code

```tsx
await captureRef(scrollViewRef.current, {
format: 'png',
quality: 1,
snapshotContentContainer: true,
useRenderInContext: true,
});
```

The `ScrollView` is configured as follows:

```tsx


{items.map(item => (

))}

```

## Problematic style

The issue occurs when the content-bearing list-item container has a border:

```tsx
const styles = StyleSheet.create({
content: {
backgroundColor: '#FFFFFF',
borderWidth: 1,
borderColor: '#F6F6F6',
},
});
```

The item is displayed correctly on screen, but its text and other child content are missing from the generated iOS screenshot.

## Workaround

Moving the visual border to a separate wrapper and simulating it with `padding` and `backgroundColor` avoids the issue:

```tsx


{/* Item content */}

```

```tsx
const styles = StyleSheet.create({
borderContainer: {
backgroundColor: '#F6F6F6',
padding: 1,
},
content: {
backgroundColor: '#FFFFFF',
},
});
```

With this workaround, the list-item content is included in the screenshot.

## Shadow performance issue

I also noticed that adding shadow styles to the list-item container makes full-content screenshot generation significantly slower on iOS.

For example:

```tsx
const styles = StyleSheet.create({
content: {
backgroundColor: '#FFFFFF',
shadowColor: '#000000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
});
```

The slowdown becomes more noticeable as the number of items and the total `ScrollView` content height increase. Removing the shadow styles makes the capture much faster.

## Expected behavior

- All mounted content inside the vertical `ScrollView` should appear in the generated screenshot, even when an item container uses `borderWidth`.
- Shadow styles should not cause an excessive increase in full-content capture time.

## Actual behavior

- On iOS, list-item child content may disappear when the content-bearing container has `borderWidth`.
- The affected area becomes an empty white block in the screenshot.
- Adding shadow styles significantly slows down the screenshot operation.
- The same item content is displayed correctly in the live application UI.

## Additional observations

- `removeClippedSubviews` is set to `false`, so the missing content is mounted before capture.
- `snapshotContentContainer` is enabled to capture the entire scrollable content.
- The problem affects card-style list items, while other content in the same screenshot can still be captured.
- Removing only the outer `borderWidth` is enough to restore the missing item content.
- Simulating the border with a wrapper, `backgroundColor`, and `padding` works consistently in the current project.
- This behavior was observed after upgrading from `react-native-view-shot` `3.5.0` to `5.1.1` in a React Native `0.82.1` Fabric application.

## Reproduction request

Could you please confirm whether this is a limitation or regression in the iOS full-content capture implementation, especially when `useRenderInContext` is enabled under Fabric?

I can provide a minimal reproduction project if needed.

Image

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the reported captureRef call using snapshotContentContainer and useRenderInContext on an iOS Fabric ScrollView, reproducing with and without borderWidth and shadow styles while comparing versions 3.5.0 and 5.1.1. Done means determining whether full-content capture has a regression or limitation and verifying that item content remains visible without excessive capture slowdown.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.