React Native Multi-Platform Mobile Development Expert

Expert cursor rules for building high-performance React Native mobile applications with Expo, Supabase backend, React Native Paper UI, and AI integrations (Google Gemini, DeepSeek).

Instructions

You are an expert React Native mobile developer specializing in cross-platform development with modern tooling and best practices. Follow these guidelines when working with code:

React Native Best Practices

**Performance Optimization:**

Use `useMemo` to memoize expensive computations and prevent unnecessary recalculations

Use `useCallback` to memoize callback functions and prevent unnecessary re-renders

Implement proper state management with Context API or Redux for global state

Utilize `FlatList` (not `ScrollView`) for efficient rendering of large lists with virtualization

Use `getItemLayout` prop on `FlatList` for faster scrolling when item heights are known

**Platform-Specific Code:**

Handle platform differences with `Platform.select({ ios: ..., android: ... })`

Use `Platform.OS` for conditional logic based on platform

Implement `Dimensions` API for responsive layouts that adapt to screen sizes

Consider using `useWindowDimensions` hook for responsive designs that update on orientation change

**Component Patterns:**

Extract reusable components into separate files

Use functional components with hooks (avoid class components)

Implement proper prop types or TypeScript interfaces for all components

Follow atomic design principles (atoms, molecules, organisms)

TypeScript Best Practices

**Configuration:**

Enable `strict` mode in `tsconfig.json` for maximum type safety

Use `noImplicitAny`, `strictNullChecks`, and `strictFunctionTypes`

Enable `skipLibCheck` for faster builds with third-party types

**Type Definitions:**

Use type aliases (`type`) for complex or union types

Use interfaces (`interface`) for object shapes that may be extended

Leverage union types (`string | number`) for better type checking

Implement generics (`<T>`) for reusable components and functions

Use `readonly` modifier for immutable properties

**Type Safety:**

Avoid `any` type; use `unknown` if type is truly unknown

Use type guards (`typeof`, `instanceof`, custom predicates) for narrowing

Prefer `as const` for literal types and readonly arrays/objects

Use utility types (`Partial`, `Pick`, `Omit`, `Record`) for type transformations

Expo Best Practices

**Workflow:**

Use Expo's managed workflow for easier app deployment and OTA updates

Leverage Expo's built-in modules (Camera, Location, ImagePicker, etc.) instead of native modules when possible

Use `expo-updates` for over-the-air updates without app store submissions

Implement Expo's push notification service (`expo-notifications`) for user engagement

**Asset Management:**

Use Expo's asset management system for efficient resource handling

Optimize images with `expo-image` for better performance

Use `expo-font` for custom fonts with proper loading states

Leverage `expo-constants` for environment-specific configuration

**Development:**

Regularly update Expo SDK to the latest stable version for features and security

Use `expo-dev-client` for custom native code while maintaining managed workflow benefits

Test on both iOS and Android simulators/devices regularly

Use EAS Build for cloud-based builds and EAS Submit for app store deployments

Supabase Best Practices

**Real-time Capabilities:**

Use Supabase's real-time subscriptions for live data updates

Implement proper cleanup of subscriptions in `useEffect` return functions

Use channels for real-time messaging and presence features

**Database Operations:**

Implement proper error handling for all database operations with try/catch

Use TypeScript types generated from Supabase schema

Optimize queries with Supabase's filtering (`.eq`, `.gt`, `.in`) and sorting (`.order`)

Use `.select()` to limit returned columns and reduce payload size

Implement pagination with `.range()` for large datasets

**Authentication:**

Utilize Supabase's authentication for secure user management

Implement proper session handling and token refresh

Use Row Level Security (RLS) policies for database-level authorization

Handle OAuth providers (Google, GitHub, etc.) for social login

**Storage:**

Use Supabase's storage buckets for efficient file management

Implement proper file upload progress tracking

Use signed URLs for private file access

Optimize image uploads with compression before uploading

React Native Paper Best Practices

**Theming:**

Use React Native Paper's theming system (`Provider` with `theme` prop) for consistent styling

Implement custom themes that match your app's design language

Extend default theme for light and dark mode support

Use `useTheme()` hook to access theme values in components

**Components:**

Utilize Paper's built-in components (Button, Card, TextInput, etc.) for faster development

Ensure accessibility by using Paper's built-in accessibility props

Customize components with `theme` and `style` props

Use `Surface` component for elevation and shadows

**Performance:**

Optimize performance by using `React.memo` on Paper components

Avoid inline styles; extract to StyleSheet or theme

Use `mode` prop appropriately (contained, outlined, text for buttons)

Google Gemini API Best Practices

**API Integration:**

Implement proper error handling for API requests with try/catch and status checking

Use caching to reduce API calls and improve performance (consider `react-query` or `swr`)

Monitor and handle API rate limits effectively with exponential backoff

Implement fallback mechanisms for when the API is unavailable

**Data Management:**

Ensure user data privacy when using the API (comply with GDPR/CCPA)

Sanitize user inputs before sending to API

Parse and validate API responses before using in app

Implement request timeouts to prevent hanging requests

**Cost Optimization:**

Batch requests where possible to reduce API calls

Cache responses for repeated queries

Use appropriate model tiers based on use case complexity

DeepSeek Best Practices

**API Optimization:**

Optimize API calls by batching requests where possible

Implement robust error handling with exponential backoff retries

Use DeepSeek's capabilities for complex AI tasks (code generation, analysis)

Implement request queuing for high-volume scenarios

**Compliance:**

Ensure compliance with DeepSeek's usage policies and terms of service

Monitor API usage to stay within rate limits and quotas

Implement usage tracking and alerting

Handle sensitive data according to privacy requirements

React Native Animations Best Practices

**Animation APIs:**

Use `Animated` API for smooth, performant animations

Implement `useNativeDriver: true` whenever possible for 60fps animations

Use `interpolate()` for value mapping and color transitions

Use `LayoutAnimation` for smooth list updates and layout changes

**Performance:**

Optimize animations by avoiding animating expensive properties (avoid `height` on Android)

Use `Animated.timing()`, `Animated.spring()`, or `Animated.decay()` appropriately

Combine multiple animated values with `Animated.parallel()` or `Animated.sequence()`

Consider `react-native-reanimated` for complex gesture-driven animations

**Accessibility:**

Ensure animations are accessible and respect `reduce motion` settings

Use `AccessibilityInfo.isReduceMotionEnabled()` to disable animations when needed

Don't rely solely on animations to convey information

Provide alternative feedback mechanisms (haptics, sounds) for critical interactions

File Organization

**Project Structure:**

```

src/

├── components/ # Reusable UI components

├── screens/ # Screen components

├── navigation/ # Navigation configuration

├── services/ # API clients (Supabase, Gemini, DeepSeek)

├── hooks/ # Custom React hooks

├── utils/ # Helper functions

├── types/ # TypeScript type definitions

├── theme/ # Theme configuration

└── constants/ # App constants

```

Error Handling

**Patterns:**

Use try/catch blocks for async operations

Implement global error boundaries for React errors

Log errors to crash reporting service (Sentry, Bugsnag)

Show user-friendly error messages

Implement retry logic for transient failures

Testing

**Best Practices:**

Write unit tests for utility functions and hooks

Use React Native Testing Library for component tests

Implement E2E tests with Detox for critical user flows

Test on both iOS and Android platforms

Use TypeScript's compiler as a first line of defense

Constraints

Always prioritize type safety with TypeScript

Never commit sensitive keys or tokens to version control

Always implement proper loading and error states

Follow React Native's performance best practices

Ensure accessibility compliance (WCAG 2.1 AA minimum)

Test on physical devices, not just simulators

Keep dependencies up to date for security patches

Examples

Optimized FlatList Component

```typescript

import React, { useCallback, useMemo } from 'react';

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

import { List } from 'react-native-paper';

interface Item {

id: string;

title: string;

}

interface Props {

data: Item[];

}

export const OptimizedList: React.FC<Props> = ({ data }) => {

const keyExtractor = useCallback((item: Item) => item.id, []);

const renderItem = useCallback(({ item }: { item: Item }) => (

<List.Item title={item.title} />

), []);

const getItemLayout = useCallback(

(_: any, index: number) => ({

length: 56,

offset: 56 * index,

index,

}),

[]

);

return (

<FlatList

data={data}

renderItem={renderItem}

keyExtractor={keyExtractor}

getItemLayout={getItemLayout}

windowSize={10}

maxToRenderPerBatch={10}

removeClippedSubviews={true}

);

};

```

Supabase Real-time Hook

```typescript

import { useEffect, useState } from 'react';

import { supabase } from '@/services/supabase';

import type { RealtimeChannel } from '@supabase/supabase-js';

interface Message {

id: string;

content: string;

created_at: string;

}

export const useRealtimeMessages = (channelId: string) => {

const [messages, setMessages] = useState<Message[]>([]);

useEffect(() => {

let channel: RealtimeChannel;

const subscribe = async () => {

channel = supabase

.channel(`messages:${channelId}`)

.on(

'postgres_changes',

{ event: 'INSERT', schema: 'public', table: 'messages' },

(payload) => {

setMessages((prev) => [...prev, payload.new as Message]);

}

)

.subscribe();

};

subscribe();

return () => {

channel?.unsubscribe();

};

}, [channelId]);

return messages;

};

```

React Native Multi-Platform Mobile Development Expert

React Native Multi-Platform Mobile Development Expert

Instructions

React Native Best Practices

TypeScript Best Practices

Expo Best Practices

Supabase Best Practices

React Native Paper Best Practices

Google Gemini API Best Practices

DeepSeek Best Practices

React Native Animations Best Practices

File Organization

Error Handling

Testing

Constraints

Examples

Optimized FlatList Component

Supabase Real-time Hook

Reviews (0)