Expert guidance for building mobile apps with TypeScript, React Native, Expo, and modern UI patterns following best practices for performance, accessibility, and security.
This skill provides comprehensive guidance for developing mobile applications using TypeScript, React Native, and Expo, following industry best practices for code quality, performance, accessibility, and security.
Guides you through building high-quality React Native applications with Expo, covering code structure, TypeScript usage, UI/styling, navigation, state management, performance optimization, testing, security, and internationalization.
1. **Write concise, technical TypeScript code** with accurate examples
2. **Use functional and declarative programming patterns**; avoid classes
3. **Prefer iteration and modularization** over code duplication
4. **Use descriptive variable names** with auxiliary verbs (e.g., `isLoading`, `hasError`)
5. **Structure files consistently**:
- Exported component first
- Subcomponents
- Helper functions
- Static content
- Type definitions
6. **Follow Expo's official documentation** for project setup: https://docs.expo.dev/
1. **Use lowercase with dashes** for directories (e.g., `components/auth-wizard`)
2. **Favor named exports** for components
3. **Use clear, descriptive names** that indicate purpose and type
1. **Use TypeScript for all code**
2. **Prefer interfaces over types** for object shapes
3. **Avoid enums**; use maps or const objects instead
4. **Use functional components** with TypeScript interfaces
5. **Enable strict mode** in TypeScript for better type safety
6. **Define explicit return types** for functions when clarity is needed
1. **Use the `function` keyword** for pure functions
2. **Avoid unnecessary curly braces** in conditionals; use concise syntax for simple statements
3. **Use declarative JSX** patterns
4. **Use Prettier** for consistent code formatting
5. **Follow consistent indentation** and spacing
1. **Use Expo's built-in components** for common UI patterns and layouts
2. **Implement responsive design** with Flexbox and `useWindowDimensions` for screen size adjustments
3. **Use styled-components or Tailwind CSS** for component styling
4. **Implement dark mode support** using Expo's `useColorScheme`
5. **Ensure high accessibility (a11y) standards** using ARIA roles and native accessibility props
6. **Leverage react-native-reanimated and react-native-gesture-handler** for performant animations and gestures
1. **Use `SafeAreaProvider`** from `react-native-safe-area-context` to manage safe areas globally
2. **Wrap top-level components** with `SafeAreaView` to handle notches, status bars, and screen insets on iOS and Android
3. **Use `SafeAreaScrollView`** for scrollable content to respect safe area boundaries
4. **Avoid hardcoding padding or margins** for safe areas; rely on `SafeAreaView` and context hooks
1. **Minimize `useState` and `useEffect`** usage; prefer context and reducers for state management
2. **Use Expo's `AppLoading` and `SplashScreen`** for optimized app startup
3. **Optimize images**:
- Use WebP format where supported
- Include size data
- Implement lazy loading with `expo-image`
4. **Implement code splitting** and lazy loading for non-critical components using React's `Suspense` and dynamic imports
5. **Profile and monitor performance** using React Native's built-in tools and Expo's debugging features
6. **Avoid unnecessary re-renders** by memoizing components and using `useMemo` and `useCallback` appropriately
1. **Use `react-navigation`** for routing; follow best practices for stack, tab, and drawer navigators
2. **Leverage deep linking and universal links** for better user engagement
3. **Use dynamic routes with `expo-router`** for better navigation handling
4. **Implement proper navigation types** for type-safe navigation
1. **Use React Context and `useReducer`** for managing global state
2. **Leverage `react-query`** for data fetching and caching; avoid excessive API calls
3. **For complex state management**, consider using Zustand or Redux Toolkit
4. **Handle URL search parameters** using libraries like `expo-linking`
1. **Use Zod** for runtime validation and error handling
2. **Implement proper error logging** using Sentry or a similar service
3. **Prioritize error handling and edge cases**:
- Handle errors at the beginning of functions
- Use early returns for error conditions
- Avoid unnecessary else statements; use if-return pattern
- Implement global error boundaries
4. **Use `expo-error-reporter`** for logging and reporting errors in production
1. **Write unit tests** using Jest and React Native Testing Library
2. **Implement integration tests** for critical user flows using Detox
3. **Use Expo's testing tools** for running tests in different environments
4. **Consider snapshot testing** for components to ensure UI consistency
5. **Test on both iOS and Android** platforms
1. **Sanitize user inputs** to prevent XSS attacks
2. **Use `react-native-encrypted-storage`** for secure storage of sensitive data
3. **Ensure secure communication** with APIs using HTTPS and proper authentication
4. **Follow Expo's Security guidelines**: https://docs.expo.dev/guides/security/
5. **Validate all data** from external sources
1. **Use `react-native-i18n` or `expo-localization`** for internationalization
2. **Support multiple languages** and RTL layouts
3. **Ensure text scaling** and font adjustments for accessibility
4. **Externalize all user-facing strings**
1. Rely on **Expo's managed workflow** for streamlined development and deployment
2. Prioritize **Mobile Web Vitals**: Load Time, Jank, and Responsiveness
3. Use **`expo-constants`** for managing environment variables and configuration
4. Use **`expo-permissions`** to handle device permissions gracefully
5. Implement **`expo-updates`** for over-the-air (OTA) updates
6. Follow **Expo's best practices** for app deployment: https://docs.expo.dev/distribution/introduction/
7. Ensure **compatibility with iOS and Android** by testing extensively on both platforms
```typescript
import { SafeAreaView } from 'react-native-safe-area-context';
import { useWindowDimensions, StyleSheet } from 'react-native';
interface ProfileScreenProps {
userId: string;
}
export function ProfileScreen({ userId }: ProfileScreenProps) {
const { width } = useWindowDimensions();
const isLargeScreen = width > 768;
return (
<SafeAreaView style={styles.container}>
{/* Content respects safe areas automatically */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
```
```typescript
async function fetchUserData(userId: string) {
if (!userId) {
console.error('User ID is required');
return null;
}
try {
const response = await api.getUser(userId);
if (!response.ok) {
console.error('Failed to fetch user');
return null;
}
return response.data;
} catch (error) {
console.error('Error fetching user:', error);
return null;
}
}
```
```typescript
import { createContext, useReducer, useContext } from 'react';
interface AppState {
isLoading: boolean;
userData: User | null;
}
type AppAction =
| { type: 'SET_LOADING'; payload: boolean }
| { type: 'SET_USER'; payload: User };
function appReducer(state: AppState, action: AppAction): AppState {
switch (action.type) {
case 'SET_LOADING':
return { ...state, isLoading: action.payload };
case 'SET_USER':
return { ...state, userData: action.payload };
default:
return state;
}
}
const AppContext = createContext<{
state: AppState;
dispatch: React.Dispatch<AppAction>;
} | null>(null);
export function AppProvider({ children }: { children: React.ReactNode }) {
const [state, dispatch] = useReducer(appReducer, {
isLoading: false,
userData: null,
});
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
</AppContext.Provider>
);
}
export function useApp() {
const context = useContext(AppContext);
if (!context) {
throw new Error('useApp must be used within AppProvider');
}
return context;
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/expert-react-native-and-expo-development/raw