SEO Title: .cursorrules Cursor AI File: TypeScript, Expo, Jest & Detox

TypeScript Expo Jest Detox .cursorrules prompt file

100

İlknur Ültanır

Save

Saved

NEW

TypeScript Expo Jest Detox .cursorrules prompt file

You are an expert in TypeScript, React Native, Expo, and Mobile UI development.

Code Style and Structure

Write concise, technical TypeScript code with accurate examples.
Use functional and declarative programming patterns; avoid classes.
Prefer iteration and modularization over code duplication.
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Structure files: exported component, subcomponents, helpers, static content, types.
Follow Expo's official documentation for setting up and configuring your projects: https://docs.expo.dev/

Naming Conventions

Use lowercase with dashes for directories (e.g., components/auth-wizard).
Favor named exports for components.

TypeScript Usage

Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use functional components with TypeScript interfaces.
Use strict mode in TypeScript for better type safety.

Syntax and Formatting

Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use declarative JSX.
Use Prettier for consistent code formatting.

UI and Styling

Use Expo's built-in components for common UI patterns and layouts.
Implement responsive design with Flexbox and Expo's useWindowDimensions for screen size adjustments.
Use styled-components or Tailwind CSS for component styling.
Implement dark mode support using Expo's useColorScheme.
Ensure high accessibility (a11y) standards using ARIA roles and native accessibility props.
Leverage react-native-reanimated and react-native-gesture-handler for performant animations and gestures.

Safe Area Management

Use SafeAreaProvider from react-native-safe-area-context to manage safe areas globally in your app.
Wrap top-level components with SafeAreaView to handle notches, status bars, and other screen insets on both iOS and Android.
Use SafeAreaScrollView for scrollable content to ensure it respects safe area boundaries.
Avoid hardcoding padding or margins for safe areas; rely on SafeAreaView and context hooks.

Performance Optimization

Minimize the use of useState and useEffect; prefer context and reducers for state management.
Use Expo's AppLoading and SplashScreen for optimized app startup experience.
Optimize images: use WebP format where supported, include size data, implement lazy loading with expo-image.
Implement code splitting and lazy loading for non-critical components with React's Suspense and dynamic imports.
Profile and monitor performance using React Native's built-in tools and Expo's debugging features.
Avoid unnecessary re-renders by memoizing components and using useMemo and useCallback hooks appropriately.

Navigation

Use react-navigation for routing and navigation; follow its best practices for stack, tab, and drawer navigators.
Leverage deep linking and universal links for better user engagement and navigation flow.
Use dynamic routes with expo-router for better navigation handling.

State Management

Use React Context and useReducer for managing global state.
Leverage react-query for data fetching and caching; avoid excessive API calls.
For complex state management, consider using Zustand or Redux Toolkit.
Handle URL search parameters using libraries like expo-linking.

Error Handling and Validation

Use Zod for runtime validation and error handling.
Implement proper error logging using Sentry or a similar service.
Prioritize error handling and edge cases:
Handle errors at the beginning of functions.
Use early returns for error conditions to avoid deeply nested if statements.
Avoid unnecessary else statements; use if-return pattern instead.
Implement global error boundaries to catch and handle unexpected errors.
Use expo-error-reporter for logging and reporting errors in production.

Testing

Write unit tests using Jest and React Native Testing Library.
Implement integration tests for critical user flows using Detox.
Use Expo's testing tools for running tests in different environments.
Consider snapshot testing for components to ensure UI consistency.

Security

Sanitize user inputs to prevent XSS attacks.
Use react-native-encrypted-storage for secure storage of sensitive data.
Ensure secure communication with APIs using HTTPS and proper authentication.
Use Expo's Security guidelines to protect your app: https://docs.expo.dev/guides/security/

Internationalization (i18n)

Use react-native-i18n or expo-localization for internationalization and localization.
Support multiple languages and RTL layouts.
Ensure text scaling and font adjustments for accessibility.

Key Conventions

Rely on Expo's managed workflow for streamlined development and deployment.
Prioritize Mobile Web Vitals (Load Time, Jank, and Responsiveness).
Use expo-constants for managing environment variables and configuration.
Use expo-permissions to handle device permissions gracefully.
Implement expo-updates for over-the-air (OTA) updates.
Follow Expo's best practices for app deployment and publishing: https://docs.expo.dev/distribution/introduction/
Ensure compatibility with iOS and Android by testing extensively on both platforms.

API Documentation

Use Expo's official documentation for setting up and configuring your projects: https://docs.expo.dev/

Refer to Expo's documentation for detailed information on Views, Blueprints, and Extensions for best practices.

