skills.rest
AmirEmad11
AmirEmad11COMMUNITY
Explore all skills by this author →
GitHub

mobile-ui

Implements native Expo UI patterns for tabs, sheets, keyboards, streaming chat, and app icons.

Updated Apr 20, 2026
Search Tags:#react native#app icon#expo#native tabs#keyboard handling#streaming chat#modal sheets
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill mobile-ui-amiremad11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ui
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/mobile-ui
Command: npx skills add https://github.com/AmirEmad11/instabot --skill mobile-ui-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-native-keyboard-controller, expo-router, expo-blur, expo-symbols, expo-glass-effect, react-native-safe-area-context, openai, and includes references (resource) components.

What problem does it solve? Building polished mobile interfaces in Expo requires handling many platform-specific details—keyboard avoidance, native tab bars, modal presentations, and streaming chat UIs—where small mistakes cause broken layouts, dismissed keyboards, or blank screens. This Skill provides tested patterns and troubleshooting guidance for these common Expo UI challenges. ## Core Features & Use Cases - Native Tabs with Liquid Glass: Implement iOS 26+ native tab bars via expo-router/unstable-native-tabs with BlurView fallbacks for older iOS, Android, and web. - Keyboard Handling: Use react-native-keyboard-controller patterns for forms, chat screens, and lists with inputs, avoiding common pitfalls like nested KeyboardAvoidingViews. - Sheets & Modals: Choose correctly between formSheet and modal presentations, including multi-step auth flows with nested navigation. - Streaming Chat UI: Build SSE-based chat with expo/fetch, including typing indicators, unique message IDs, and state persistence patterns. - App Icon Generation: Guidelines for generating text-free app icons and splash screens with AI image generation. - Use Case: When building a chat screen in an Expo app, apply the streaming fetch pattern, inverted FlatList configuration, and keyboard persistence rules to avoid messages disappearing or the keyboard dismissing on send. ## Quick Start Read the relevant reference file for the UI pattern you are implementing, such as keyboard handling for a login form or sheets for an auth flow, and apply its code patterns to your Expo screen.

Frequently Asked Questions about mobile-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle the keyboard in Expo forms?▼

Use KeyboardAwareScrollViewCompat from react-native-keyboard-controller for screens with multiple text inputs like login or signup forms. Set bottomOffset for spacing below the focused input and keyboardShouldPersistTaps="handled" so buttons remain tappable while the keyboard is open.

How do I stream OpenAI responses in an Expo app?▼

Import fetch from expo/fetch rather than the global fetch, then read the response body with getReader and decode SSE lines with TextDecoder. On the server, set text/event-stream headers, call res.flushHeaders(), and add the X-Accel-Buffering: no header to prevent proxy buffering.

Should I use formSheet or modal presentation in Expo Router?▼

Use formSheet for single-screen presentations like confirmations or settings panels with detent heights. Use modal for any flow with nested navigation such as auth wizards, because formSheet has a known bug rendering nested Stack content with zero height.

Does NativeTabs work on Android and web?▼

NativeTabs supports Android with Material 3 bottom navigation and a five-tab maximum, but web requires a fallback to classic Tabs with explicit Platform.OS checks. Use a solid View background on web since BlurView is unsupported, and Feather icons instead of SymbolView.

Why does the keyboard dismiss when I press send in my chat app?▼

The keyboard dismisses because the input loses focus on button press. Fix it by setting blurOnSubmit={false} on the TextInput, keyboardShouldPersistTaps="handled" on the FlatList, and calling inputRef.current?.focus() after handling the send action.

Why is my FlatList typing indicator appearing in the wrong position?▼

In an inverted FlatList, ListFooterComponent renders at the top and ListHeaderComponent renders at the bottom near the newest messages. Use ListHeaderComponent for the typing indicator so it appears where new messages arrive.

Related Skills

Explore More Software Engineering Skills→
CYRUS-pintoCYRUS-pinto

expo-router

Implements file-based navigation and routing for Expo Router apps.

Community
Intermediate
raphaelmansraphaelmans

expo-deployment

Deploy Expo apps to iOS, Android, web, and API routes via EAS.

Community
Advanced
heaptracetechnologyheaptracetechnology
13

mobile-ui

Build platform-adaptive mobile UI components across React Native, Flutter, and SwiftUI.

Community
Advanced
SaberAlouiSaberAloui

mobile-ui

Implement native Expo UI patterns for tabs, sheets, keyboards, streaming chat, and app icons.

Community
Advanced