skills.rest
hontauadrian
hontauadrianCOMMUNITY
Explore all skills by this author →
GitHub

mobile-patterns

Implements React Native and Expo patterns for keyboard handling, theming, lists, and tenant configuration.

Updated Apr 7, 2026
Search Tags:#theming#accessibility#react native#expo router#white-label#flashlist#keyboard handling
One-click install
npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill mobile-patterns-hontauadrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-patterns
Source: https://github.com/hontauadrian/sfx-app-empty-test/tree/main/.overstory/claude-profiles/merger/skills/mobile-patterns
Command: npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill mobile-patterns-hontauadrian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mobile app development with React Native and Expo involves recurring decisions about keyboard handling, list performance, theming, navigation, and multi-tenant white-labeling. This Skill codifies those architectural patterns so screens and components follow consistent, proven conventions instead of ad-hoc solutions. ## Core Features & Use Cases - Keyboard Handling Standards: Enforces react-native-keyboard-controller (KeyboardProvider, KeyboardAwareScrollView, KeyboardStickyView) across all screens with text inputs, including FlashList integration via renderScrollComponent. - Theming & Tenant System: Defines a design token workflow (colors, spacing, fontSizes via useTheme) and a white-label tenant structure with per-tenant Colors, Fonts, TextStyles, and Assets files. - Performance & Accessibility Rules: Mandates FlashList with estimatedItemSize for large datasets, React.memo for list items, and accessibilityLabel/accessibilityRole on all interactive elements. - Use Case: When building a new login screen in an Expo Router app, apply this Skill to wire up KeyboardAwareScrollView, theme tokens, auth redirect logic, and error handling through the UIModel pattern. ## Quick Start Apply the mobile-patterns skill to build a new React Native screen with keyboard-aware inputs, theme tokens, and FlashList following the project conventions.

Frequently Asked Questions about mobile-patterns

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

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

Use react-native-keyboard-controller instead of KeyboardAvoidingView. Wrap the app root in KeyboardProvider, then use KeyboardAwareScrollView around form inputs with a bottomOffset prop to control spacing between the keyboard and the focused input.

FlashList vs FlatList for React Native lists?▼

Use FlashList for datasets over 20 items and always provide estimatedItemSize for accurate layout recycling. Reserve FlatList for short, static lists, and never render large lists inside a plain ScrollView.

How do I use FlashList with keyboard-aware scrolling?▼

Pass a custom renderScrollComponent to FlashList that forwards props and ref to KeyboardAwareScrollView from react-native-keyboard-controller. This keeps text inputs inside list items visible when the keyboard opens.

How do I add a new white-label tenant in an Expo app?▼

Create a tenants/[newTenant] directory with Colors, Fonts, TextStyles, and Assets files, add font and image assets, register the tenant in features/appConfig/index.ts, and set TENANT in the Expo config. Access values only through useTheme or CONFIG.

Should React Native styles use StyleSheet or inline styles?▼

Use StyleSheet.create in a styles.ts file for structural layout only, with no design tokens. Apply dynamic theme values like colors and spacing inline as a second array item, sourced from useTheme.

What accessibility props are required for React Native components?▼

Every TouchableOpacity, Pressable, and TextInput needs accessibilityLabel and accessibilityRole. Images need descriptive labels, decorative images need accessibilityElementsHidden, and form inputs must pair with a visible label rather than placeholder-only text.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
ricablericable

expo-deployment

Deploy Expo applications for iOS, Android, and web releases.

Community
Intermediate
omakeiomakei
2

nuxt-features

Modularize domain logic into feature-based Nuxt modules with queries, mutations, and actions.

Community
Intermediate
luthebaoluthebao
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate