Revolut-style parallax home + back buttons on modal screens

Add a Revolut-style hero image with parallax scroll on the home screen:
- 280px hero rendered absolutely behind the scroll content
- Reanimated useAnimatedScrollHandler drives translateY (-0.5x) and an
  overscroll zoom (scale 1 → 1.4 over 200px of pull-down, clamped)
- LinearGradient overlay fades the hero into the background color
- Top bar (wallet name, sync status) is overlaid on the hero with white
  text + drop shadow for readability

Add an `onBack` convenience prop to ScreenHeader so consumers don't have
to inline a Pressable + arrow icon. Apply it on every modal-presented
screen that lost its native nav header (wallets, masternode, coin
control, export key, transaction).

Adds expo-linear-gradient as a native dep.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: NateIsern

app/(tabs)/index.tsx

@@ -167,6 +167,7 @@ export default function CoinControlScreen() {
       <ScreenHeader
         title="Coin Control"
         subtitle={`${utxos.length} UTXO${utxos.length !== 1 ? "s" : ""} available`}
+        onBack={() => router.back()}
       />
       <ScrollView className="flex-1" contentContainerClassName="px-5 pb-4">
         {/* Selection actions */}

app/coin-control.tsx

@@ -8,6 +8,7 @@
 import { useCallback, useMemo, useState } from "react";
 import { View, Text, TextInput, ScrollView, Pressable } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useRouter } from "expo-router";
 import * as Clipboard from "expo-clipboard";
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import { useWalletStore } from "../src/wallet/wallet-store";
@@ -41,6 +42,7 @@ type ExportStep = "pin" | "select" | "passphrase" | "result";
 // ---------------------------------------------------------------------------
 
 export default function ExportKeyScreen() {
+  const router = useRouter();
   const addresses = useWalletStore((s) => s.addresses);
   const network = useWalletStore((s) => s.network);
   const theme = useTheme();
@@ -247,6 +249,7 @@ export default function ExportKeyScreen() {
         <ScreenHeader
           title="Select Address"
           subtitle="Choose the address whose private key you want to export"
+          onBack={() => router.back()}
         />
         <ScrollView
           className="flex-1"
@@ -286,6 +289,7 @@ export default function ExportKeyScreen() {
         <ScreenHeader
           title="Set Encryption Passphrase"
           subtitle="This passphrase will be needed to decrypt the exported key. Choose a strong passphrase and store it safely."
+          onBack={() => setStep("select")}
         />
         <ScrollView
           className="flex-1"
@@ -356,6 +360,7 @@ export default function ExportKeyScreen() {
       <ScreenHeader
         title="Encrypted Key"
         subtitle="Your BIP38 encrypted private key"
+        onBack={() => router.back()}
       />
       <ScrollView
         className="flex-1"

app/export-key.tsx

@@ -8,7 +8,7 @@
 import { useState, useCallback } from "react";
 import { View, Text, ScrollView, Modal, TextInput } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useFocusEffect } from "expo-router";
+import { useFocusEffect, useRouter } from "expo-router";
 import { useWalletStore } from "../src/wallet/wallet-store";
 import {
   Section,
@@ -65,6 +65,7 @@ function parseIpPort(input: string): { ip: string; port: number } | null {
 }
 
 export default function MasternodeScreen() {
+  const router = useRouter();
   const masternodeUTXOs = useWalletStore((s) => s.masternodeUTXOs);
   const refreshMasternodeUTXOs = useWalletStore(
     (s) => s.refreshMasternodeUTXOs,
@@ -144,7 +145,7 @@ export default function MasternodeScreen() {
       className="flex-1 bg-background"
       edges={["top", "bottom", "left", "right"]}
     >
-      <ScreenHeader title="Masternode" />
+      <ScreenHeader title="Masternode" onBack={() => router.back()} />
       <ScrollView
         className="flex-1"
         contentContainerClassName="px-5 pt-4 pb-8"

app/masternode.tsx

@@ -545,6 +545,7 @@ export default function WalletsScreen() {
       <ScreenHeader
         title="Wallets"
         subtitle={`${wallets.length} wallet${wallets.length !== 1 ? "s" : ""} - Tap to switch, long-press to delete`}
+        onBack={() => router.back()}
       />
       <ScrollView
         className="flex-1"

app/wallets.tsx

@@ -34,6 +34,7 @@
     "expo-crypto": "~55.0.0",
     "expo-font": "~55.0.0",
     "expo-haptics": "~55.0.0",
+    "expo-linear-gradient": "^55.0.13",
     "expo-linking": "~55.0.0",
     "expo-local-authentication": "~55.0.0",
     "expo-localization": "~55.0.0",

assets/home-hero.jpg

@@ -2,27 +2,49 @@
  * ScreenHeader — common header layout with centered title and side actions.
  */
 
-import { View, Text } from "react-native";
+import { View, Text, Pressable } from "react-native";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import { useTheme } from "@oxyhq/bloom/theme";
 
 interface ScreenHeaderProps {
   title: string;
   subtitle?: string;
   leftAction?: React.ReactNode;
   rightAction?: React.ReactNode;
+  /** Convenience: show a back-arrow on the left that calls this handler. */
+  onBack?: () => void;
 }
 
 export function ScreenHeader({
   title,
   subtitle,
   leftAction,
   rightAction,
+  onBack,
 }: ScreenHeaderProps) {
+  const theme = useTheme();
+
+  const resolvedLeft =
+    leftAction ??
+    (onBack ? (
+      <Pressable
+        onPress={onBack}
+        className="w-11 h-11 items-center justify-center rounded-full active:bg-surface"
+        accessibilityLabel="Back"
+        accessibilityRole="button"
+      >
+        <MaterialCommunityIcons
+          name="arrow-left"
+          size={24}
+          color={theme.colors.text}
+        />
+      </Pressable>
+    ) : null);
+
   return (
     <View className="flex-row items-center px-4 py-3">
       {/* Left action slot */}
-      <View className="w-12 items-start">
-        {leftAction ?? null}
-      </View>
+      <View className="w-12 items-start">{resolvedLeft}</View>
 
       {/* Center: title + subtitle */}
       <View className="flex-1 items-center">
@@ -37,9 +59,7 @@ export function ScreenHeader({
       </View>
 
       {/* Right action slot */}
-      <View className="w-12 items-end">
-        {rightAction ?? null}
-      </View>
+      <View className="w-12 items-end">{rightAction ?? null}</View>
     </View>
   );
 }