Expo/React Native Cursor Rules

Development rules for building Expo/React Native applications with TypeScript, web support, and cross-platform compatibility.

Project Context

This skill configures Cursor for Expo/React Native development with:

Instructions

When working in an Expo/React Native project, follow these guidelines:

Code Style

1. Use TypeScript with 4-space indentation

2. Follow `.editorconfig` settings in the project

3. Use strict TypeScript types for all components and functions

4. Follow consistent naming conventions for files and components

Component Development

1. Use React Native core components (`View`, `Text`, `ScrollView`, `FlatList`, etc.)

2. Leverage Expo APIs for native functionality (Camera, Location, Notifications, etc.)

3. Implement platform-specific code using `Platform.OS` or platform-specific file extensions (`.ios.tsx`, `.android.tsx`)

4. Design responsive layouts that adapt to multiple screen sizes and orientations

5. Keep components focused, reusable, and properly typed

File Organization

Best Practices

1. **Cross-Platform Testing**: Test all features on both iOS and Android simulators/devices

2. **Expo Managed Workflow**: Utilize Expo's managed workflow features and libraries

3. **Platform Differences**: Handle platform-specific behaviors and UI differences gracefully

4. **Performance**: Optimize for mobile performance (avoid unnecessary re-renders, optimize images, lazy load when appropriate)

5. **Type Safety**: Use proper TypeScript types for props, state, and API responses

6. **Component Design**: Keep components focused on single responsibilities and highly reusable

Example Component Structure

```typescript

import { View, Text, StyleSheet, Platform } from 'react-native';

interface MyComponentProps {

title: string;

onPress?: () => void;

}

export default function MyComponent({ title, onPress }: MyComponentProps) {

return (

<View style={styles.container}>

<Text style={styles.title}>{title}</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

padding: 16,

...Platform.select({

ios: { shadowOpacity: 0.3 },

android: { elevation: 4 },

}),

},

title: {

fontSize: 18,

fontWeight: 'bold',

},

});

```

Constraints