Resgrid Dispatch React Native Expert

Expert guidance for building mobile applications with TypeScript, React Native, and Expo, following Resgrid Dispatch conventions and best practices.

Overview

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.

Instructions

Code Style and Structure

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)

Naming Conventions

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`)

TypeScript Standards

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

Performance Optimization

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

UI and Styling

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

Web Platform Compatibility (React Native Web)

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

Technology Stack

Use the following libraries and tools as specified:

Best Practices

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

Conditional Rendering

Use ternary operators (`? :`) for conditional rendering instead of logical AND (`&&`) operators:

```typescript

// Correct

{isLoading ? <Spinner /> : <Content />}

// Avoid

{isLoading && <Spinner />}

```

Example Usage

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,

},

});

```

Important Constraints