1k-ui-recipes
OneKey UI Recipes
Bite-sized solutions for common UI issues.
Quick Reference
| Recipe | Guide | Key Points |
|---|---|---|
| iOS Tab Bar Scroll Offset | ios-tab-bar-scroll-offset.md | Use useScrollContentTabBarOffset for paddingBottom on iOS tab pages |
| Smooth State Transitions | start-view-transition.md | Wrap heavy state updates in startViewTransition for fade on web |
| Horizontal Scroll in Collapsible Tab Headers | collapsible-tab-horizontal-scroll.md | Bidirectional Gesture.Pan() + programmatic scrollTo via CollapsibleTabContext |
| Android Bottom Tab Touch Interception | android-bottom-tab-touch-intercept.md | Temporary — GestureDetector + Gesture.Tap() in .android.tsx to bypass native tab bar touch stealing |
| Keyboard Avoidance for Input Fields | keyboard-avoidance.md | KeyboardAwareScrollView auto-scroll, Footer animated padding, useKeyboardHeight / useKeyboardEvent hooks |
| iOS Overlay Navigation Freeze | ios-overlay-navigation-freeze.md | Use resetAboveMainRoute() instead of sequential goBack() to close overlays before navigating |
| Web keyboardDismissMode Cross-Tab Blur | — | Never use on-drag on web; it globally blurs inputs via TextInputState |
Critical Rules Summary
1. iOS Tab Bar Scroll Content Offset
More from onekeyhq/app-monorepo
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
109implementing-figma-designs
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
771k-coding-patterns
Coding patterns and best practices — React components, promise handling, and TypeScript conventions.
691k-code-quality
Code quality standards — lint (eslint/oxlint), type check (tsc), pre-commit hooks, and comment conventions. All comments must be in English.
681k-date-formatting
Date and time formatting — use OneKey dateUtils (formatDate/formatTime) instead of native JS date methods.
681k-git-workflow
Git workflow and conventions — branching, commit messages, and PR creation.
68