TypeScript Expo Jest Detox .cursorrules prompt file

İlknur Ültanır

About .cursorrules prompt file

What you can build

React Native Starter Kit for Expo: Create a starter template for React Native projects using Expo that includes pre-configured modules for state management with React Context, navigation with react-navigation, styling with styled-components, and authentication with a common identity provider.
Accessibility Checker for React Native Apps: Develop a tool or plugin that scans React Native apps to ensure they meet high accessibility standards, providing suggestions for ARIA roles, native accessibility props, and layout adjustments.
Performance Optimization Service for Expo Apps: Offer a service to analyze and optimize the performance of Expo apps, focusing on reducing re-renders, optimizing images, and enhancing startup times using lazy loading techniques and memoization strategies.
TypeScript Snippet Library for React Native Developers: Build a collection of TypeScript code snippets specifically for React Native development, fostering the use of functional programming patterns and providing examples of effective use of Context API, custom hooks, and reducer patterns.
Expo-responsive Design Tool: Create a Figma plugin or online tool that allows designers to preview Expo-based mobile app designs across different screen sizes and orientations, facilitating responsive design implementation with Flexbox and useWindowDimensions.
Zod Schema Generator for API Validation: Develop a tool that auto-generates Zod schemas from OpenAPI or Swagger documentation to provide seamless runtime validation and error handling in React Native projects using TypeScript.
Dark Mode Theme Manager for Expo Apps: Design a package or library that provides an easy setup for dark mode support in Expo apps, allowing developers to switch themes dynamically and providing a set of customizable components with useColorScheme integration.
React Native Animation Library using Reanimated: Build a library of pre-built animations and gestures using react-native-reanimated and react-native-gesture-handler, enabling developers to easily add performant animations to their apps.
Expo Link Tester Tool: Construct a web app that allows developers to test deep linking and universal linking configurations for their React Native apps, ensuring proper routing and navigation with expo-linking.
React Native Secure Data Storage Solution: Create a library or service leveraging react-native-encrypted-storage to provide a straightforward API for securely storing and retrieving sensitive user data in mobile applications.
React Native Global Error Boundary Component: Develop a reusable component or higher-order component (HOC) that implements robust global error handling, capturing and logging errors using expo-error-reporter or Sentry.
Internationalization Plugin for Expo: Provide a tool that helps in managing and automating localization processes in Expo projects, supporting multiple languages, RTL layout adjustments, and ensuring compatibility with expo-localization.

Benefits

Emphasizes use of Expo's ecosystem, including built-in components, useColorScheme for dark mode, and tools for performance optimization and security measures.
Recommends React Context and useReducer for state management, with support for react-query, Zustand, and Redux Toolkit for complex scenarios.
Focuses on high accessibility, performance optimization, and testing with tools like SafeAreaView, React Native's built-in tools, Expo imaging, and testing libraries like Jest and Detox.

Synopsis

Mobile app developers utilizing this prompt can create optimized, high-performance, and accessible mobile applications with a robust architecture using TypeScript, React Native, and Expo.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for developers working with TypeScript, React Native, and Expo for mobile UI development. It emphasizes writing concise, well-structured TypeScript code using functional programming patterns, avoiding class-based components. Key areas covered include naming conventions, syntax, formatting, UI styling with responsive design, performance optimization, navigation using react-navigation, state management, error handling, and testing with Jest and Detox. It also addresses security practices, internationalization, and leveraging Expo's managed workflow for environment configuration, updates, and deployment. The file promotes best practices for compatibility across iOS and Android platforms, encouraging developers to follow Expo's official documentation.

TypeScript Expo Jest Detox .cursorrules prompt file

TypeScript Expo Jest Detox .cursorrules prompt file

TypeScript Expo Jest Detox .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

React Native .cursorrules prompt file

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

TypeScript Next.js Tailwind .cursorrules prompt file

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

Nextjs 14 React .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Go Backend Scalability .cursorrules prompt file

Angular TypeScript .cursorrules prompt file

React Native .cursorrules prompt file

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

TypeScript Next.js Tailwind .cursorrules prompt file

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

TypeScript Tailwind Next.js SSR .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Next.js React TypeScript .cursorrules prompt file

Python FastAPI Scalable API .cursorrules prompt file

PyQt6 EEG Processing .cursorrules prompt file

TypeScript Node.js Next.js React UI CSS .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (syst

Cursor Tip

Cursor Tip

Cursor Tip

Build ChatGPT with Python: Cursor AI Tutorial Guide

Create a Chrome Extension Fast: Cursor AI Tutorial

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components