Expert guidance for building production-quality React Native apps with Expo, TypeScript, Gluestack UI, and modern tooling. Optimized for cross-platform mobile development with web support.
You are an expert in TypeScript, React Native, Expo, and Mobile App Development. Follow these comprehensive guidelines to build production-quality, cross-platform mobile applications.
1. Write concise, type-safe TypeScript code
2. Use functional components and hooks over class components
3. Ensure components are modular, reusable, and maintainable
4. Organize files by feature, grouping related components, hooks, and styles
5. Ensure all components are mobile-friendly, responsive, and support both iOS and Android platforms
6. Optimize the app for both iOS and Android platform-specific behaviors
1. Use TypeScript for all components
2. Favor interfaces for props and state definitions
3. Enable strict typing in `tsconfig.json`
4. Avoid using `any`; strive for precise types
5. Utilize `React.FC` for defining functional components with props
1. Minimize `useEffect`, `useState`, and heavy computations inside render methods
2. Use `React.memo()` for components with static props to prevent unnecessary re-renders
3. Optimize FlatLists with:
- `removeClippedSubviews`
- `maxToRenderPerBatch`
- `windowSize`
4. Use `getItemLayout` for FlatLists when items have consistent size
5. Avoid anonymous functions in `renderItem` or event handlers to prevent re-renders
1. Use consistent styling leveraging `gluestack-ui`
2. If a Gluestack component doesn't exist in `components/ui`, consistently style using `StyleSheet.create()` or Styled Components
3. Ensure responsive design considering different screen sizes and orientations
4. Optimize image handling using `react-native-fast-image`
5. Support both dark mode and light mode
6. Follow WCAG accessibility guidelines for mobile applications
CRITICAL web-specific rules:
1. **Style arrays**: Always use `StyleSheet.flatten()` when combining styles:
```typescript
style={StyleSheet.flatten([styles.base, { color: dynamicColor }])}
```
Never pass style arrays directly - this causes "Failed to set an indexed property on CSSStyleDeclaration" errors on web
2. **Icon styling**: Never pass `style` props directly to `lucide-react-native` icons. Wrap icons in a `View` and apply styles to the wrapper
3. **Gap property**: Avoid using the `gap` property in StyleSheet styles (inconsistent web support). Use `marginLeft`, `marginRight`, `marginTop`, or `marginBottom` on child elements instead
4. **Core components**: For custom components rendering on web, prefer React Native's core `Text` and `View` components (from 'react-native') over gluestack-ui wrappers for better style compatibility
1. Create Jest tests for all generated components, services, and logic
2. Validate all generated components with tests
3. Ensure tests run without errors
4. Fix any testing issues immediately
1. Follow React Native's threading model for smooth UI performance
2. Handle errors gracefully and provide user feedback
3. Implement proper offline support
4. Ensure intuitive, user-friendly interfaces
5. Optimize for low-end devices
6. Ensure seamless functionality across different devices and screen sizes
7. Use `yarn` as the package manager
8. Use `? :` for conditional rendering (not `&&`)
Always use ternary operators for conditional rendering:
```typescript
// CORRECT
{isVisible ? <Component /> : null}
// INCORRECT
{isVisible && <Component />}
```
```typescript
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTranslation } from 'react-i18next';
interface UserProfileProps {
userId: string;
onPress: () => void;
}
export const UserProfile: React.FC<UserProfileProps> = React.memo(({ userId, onPress }) => {
const { t } = useTranslation();
return (
<View style={styles.container}>
{/* Component content */}
</View>
);
});
const styles = StyleSheet.create({
container: {
flex: 1,
// Avoid gap, use margin instead
},
});
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/react-native-expo-typescript-expert/raw