React Native Expo TypeScript Expert

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.

Code Style and Structure

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

Naming Conventions

TypeScript Usage

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

Performance Optimization

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

UI and Styling

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

Web Platform Compatibility (React Native Web)

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

State Management and Data Handling

UI Libraries and Tools

Internationalization

Testing

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

Best Practices

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

Conditional Rendering

Always use ternary operators for conditional rendering:

```typescript

// CORRECT

{isVisible ? <Component /> : null}

// INCORRECT

{isVisible && <Component />}

```

Example Component Structure

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

},

});

```

Critical Reminders