CP-13638: fix ScrollScreen footer overlapping content

[onghwan]

Description

Ticket: CP-13638

• Fix ScrollScreen footer content overlapping the ScrollView content area
• Replace unreliable useRef + useLayoutEffect + measure footer height measurement with onLayout callback
• Replace useSharedValue with useState for footer height so contentContainerStyle.paddingBottom and extraKeyboardSpace properly re-render when the footer is measured
• Dynamically compute paddingBottom based on actual footer height instead of a hardcoded 32

Root cause: The previous implementation used footerRef.current.measure() inside useLayoutEffect, which has known timing issues in React Native and could return stale/zero values. Additionally, footerHeight was a Reanimated useSharedValue, which doesn't trigger React re-renders — so even when the height was measured, the ScrollView's contentContainerStyle never updated.

Screenshots/Videos

ScreenRecording_03-17-2026.15-05-31_1.MP4

Testing

iOS: 7764
Android: 7765

Testing

• Open any screen that uses ScrollScreen with a renderFooter prop (e.g. Approval screen, DeFi withdraw screen)
• Verify the footer does not overlap the scroll content
• Scroll to the bottom of the content and verify there is adequate padding between the last content item and the footer
• Test on a screen with shouldAvoidKeyboard enabled — tap an input, verify the footer sticks above the keyboard and content padding adjusts correctly
• Test on a screen with disableStickyFooter — verify the footer remains at the bottom and content padding uses safe area insets
• Test on a screen without renderFooter — verify paddingBottom falls back to insets.bottom + 24

Checklist

• I have performed a self-review of my code
• I have verified the code works
• I have included screenshots / videos of android and ios
• I have added testing steps
• I have added/updated necessary unit tests
• I have updated the documentation

[Copilot]

Pull request overview

Updates ScrollScreen’s footer measurement and scroll padding logic to prevent footer content overlapping the scrollable content, especially when using sticky footers with keyboard avoidance.

Changes:

• Replace measure()-based footer height calculation with an onLayout callback.
• Move footer height storage from Reanimated useSharedValue to React useState to trigger re-renders.
• Compute contentContainerStyle.paddingBottom dynamically using the measured footer height instead of a hardcoded constant.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.