How does it handle platform differences?

The skill can either use the Platform.select API for small style/logic variations or generate separate .ios.tsx and .android.tsx files for distinct platform implementations.

Does it include performance optimizations for lists?

Absolutely. It generates FlatList configurations with optimized props like removeClippedSubviews, maxToRenderPerBatch, and windowSize to ensure smooth scrolling.

Does this skill support modern React features?

Yes, it generates modern functional components using React Hooks (useState, useEffect, useCallback) for optimal performance and cleaner code.

Can I specify a preferred styling library?

While it defaults to the native StyleSheet API for maximum performance, you can request specific libraries like styled-components or NativeWind.

React Native Component Generator

Name: React Native Component Generator
Author: Dexploarer

byDexploarer

•

Mobile Development

Generates production-grade React Native components with platform-specific optimizations, TypeScript support, and mobile-first patterns.

概要

The React Native Component Generator is a specialized skill designed to accelerate mobile app development by scaffolding high-quality UI components. It automates the creation of type-safe components that follow platform-specific best practices for iOS and Android, including the use of Platform.select and split file extensions (.ios.tsx/.android.tsx). From optimized FlatLists and animated transitions to complex form inputs and native module wrappers, this skill ensures your mobile codebase remains performant, accessible, and maintainable while significantly reducing boilerplate code.

主な機能

2 GitHub stars
Performance-optimized list patterns using FlatList and SectionList
Built-in mobile animation patterns using the Animated API
TypeScript-first scaffolding for type-safe mobile development
Platform-specific file and logic generation (iOS/Android/Web)
Standardized styling with StyleSheet and mobile-ready accessibility props

ユースケース

Creating complex platform-specific components like native date pickers or headers
Scaffolding a custom UI design system for a new React Native project
Implementing high-performance lists with pull-to-refresh and infinite scroll functionality

概要

主な機能

2 GitHub stars
Performance-optimized list patterns using FlatList and SectionList
Built-in mobile animation patterns using the Animated API
TypeScript-first scaffolding for type-safe mobile development
Platform-specific file and logic generation (iOS/Android/Web)
Standardized styling with StyleSheet and mobile-ready accessibility props

ユースケース

Creating complex platform-specific components like native date pickers or headers
Scaffolding a custom UI design system for a new React Native project
Implementing high-performance lists with pull-to-refresh and infinite scroll functionality