1k-ui-recipes
Installation
SKILL.md
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 |
| iOS Modal Fabric Frame Animation | ios-modal-fabric-frame-animation.md | Fabric recycled views retain stale frames; wrap updateLayoutMetrics in performWithoutAnimation during modal transition |
| Android Background Thread Timers + Microtasks | android-background-thread-timers-microtasks.md | Bg Hermes runtime has no setTimeout and never drains the microtask queue — install JSI timers + call rt->drainMicrotasks() (fixed in @onekeyfe/react-native-background-thread 3.0.18) |