Expert guidance for TypeScript, React Native, Expo development following Resgrid Dispatch conventions with gluestack-ui, multi-platform support, and strict code quality standards.
Expert guidance for building mobile applications with TypeScript, React Native, and Expo, following Resgrid Dispatch conventions and best practices.
This skill provides comprehensive development guidance for React Native applications using Expo, with emphasis on type safety, performance optimization, cross-platform compatibility (iOS, Android, Web), and adherence to Resgrid Dispatch architectural patterns.
1. Write concise, type-safe TypeScript code for all components and logic
2. Use functional components with hooks exclusively (avoid class components)
3. Ensure all components are modular, reusable, and maintainable
4. Organize files by feature, grouping related components, hooks, and styles together
5. Design for mobile-first with full iOS and Android platform support
6. Optimize components for cross-platform rendering including web (React Native Web)
1. **Variables and Functions**: Use camelCase (e.g., `isFetchingData`, `handleUserInput`)
2. **Components**: Use PascalCase (e.g., `UserProfile`, `ChatScreen`)
3. **Directories and Files**: Use lowercase with hyphens (e.g., `user-profile`, `chat-screen`)
1. Use TypeScript for all components, favoring interfaces for props and state definitions
2. Enable strict typing in `tsconfig.json`
3. Avoid `any` type; always strive for precise, explicit types
4. Utilize `React.FC` for defining functional components with typed props
5. Leverage TypeScript's type inference where appropriate while maintaining clarity
1. Minimize usage of `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 performance props:
- `removeClippedSubviews`
- `maxToRenderPerBatch`
- `windowSize`
- `getItemLayout` (when items have consistent size)
4. Avoid anonymous functions in `renderItem` or event handlers to prevent re-renders
5. Profile and optimize expensive operations using React DevTools and Flipper
1. Use `gluestack-ui` as primary UI component library
2. For components not available in `components/ui` directory, use either:
- `StyleSheet.create()` for static styles
- Styled Components for dynamic styling needs
3. Ensure responsive design considering different screen sizes and orientations
4. Optimize image handling using `react-native-fast-image` library
5. Support both dark mode and light mode themes
6. Follow WCAG accessibility guidelines for mobile applications
1. **Style Merging**: Always use `StyleSheet.flatten()` when combining style arrays:
```typescript
style={StyleSheet.flatten([styles.base, { color: dynamicColor }])}
```
This prevents "Failed to set an indexed property on CSSStyleDeclaration" errors on web
2. **Icon Styling**: Do not pass `style` props directly to `lucide-react-native` icons. Instead, wrap icons in a `View` and apply styles to the wrapper
3. **Layout Properties**: Avoid using the `gap` property in StyleSheet styles due to inconsistent web support. Use margin properties instead:
- `marginLeft`, `marginRight`, `marginTop`, `marginBottom`
4. **Component Selection**: 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 handling compatibility
Use the following libraries and tools as specified:
1. **Internationalization**: Wrap all user-facing text in `t()` from `react-i18next` for multi-lingual support
2. **Threading Model**: Follow React Native's threading model to ensure smooth UI performance
3. **Error Handling**: Handle errors gracefully and provide clear user feedback
4. **Offline Support**: Implement proper offline functionality for critical features
5. **Testing**:
- Create Jest tests for all generated components, services, and logic
- Ensure all tests run without errors and fix any issues before completion
- Generate comprehensive test coverage
6. **Performance**: Optimize for low-end devices and ensure smooth performance across device spectrum
7. **UX**: Ensure intuitive, user-friendly interfaces that work seamlessly across different devices and screen sizes
Use ternary operators (`? :`) for conditional rendering instead of logical AND (`&&`) operators:
```typescript
// Correct
{isLoading ? <Spinner /> : <Content />}
// Avoid
{isLoading && <Spinner />}
```
When generating a new screen component:
```typescript
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
interface UserProfileProps {
userId: string;
onEdit: () => void;
}
export const UserProfile: React.FC<UserProfileProps> = React.memo(({ userId, onEdit }) => {
const { t } = useTranslation();
return (
<View style={styles.container}>
<Text>{t('profile.title')}</Text>
<Button onPress={onEdit}>
{t('profile.editButton')}
</Button>
</View>
);
});
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 16,
paddingVertical: 20,
},
});
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/resgrid-dispatch-react-native-expert/raw