Keep the Import Wallet Next button clear of the keyboard

[j0ntz]

Description

Asana task

The Import Wallet scene rendered everything, including the Next button, inside a
scroll view that did not react to the keyboard. Opening the keyboard to type a
seed hid the button behind it, along with the per-asset Import Options inputs
(the Zcash / Pirate Chain birthday height). A wrapped 12- or 24-word phrase or a
short device made it worse.

The scene now shrinks to the space above the keyboard (SceneWrapper avoidKeyboard, the pattern ~20 other scenes already use, backed by
react-native-keyboard-controller) and its content lives in a real
ScrollView. Because the keyboard is part of the layout, the scroll viewport
ends above it, so the bottom of the scene is reachable; on the unchanged build
the viewport's bottom edge sits underneath the keyboard and no amount of
scrolling reveals Next.

On a screen the size QA reported against (iPhone Air, 420x912pt), a 24-word phrase
makes the content taller than the room the keyboard leaves. Two things went wrong
there, and both are fixed by removing something rather than adding one:

• The scene left a band of dead space above the keyboard. The scene container
  carried a uniform margin: rem(0.5), so the scroll viewport stopped short of the
  scene's bottom edge. With the keyboard open that edge IS the top of the keyboard,
  and the margin became space the content could never scroll into: the lowest visible
  row sat above an empty strip. The container now takes marginTop and
  marginHorizontal only, so the viewport ends flush against the keyboard.
• The button kept 3 rem of clearance it did not need. ButtonsView's
  parentType="scene" layout holds the button off the screen's bottom edge. An open
  keyboard supplies that separation itself, exactly the reason SceneWrapper already
  collapses its bottom safe-area inset. A new opt-in keyboardOpen prop drops the
  margin while the keyboard is up. The prop defaults to false, so the other
  SceneButtons and parentType="scene" call sites are unchanged.

The scene's spacing is also fixed rather than elastic. An earlier revision grew the
scroll content container to the viewport and let the logo block flex into whatever
room was left, which meant the scene spread out with an empty field and compressed
with a full one. The content container is now content-sized (flexGrow: 0), the logo
keeps a fixed 1 rem above and below, and SceneButtons stays inside the scroll
content in a plain wrapper View so its own bottom-anchoring flexGrow has nothing
to resolve against. The logo sits the same distance from the header, and the button
the same distance from the seed box, whether the field holds nothing or 24 words.

The seed field still never collapses: FilledTextInput hardcodes flexGrow: 1 /
flexShrink: 1 on its containers when multiline, and a plain non-shrinking View
around the field in this scene stops that. No change to FilledTextInput itself, so
TextInputModal's fullHeight multiline mode and SignMessageScene's
numberOfLines={4} keep the fill behavior they want.

When the content genuinely cannot fit, the scene scrolls to reach Next, which is the
behavior the task's review asked for.

The maestro import flows used to dismiss the keyboard before tapping Next. That
workaround is gone on both platforms in both copies
(maestro/common/import-wallets.yaml,
maestro/07-wallets/C000029a-migrate-wallets.yaml): Next is reachable and
tappable with the keyboard up, and the platform-conditional hideKeyboard is
replaced by a scrollUntilVisible on Next, since a long phrase can still push
the button past the bottom of the scroll viewport. Both the iOS and the Android
form were driven on device, which the evidence below shows.

One Android limitation stays, and it predates this PR. numberOfLines is an
Android-only prop that React Native turns into EditText.setLines, so the seed
box holds a fixed line count whether it is empty or full; iOS ignores the prop
and sizes the box to its text. A caller can only choose the count: dropping the
prop falls back to FilledTextInput's own default of 20 lines, and 0 collapses
the box to a single line that clips the phrase. Both were tried on an emulator
and are worse than the current 10. Content sizing on Android would mean changing
FilledTextInput to stop forwarding the prop, which is out of scope here.

ButtonsView.tsx carries a header asking that changes be synced with
edge-login-ui-rn. The keyboardOpen prop is additive and defaults to the current
behavior, but it still owes a sync PR there.

Asana: https://app.asana.com/1/9976422036640/project/1213880789473005/task/1217525813318788

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

• Yes
• No

Dependencies

none

Requirements

If you have made any visual changes to the GUI. Make sure you have:

• Tested on iOS device
• Tested on Android device
• Tested on small-screen device (iPod Touch)
• Tested on large-screen device (tablet)

