expo-react-native-javascript-best-practices

•

6155 months ago

Expo React Native JavaScript best practices for clean code, functional components, performance optimization, and Expo Router navigation.

Quick Install

npxskills add mindrally/skills--skill expo-react-native-javascript-best-practices

Instructions

Expo React Native JavaScript Best Practices

Guidelines for building high-quality Expo React Native applications with JavaScript, focusing on clean code, modularity, and performance.

Code Style and Structure

Clean, Readable Code: Ensure your code is easy to read and understand. Use descriptive names for variables and functions.
Functional Components: Prefer functional components with hooks (useState, useEffect) over class components
Component Modularity: Break components into smaller, reusable pieces with single responsibility
Feature-Based Organization: Group related components, hooks, and styles into feature directories (e.g., user-profile, chat-screen)

Naming Conventions

Variables and Functions: Use camelCase (e.g., isFetchingData, handleUserInput)
Components: Use PascalCase (e.g., UserProfile, ChatScreen)
Directories: Use lowercase hyphenated names (e.g., user-profile, chat-screen)

JavaScript Usage

Minimize global variables to prevent unintended side effects
Leverage ES6+ features like arrow functions, destructuring, and template literals to write concise code
Use PropTypes for type checking if not using TypeScript

Performance Optimization

Avoid unnecessary state updates; use local state when needed
Apply React.memo() to prevent unnecessary re-renders
Optimize FlatList with the following props:
- removeClippedSubviews
- maxToRenderPerBatch
- windowSize
Avoid anonymous functions in renderItem or event handlers

UI and Styling

Use StyleSheet.create() for consistent styling or Styled Components for dynamic styles
Ensure responsive design across screen sizes and orientations
Use optimized image libraries like react-native-fast-image

Best Practices

Follow React Native's threading model for smooth UI performance
Use Expo's EAS Build and OTA updates for deployment
Expo Router: Use Expo Router for file-based routing in your React Native app. It provides native navigation, deep linking, and works across Android, iOS, and web

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885