fix: InvestScreen layout broken — triple-nested SafeAreaView, KeyboardAvoidingView, and ScrollView cause scroll conflict and amount truncation

[Josue19-08]

🔖 Title

Fix `InvestScreen` layout — triple nesting causes scroll conflict, double top inset, and amount display truncation

---

📄 Description

`InvestScreen` is wrapped inside `MainLayout`, creating three separate layout conflicts:

Bug 1 — Double SafeAreaView (extra blank space at top):
`MainLayout` applies `` AND `InvestScreen` has its own `<SafeAreaView edges={['top']}>`. The top inset is applied twice, adding a large blank gap above the screen content.

Bug 2 — Nested KeyboardAvoidingViews (unpredictable keyboard offset):
`MainLayout` has `` and `InvestScreen` has its own with `keyboardVerticalOffset={0}`. Both use `behavior="padding"` on iOS. Nested KAVs stack their offsets — when the deposit input is focused, content jumps by an incorrect amount.

Bug 3 — Nested ScrollViews (scroll conflict + amount truncation):
`MainLayout` wraps `{children}` in a `` and `InvestScreen` has its own inner ``. React Native does not support nested ScrollViews in the same scroll direction. The deposit amount text is truncated because the inner ScrollView is constrained by the outer one and cannot calculate its own height correctly.

Bug 4 — Unintended outer scroll:
The user reported the home screen has scroll — this is the `MainLayout` ScrollView making the entire screen (including the header) scroll, which feels wrong. The header should be fixed; only the content area should scroll.

---

✅ Tasks to complete

• Remove `` from `InvestScreen.tsx` — let `MainLayout` handle safe area insets
• Remove `` from `InvestScreen.tsx` — let `MainLayout` handle keyboard avoidance
• Remove the inner `` from `InvestScreen.tsx` — let `MainLayout`'s ScrollView handle scrolling, OR remove it from `MainLayout` and use `` or `` only in `InvestScreen` directly
• Refactor `MainLayout.tsx` — keep only the fixed header + `{children}` in a ``; remove the ScrollView wrapper so each child screen controls its own scroll behavior
• Fix the deposit amount display in `InvestScreen` — ensure the amount text has `numberOfLines` properly unset and the container has no `overflow: hidden` or conflicting `flex` constraint that clips the value
• Fix the `use-invest.ts` hook — `formatCurrency` is exported but unused in the component (component uses a raw template string `$${depositAmount}`); replace inline formatting with the hook's `formatCurrency` function to correctly format large numbers with commas
• Test on both iOS and Android: deposit input should push content up correctly, amount should display without truncation, header should remain fixed while content scrolls

---

📚 Documentation/context for AI

https://github.com/TrustUp-app/TrustUp-Frontend/tree/main/docs

Files to modify:

• `components/pages/InvestScreen.tsx`
• `components/shared/MainLayout.tsx`
• `hooks/invest/use-invest.ts` (minor — wire formatCurrency)

---

🗒️ Additional notes

• The fix is structural — do not add workarounds like negative margins or absolute positioning to compensate for the double inset
• After removing SafeAreaView from InvestScreen, test on a physical device with a notch (iPhone with Dynamic Island) to confirm top content is not hidden
• The header in `MainLayout` (greeting, settings icon, avatar) must remain fixed at the top — it should NOT scroll with content
• `InvestScreen` content (cards, deposit input) should scroll independently if content overflows the screen height

[OluRemiFour]

Hi! I'd like to work on this issue if it's still available. I'll follow the project's contribution guidelines, implement the requested changes, include the required tests, and submit a PR for review.

[Chigybillionz]

Good day, TrustUp team.

I'd like to work on this issue.

I'll resolve the layout conflicts by removing the duplicated "SafeAreaView", "KeyboardAvoidingView", and nested "ScrollView", then refactor "MainLayout" so the header remains fixed while each screen manages its own scrolling. I'll also fix the deposit amount truncation, wire "formatCurrency" into "InvestScreen", and verify the behavior on both iOS and Android to ensure the layout, keyboard handling, and scrolling work correctly before opening the PR.

GitHub: https://github.com/chigybillionz