1k-ui-recipes

What problem does it solve?

Provides bite-sized UI recipes and patterns to fix common cross-platform UI issues in React Native and web components, enabling consistent and polished interfaces.

Core Features & Use Cases

• iOS Tab Bar Scroll Offset: dynamic padding trick to prevent content from being hidden behind the bottom tab bar.
• Smooth State Transitions with startViewTransition: defer heavy re-renders to yield smooth updates on web with a fallback on native.
• Horizontal Scroll in Collapsible Tab Headers: bidirectional gestures and programmatic tab content control to keep header and content scrolls in sync.
• Android Bottom Tab Touch Interception: a temporary GestureDetector-based workaround to bypass native tab bar touch interception (Android only).
• Keyboard Avoidance for Input Fields: keyboard-aware views and animated padding to keep inputs visible when the keyboard is shown.
• iOS Overlay Navigation Freeze: use resetAboveMainRoute to atomically clear overlay routes and avoid navigation freeze.
• Web: keyboardDismissMode handling: avoid global blur side-effects by gating on native vs web, and pausing background carousels when not visible.

Quick Start

Try applying the included UI recipes to your app by wiring up the patterns to your tab pages, headers, and inputs for a smoother cross-platform experience.