Both platforms were driven on the current revision, and the frames in the evidence
comments below are from it.

iOS, iPhone 16 Pro Max simulator (iOS 18.6): the 24-word phrase typed through the
on-screen keyboard, Next tapped with the keyboard still up, and the import carried
through to the Create Wallets completion scene. The BTC + ZEC configuration adds the
Zcash birthday field and makes the content taller than the room the keyboard leaves,
which is the case that shows the scroll viewport ending flush against the keyboard:
scrolled to the end, the last row sits at the keyboard's top edge instead of above an
empty strip. The last evidence frame is that same scene with the pre-fix bottom
margin temporarily restored, for the comparison.

Android, emulator (Android 16): the same import driven to the Create Wallets scene
with the keyboard up, and the reverted maestro step sequence (scrollUntilVisible on
Next, replacing the platform-conditional hideKeyboard) run end to end.

Not exercised on this revision: iPhone 13 mini and iPhone Air (a run can only drive
its own simulator), a tablet, and the BTC + ZEC import past the scene to completion.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7e779e8. Configure here.}

[j0ntz]

📸🪓 Test evidence (followup: seed field must not collapse)

🪓 Hack-forced evidence: the two iPhone 13 mini frames were captured with the seed text pre-filled + autoFocus, and the scrolled one with a one-off scrollToEnd, because the maestro gate only drives this session's slot sim (16 Pro Max); the layout itself is unforced and the hacks were reverted. Temporary uncommitted edit, reverted before commit; the marked frames prove the rendering, not the trigger.

btc zec seed typed

btc zec next scrolled

btc only seed typed

btc only next scrolled

btc only imported

🪓 HACK-FORCED: mini btc seed

🪓 HACK-FORCED: mini btc next scrolled

Captured by the agent's in-app test run (build-and-test).

[j0ntz]

📸 Test evidence, iPhone 13 mini re-run (supersedes the earlier comment's mini frames)

mini btc seed typed

mini btc next scrolled

Captured by the agent's in-app test run (build-and-test).

[j0ntz]

📸 Test evidence: gap between Next and the keyboard (iPhone 16 Pro Max, iOS 18.6)

import keyboard open

scrolled to end

keyboard closed

import success

Captured by the agent's in-app test run (build-and-test).

[claude]

Claude Code Review

Claude Code Review is paused for this repository. To reconnect it, an admin of this repository's GitHub organization (or the account owner, for personal repositories) who can also manage your Claude organization's Code Review settings needs to re-link GitHub in Code Review settings. This is a one-time step.

_{Tip: disable this comment in your organization's Code Review settings.}

[j0ntz]

📸🪓 Test evidence (keyboard-aware button clearance)

🪓 Hack-forced evidence: The iPhone Air frame is hack-forced: the maestro gate only permits driving this session's own simulator, so that scene was reached with an uncommitted pre-filled seed and autoFocus rather than by tapping. The layout is real; the hack was reverted (git status clean). No gesture was sent on that device. Temporary uncommitted edit, reverted before commit; the marked frames prove the rendering, not the trigger.

btc keyboard up next clear

btc import success

keyboard closed idle

btczec before next below keyboard

btczec after

🪓 HACK-FORCED: iphone air after

Captured by the agent's in-app test run (build-and-test).

[j0ntz]

📸 Test evidence (iOS 16 Pro Max sim + Android emulator, restored layout)

ios empty scene

ios 24 words next clear of keyboard

ios import accepted

android empty scene

android 24 words keyboard up

android scrolled next clear

android import accepted

Captured by the agent's in-app test run (build-and-test).

[j0ntz]

📸🪓 Test evidence (iOS, dead band between scene bottom and keyboard)

🪓 Hack-forced evidence: temporarily restored the pre-fix marginBottom: theme.rem(0.5) on the CreateWalletImportScene container to capture the dead band; reverted, tree clean at 35dd1c7. Temporary uncommitted edit, reverted before commit; the marked frames prove the rendering, not the trigger.

iOS BTC empty scene

iOS BTC 24 word phrase keyboard up

iOS BTC import accepted Create Wallets

iOS BTC plus ZEC keyboard up content continues under keyboard

iOS BTC plus ZEC scrolled to end viewport flush with keyboard

🪓 HACK-FORCED: pre fix bottom margin dead band same scroll

Captured by the agent's in-app test run (build-and-test).