Cursor Rules for
React Native

This rule guides you in implementing React Native applications within Cursor by providing best practices for component structures, navigation solutions, and mobile optimization techniques. It helps ensure your React Native projects follow modern patterns and perform well on mobile devices.

What this rule does

The React Native rule serves as a comprehensive guide for developing mobile applications using React Native within the Cursor editor. It encapsulates industry best practices and performance optimization techniques specifically tailored for cross-platform mobile development.

The rule focuses on several key areas:

Component architecture

The rule emphasizes using functional components with hooks rather than class components, aligning with modern React development patterns. This approach typically results in more readable, maintainable code with better performance characteristics.

Project organization

A consistent folder structure is recommended, organizing your code into logical categories:

• components (reusable UI elements)
• screens (full pages/views)
• navigation (routing configuration)
• services (API calls, external integrations)
• hooks (custom React hooks)
• utils (helper functions)

Navigation and UI patterns

The rule recommends using React Navigation for handling screen transitions and app structure. It also advises using optimized components like FlatList for rendering scrollable lists rather than combining map() with ScrollView, which can lead to performance issues.

Styling and performance

StyleSheet is recommended over inline styles to improve performance and maintain consistency. The rule also addresses mobile-specific concerns like image optimization and implementing proper loading states.

Using React Native in Cursor

The React Native rule is stored as react-native.mdc in your project's .cursor/rules directory. This rule is configured as an "Auto Attached" rule, which means Cursor will automatically apply these guidelines when you're working with files that match the specified patterns: **/*.jsx and **/*.tsx.

When you're editing React Native component files with these extensions, the AI assistant in Cursor will be aware of these best practices and will provide suggestions accordingly. This happens automatically without requiring manual invocation.

If you want to explicitly invoke this rule in other contexts, you can type @react-native in the Chat panel or Command-K dialog to activate these guidelines for the current conversation.

Usage tips

Custom hooks implementation

When following the rule's recommendation to use custom hooks for reusable logic, consider this pattern:

// hooks/useApi.js
import { useState, useEffect } from 'react';

export function useApi(endpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData();
  }, [endpoint]);

  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch(endpoint);
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  return { data, loading, error, refetch: fetchData };
}

Proper list rendering

Following the rule's guidance on using FlatList for performance optimization:

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

const MyList = ({ items }) => {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      initialNumToRender={10}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 5,
  },
  title: {
    fontSize: 16,
  },
});

Error boundaries implementation

To implement error boundaries as recommended by the rule:

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

const ErrorBoundary = ({ children }) => {
  const [hasError, setHasError] = useState(false);
  
  useEffect(() => {
    const handleError = (error) => {
      console.log('Caught error:', error);
      setHasError(true);
    };
    
    // Set up error handler
    const subscription = RNErrorHandler.addEventListener(handleError);
    
    return () => subscription.remove();
  }, []);
  
  if (hasError) {
    return (
      <View style={styles.errorContainer}>
        <Text style={styles.errorText}>Something went wrong</Text>
        <Button 
          title="Try Again" 
          onPress={() => setHasError(false)} 
        />
      </View>
    );
  }
  
  return children;
};

const styles = StyleSheet.create({
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  errorText: {
    fontSize: 16,
    marginBottom: 20,
    color: 'red',
  },
});

By following these React Native guidelines in Cursor, you'll create more maintainable, performant mobile applications that adhere to current best practices.