When adding space to the top or bottom of a ScrollView that may change (keyboard, toolbars, dynamic content), use contentInset instead of padding. Changing cont
This skill guides you to manage dynamic spacing inside a ScrollView by using the `contentInset` property instead of padding. When interface elements like keyboards, toolbars, or variable content require adjusting the scrollable area’s top or bottom spacing, `contentInset` modifies the scroll bounds without triggering costly layout recalculations. This improves performance and prevents unnecessary re-rendering compared to adjusting padding, which forces a full layout pass whenever spacing changes.
Using `contentInset` alongside `scrollIndicatorInsets` keeps the scroll indicator properly aligned with the visible content area, ensuring a polished user experience. This approach is particularly useful when the space required fluctuates frequently, such as when a keyboard appears or a toolbar toggles.
This skill is essential for mobile UX designers and front-end engineers working on React Native apps where scroll performance impacts user engagement metrics like session length and retention. Growth leads optimizing onboarding flows or checkout experiences will benefit from smoother scrolling and fewer layout shifts, which reduce friction and drop-off. It’s also valuable for agencies developing apps with dynamic content or toolbars that require responsive spacing adjustments without compromising frame rates.
First, identify which parts of your interface cause variable spacing inside ScrollViews, such as keyboards or floating toolbars. Next, replace any padding-based spacing in the ScrollView’s content container with `contentInset` adjustments to dynamically modify scroll bounds. Then, synchronize `scrollIndicatorInsets` to ensure the scrollbar visually matches the updated scrollable area. Finally, test the component under different spacing scenarios to confirm that layout recalculations are minimized and scrolling remains fluid.
Does changing `contentInset` affect layout performance? No, updating `contentInset` only alters the scrollable area without triggering a full layout recalculation. Can I use padding for static spacing? Yes, padding is fine when the spacing does not change dynamically. Should I always set `scrollIndicatorInsets` with `contentInset`? It’s recommended to keep scroll indicators aligned with the content by matching the insets.
Attach this skill to any Metaflow agent task involving UI adjustments for scrollable content that needs dynamic spacing. When applied, expect the agent to recommend replacing padding with `contentInset` and adjusting scroll indicators accordingly to optimize scroll performance. This leads to more efficient layout behavior and smoother user interactions under changing interface conditions. You can then...
For broader context, see our roundup of claude marketing skills, and read common Claude Code content mistakes for related setup guidance.