Skip to content

Use KeyboardStickyView for crypto input action bars on iOS #29270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisnojima merged 2 commits into from
May 31, 2026
Merged

Use KeyboardStickyView for crypto input action bars on iOS #29270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f46dba4
Use KeyboardStickyView for crypto input action bars on iOS
chrisnojima May 31, 2026
5692d31
try codegraph
chrisnojima May 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion .claude/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,14 @@
"Bash(yarn tsc:*)",
"Bash(yarn ios:pod*)",
"Bash(yarn coverage:*)",
"Bash(yarn maestro*)"
"Bash(yarn maestro*)",
"mcp__codegraph__codegraph_search",
"mcp__codegraph__codegraph_context",
"mcp__codegraph__codegraph_callers",
"mcp__codegraph__codegraph_callees",
"mcp__codegraph__codegraph_impact",
"mcp__codegraph__codegraph_node",
"mcp__codegraph__codegraph_status"
]
},
"hooks": {
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,3 +94,5 @@ shared/tests/results/
CLAUDE.md
.tsOuts
docs
.codegraph
.mcp.json
44 changes: 31 additions & 13 deletions shared/crypto/decrypt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as React from 'react'
import * as T from '@/constants/types'
import * as TestIDs from '@/tests/e2e/shared/test-ids'
import {CryptoBanner, DragAndDrop, Input, InputActionsBar} from './input'
import {KeyboardStickyView} from 'react-native-keyboard-controller'
import {CryptoOutput, CryptoOutputActionsBar, CryptoSignedSender} from './output'
import {
beginRun,
Expand Down Expand Up @@ -138,6 +139,8 @@ export const DecryptInput = (_props: unknown) => {
const {params} = useRoute() as RootRouteProps<'decryptTab'>
const controller = useDecryptState(params)
const navigateAppend = C.Router2.navigateAppend
const insets = Kb.useSafeAreaInsets()
const stickyOffset = React.useMemo(() => ({closed: -insets.bottom, opened: 0}), [insets.bottom])

const onRun = () => {
const f = async () => {
Expand All @@ -149,8 +152,31 @@ export const DecryptInput = (_props: unknown) => {
C.ignorePromise(f())
}

const contents = (
<>
if (!isMobile) {
return (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Input
allowDirectories={false}
emptyInputWidth={inputEmptyWidth}
fileIcon={inputFileIcon}
inputPlaceholder={inputPlaceholder}
state={controller.state}
textInputType="cipher"
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
</Kb.Box2>
)
}

return (
<Kb.Box2
direction="vertical"
fullHeight={true}
relative={true}
testID={TestIDs.CRYPTO_DECRYPT_INPUT}
>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Input
allowDirectories={false}
Expand All @@ -162,17 +188,9 @@ export const DecryptInput = (_props: unknown) => {
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
</>
)

return isMobile ? (
<Kb.KeyboardAvoidingView2 testID={TestIDs.CRYPTO_DECRYPT_INPUT}>
{contents}
<InputActionsBar runLabel="Decrypt" onRun={onRun} />
</Kb.KeyboardAvoidingView2>
) : (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
{contents}
<KeyboardStickyView offset={stickyOffset}>
<InputActionsBar runLabel="Decrypt" onRun={onRun} />
</KeyboardStickyView>
</Kb.Box2>
)
}
Expand Down
89 changes: 55 additions & 34 deletions shared/crypto/encrypt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import * as T from '@/constants/types'
import Recipients from './recipients'
import {openURL} from '@/util/misc'
import {CryptoBanner, DragAndDrop, Input, InputActionsBar} from './input'
import {KeyboardStickyView} from 'react-native-keyboard-controller'
import {CryptoOutput, CryptoOutputActionsBar, CryptoSignedSender, OutputInfoBanner} from './output'
import {
type CommonOutputRouteParams,
Expand Down Expand Up @@ -449,6 +450,8 @@ const EncryptInputBody = ({params}: {params?: EncryptRouteParams}) => {
const blurCBRef = React.useRef(() => {})
const navigateAppend = C.Router2.navigateAppend
const appendEncryptRecipientsBuilder = C.Router2.appendEncryptRecipientsBuilder
const insets = Kb.useSafeAreaInsets()
const stickyOffset = React.useMemo(() => ({closed: -insets.bottom, opened: 0}), [insets.bottom])

const onRun = () => {
const f = async () => {
Expand All @@ -460,32 +463,46 @@ const EncryptInputBody = ({params}: {params?: EncryptRouteParams}) => {
C.ignorePromise(f())
}

const options = isMobile ? (
<InputActionsBar runLabel="Encrypt" blurCBRef={blurCBRef} onRun={onRun}>
<EncryptOptionsPanel
hasRecipients={controller.state.meta.hasRecipients}
hasSBS={controller.state.meta.hasSBS}
hideIncludeSelf={controller.state.meta.hideIncludeSelf}
includeSelf={controller.state.options.includeSelf}
inProgress={controller.state.inProgress}
setEncryptOptions={controller.setEncryptOptions}
sign={controller.state.options.sign}
/>
</InputActionsBar>
) : (
<EncryptOptionsPanel
hasRecipients={controller.state.meta.hasRecipients}
hasSBS={controller.state.meta.hasSBS}
hideIncludeSelf={controller.state.meta.hideIncludeSelf}
includeSelf={controller.state.options.includeSelf}
inProgress={controller.state.inProgress}
setEncryptOptions={controller.setEncryptOptions}
sign={controller.state.options.sign}
/>
)
if (!isMobile) {
return (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Recipients
recipients={controller.state.recipients}
inProgress={controller.state.inProgress}
onAddRecipients={appendEncryptRecipientsBuilder}
onClearRecipients={controller.clearRecipients}
/>
<Input
allowDirectories={true}
emptyInputWidth={inputEmptyWidth}
fileIcon={inputFileIcon}
inputPlaceholder={inputPlaceholder}
state={controller.state}
textInputType="plain"
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
<EncryptOptionsPanel
hasRecipients={controller.state.meta.hasRecipients}
hasSBS={controller.state.meta.hasSBS}
hideIncludeSelf={controller.state.meta.hideIncludeSelf}
includeSelf={controller.state.options.includeSelf}
inProgress={controller.state.inProgress}
setEncryptOptions={controller.setEncryptOptions}
sign={controller.state.options.sign}
/>
</Kb.Box2>
)
}

const content = (
<>
return (
<Kb.Box2
direction="vertical"
fullHeight={true}
relative={true}
testID={TestIDs.CRYPTO_ENCRYPT_INPUT}
>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Recipients
recipients={controller.state.recipients}
Expand All @@ -504,15 +521,19 @@ const EncryptInputBody = ({params}: {params?: EncryptRouteParams}) => {
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
{options}
</>
)

return isMobile ? (
<Kb.KeyboardAvoidingView2 testID={TestIDs.CRYPTO_ENCRYPT_INPUT}>{content}</Kb.KeyboardAvoidingView2>
) : (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
{content}
<KeyboardStickyView offset={stickyOffset}>
<InputActionsBar runLabel="Encrypt" blurCBRef={blurCBRef} onRun={onRun}>
<EncryptOptionsPanel
hasRecipients={controller.state.meta.hasRecipients}
hasSBS={controller.state.meta.hasSBS}
hideIncludeSelf={controller.state.meta.hideIncludeSelf}
includeSelf={controller.state.options.includeSelf}
inProgress={controller.state.inProgress}
setEncryptOptions={controller.setEncryptOptions}
sign={controller.state.options.sign}
/>
</InputActionsBar>
</KeyboardStickyView>
</Kb.Box2>
)
}
Expand Down
42 changes: 31 additions & 11 deletions shared/crypto/sign.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import * as T from '@/constants/types'
import * as TestIDs from '@/tests/e2e/shared/test-ids'
import {openURL} from '@/util/misc'
import {CryptoBanner, DragAndDrop, Input, InputActionsBar} from './input'
import {KeyboardStickyView} from 'react-native-keyboard-controller'
import {CryptoOutput, CryptoOutputActionsBar, CryptoSignedSender, OutputInfoBanner} from './output'
import {
beginRun,
Expand Down Expand Up @@ -147,6 +148,8 @@ export const SignInput = (_props: unknown) => {
const controller = useSignState(params)
const blurCBRef = React.useRef(() => {})
const navigateAppend = C.Router2.navigateAppend
const insets = Kb.useSafeAreaInsets()
const stickyOffset = React.useMemo(() => ({closed: -insets.bottom, opened: 0}), [insets.bottom])

const onRun = () => {
const f = async () => {
Expand All @@ -158,8 +161,31 @@ export const SignInput = (_props: unknown) => {
C.ignorePromise(f())
}

const content = (
<>
if (!isMobile) {
return (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Input
allowDirectories={true}
emptyInputWidth={inputEmptyWidth}
fileIcon={inputFileIcon}
inputPlaceholder={inputPlaceholder}
state={controller.state}
textInputType="plain"
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
</Kb.Box2>
)
}

return (
<Kb.Box2
direction="vertical"
fullHeight={true}
relative={true}
testID={TestIDs.CRYPTO_SIGN_INPUT}
>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Input
allowDirectories={true}
Expand All @@ -172,15 +198,9 @@ export const SignInput = (_props: unknown) => {
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
{isMobile ? <InputActionsBar runLabel="Sign" blurCBRef={blurCBRef} onRun={onRun} /> : null}
</>
)

return isMobile ? (
<Kb.KeyboardAvoidingView2 testID={TestIDs.CRYPTO_SIGN_INPUT}>{content}</Kb.KeyboardAvoidingView2>
) : (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
{content}
<KeyboardStickyView offset={stickyOffset}>
<InputActionsBar runLabel="Sign" blurCBRef={blurCBRef} onRun={onRun} />
</KeyboardStickyView>
</Kb.Box2>
)
}
Expand Down
42 changes: 31 additions & 11 deletions shared/crypto/verify.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as React from 'react'
import * as T from '@/constants/types'
import * as TestIDs from '@/tests/e2e/shared/test-ids'
import {CryptoBanner, DragAndDrop, Input, InputActionsBar} from './input'
import {KeyboardStickyView} from 'react-native-keyboard-controller'
import {CryptoOutput, CryptoOutputActionsBar, CryptoSignedSender} from './output'
import {
beginRun,
Expand Down Expand Up @@ -138,6 +139,8 @@ export const VerifyInput = (_props: unknown) => {
const {params} = useRoute() as RootRouteProps<'verifyTab'>
const controller = useVerifyState(params)
const navigateAppend = C.Router2.navigateAppend
const insets = Kb.useSafeAreaInsets()
const stickyOffset = React.useMemo(() => ({closed: -insets.bottom, opened: 0}), [insets.bottom])

const onRun = () => {
const f = async () => {
Expand All @@ -149,8 +152,31 @@ export const VerifyInput = (_props: unknown) => {
C.ignorePromise(f())
}

const content = (
<>
if (!isMobile) {
return (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Input
allowDirectories={false}
emptyInputWidth={inputEmptyWidth}
fileIcon={inputFileIcon}
inputPlaceholder={inputPlaceholder}
state={controller.state}
textInputType="cipher"
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
</Kb.Box2>
)
}

return (
<Kb.Box2
direction="vertical"
fullHeight={true}
relative={true}
testID={TestIDs.CRYPTO_VERIFY_INPUT}
>
<CryptoBanner infoMessage={bannerMessage} state={controller.state} />
<Input
allowDirectories={false}
Expand All @@ -162,15 +188,9 @@ export const VerifyInput = (_props: unknown) => {
onSetInput={controller.setInput}
onClearInput={controller.clearInput}
/>
{isMobile ? <InputActionsBar runLabel="Verify" onRun={onRun} /> : null}
</>
)

return isMobile ? (
<Kb.KeyboardAvoidingView2 testID={TestIDs.CRYPTO_VERIFY_INPUT}>{content}</Kb.KeyboardAvoidingView2>
) : (
<Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
{content}
<KeyboardStickyView offset={stickyOffset}>
<InputActionsBar runLabel="Verify" onRun={onRun} />
</KeyboardStickyView>
</Kb.Box2>
)
}
Expand Down