# Core Architecture Standards for React Native
This document outlines the core architectural standards for React Native applications. It provides guidelines for structuring projects, organizing code, and applying architectural patterns to ensure maintainability, scalability, and performance. These standards are based on the latest React Native features and best practices.
## 1. Project Structure and Organization
### 1.1. Standard
Adopt a feature-based or domain-driven structure for your React Native projects.
* **Do This:** Group related components, hooks, utilities, and styles within a dedicated directory representing a specific feature or domain area.
* **Don't Do This:** Organize files based on their type (e.g., "components/", "screens/", "utils/") at the top level, as this leads to scattered, less maintainable code.
**Why:** Feature-based organization improves code discoverability, simplifies refactoring, and minimizes dependencies between unrelated parts of the application. It also supports team-based development by allowing developers to focus on specific areas of the codebase.
**Example:**
"""
src/
├── components/ # Shared, reusable components
├── features/
│ ├── authentication/
│ │ ├── screens/
│ │ │ ├── LoginScreen.tsx
│ │ │ └── SignupScreen.tsx
│ │ ├── components/
│ │ │ ├── AuthForm.tsx
│ │ │ └── PasswordInput.tsx
│ │ ├── hooks/
│ │ │ └── useAuth.ts
│ │ ├── services/
│ │ │ └── authService.ts
│ │ └── styles/
│ │ └── authStyles.ts
│ ├── home/
│ │ ├── screens/
│ │ │ └── HomeScreen.tsx
│ │ ├── components/
│ │ │ └── WelcomeMessage.tsx
│ │ └── ...
├── navigation/
│ └── AppNavigator.tsx
├── services/ # Global services for APIs
│ └── api.ts
├── types/ # Shared Typescript types
│ └── index.ts
└── App.tsx
"""
### 1.2. Standard
Use a clear naming convention for files and directories.
* **Do This:** Use PascalCase for component names (e.g., "LoginScreen.tsx"), camelCase for variables and functions (e.g., "handleLogin", "apiClient"), and descriptive names for directories (e.g., "authentication", "home").
* **Don't Do This:** Use cryptic abbreviations or inconsistent naming styles.
**Why:** Consistent naming improves code readability and makes it easier to understand the purpose of each file and directory.
**Example:**
"""
src/
└── features/
└── profile/
├── screens/
│ └── ProfileScreen.tsx // Correct: PascalCase for components
├── components/
│ └── UserAvatar.tsx // Correct: PascalCase for components
├── hooks/
│ └── useProfileData.ts // Correct: camelCase for hooks
├── utils/
│ └── profileUtils.ts // Correct: camelCase for utilities
"""
### 1.3. Standard
Employ a modular architecture with well-defined boundaries.
* **Do This:** Divide the application into independent modules responsible for specific functionalities (e.g., authentication, data fetching, UI rendering).
* **Don't Do This:** Create monolithic components that handle multiple responsibilities or allow tight coupling between unrelated modules.
**Why:** Modular architecture improves code reusability, simplifies testing, and allows for easier maintenance and scaling of the application.
**Example:**
"""typescript
// authentication/services/authService.ts
import api from '../../services/api'; //Import the API from Global Services
const login = async (credentials: LoginCredentials): Promise => {
const response = await api.post('/login', credentials);
return response.data;
};
const signup = async (userData: SignupData): Promise => {
const response = await api.post('/signup', userData);
return response.data;
}
export default { login, signup };
// authentication/screens/LoginScreen.tsx
import React, { useState } from 'react';
import authService from '../services/authService';
const LoginScreen = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleLogin = async () => {
try {
const user = await authService.login({ username, password });
// Handle successful login
console.log('Logged in:', user);
} catch (error) {
// Handle login error
console.error('Login failed:', error);
}
};
return (
// ... UI elements for login form ...
);
};
export default LoginScreen;
"""
**Anti-pattern:**
Avoid directly importing components or UI elements from other features directly into a single component. For instance, having navigation logic embedded deeply inside a component makes it tightly coupled and hard to test. Instead, navigation should be handled by services or navigation components specifically to maintain modular structure.
## 2. Architectural Patterns
### 2.1. Standard
Favor the use of React Context API or state management libraries like Redux or Zustand for managing global application state.
* **Do This:** Use Context API for simple state management scenarios or opt for a state management library for complex applications with centralized data needs.
* **Don't Do This:** Pass data through multiple levels of components using props (prop drilling) or rely on mutable global variables for storing application state.
**Why:** Centralized state management improves data flow predictability, simplifies debugging, and allows for easier sharing of data between components.
**Example (Context API):**
"""typescript
// src/context/AuthContext.tsx
import React, { createContext, useState, useContext, ReactNode } from 'react';
interface AuthContextType {
user: User | null;
login: (userData: User) => void;
logout: () => void;
}
interface AuthProviderProps {
children: ReactNode;
}
const AuthContext = createContext(undefined);
export const AuthProvider: React.FC = ({ children }) => {
const [user, setUser] = useState(null);
const login = (userData: User) => {
setUser(userData);
};
const logout = () => {
setUser(null);
};
const value: AuthContextType = {
user,
login,
logout,
};
return {children};
};
export const useAuth = () => { // this is proper syntax for the latest react native
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
};
// src/features/profile/screens/ProfileScreen.tsx
import React from 'react';
import { useAuth } from '../../context/AuthContext';
const ProfileScreen = () => {
const { user, logout } = useAuth();
if (!user) {
return Please login.;
}
return (
<>
Welcome, {user.username}!
);
};
export default ProfileScreen;
"""
**Example (Redux Toolkit):**
"""typescript
// src/store/slices/authSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface AuthState {
user: User | null;
isLoading: boolean;
error: string | null;
}
const initialState: AuthState = {
user: null,
isLoading: false,
error: null,
};
const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
loginStart(state) {
state.isLoading = true;
},
loginSuccess(state, action: PayloadAction) {
state.user = action.payload;
state.isLoading = false;
state.error = null;
},
loginFailure(state, action: PayloadAction) {
state.user = null;
state.isLoading = false;
state.error = action.payload;
},
logout(state) {
state.user = null;
state.isLoading = false;
state.error = null;
}
},
});
export const { loginStart, loginSuccess, loginFailure, logout } = authSlice.actions;
export default authSlice.reducer;
// src/store/store.ts
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './slices/authSlice';
const store = configureStore({
reducer: {
auth: authReducer,
},
});
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;
export default store;
// src/features/profile/screens/ProfileScreen.tsx
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState, AppDispatch } from '../../store/store';
import { logout } from '../../store/slices/authSlice';
const ProfileScreen = () => {
const user = useSelector((state: RootState) => state.auth.user);
const dispatch = useDispatch();
const handleLogout = () => {
dispatch(logout());
};
if (!user) {
return Please login.;
}
return (
<>
Welcome, {user.username}!
);
};
export default ProfileScreen;
"""
### 2.2. Standard
Implement the "Separation of Concerns" principle to keep the logic of components, styling, and data handling separate.
* **Do This:** Use functional components and React Hooks to separate UI rendering logic from state management and side effects. Move styling to separate stylesheet files.
* **Don't Do This:** Put business logic, API calls, or complex calculations directly within components' render methods. Avoid inline styling as much as possible.
**Why:** Separation of concerns makes components easier to understand, test, and reuse. It also improves code maintainability by allowing you to modify UI logic, styling or data handling without affecting other parts of the component.
**Example:**
"""typescript
// src/features/home/components/WelcomeMessage.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
interface WelcomeMessageProps {
name: string;
}
const WelcomeMessage: React.FC = ({ name }) => {
return (
Welcome, {name}!
);
};
const styles = StyleSheet.create({
container: {
padding: 16,
backgroundColor: '#f0f0f0',
borderRadius: 8,
},
text: {
fontSize: 18,
fontWeight: 'bold',
},
});
export default WelcomeMessage;
"""
### 2.3. Standard
Use the "Adapter Pattern" for communication with external libraries or APIs.
* **Do This:** Create adapter classes or functions that translate data between the format expected by your application and the format provided by the external system.
* **Don't Do This:** Directly use external libraries or APIs within your components without any abstraction.
**Why:** The Adapter Pattern isolates your application from changes in external systems and allows you to easily switch between different implementations. It also makes testing easier by allowing you to mock the adapter and simulate different scenarios.
**Example:**
"""typescript
// src/services/apiAdapters/userAdapter.ts
import { User } from '../../types';
interface ApiUser {
id: number;
firstName: string;
lastName: string;
emailAddress: string;
}
const adaptApiUserToUser = (apiUser: ApiUser): User => {
return {
id: apiUser.id,
fullName: "${apiUser.firstName} ${apiUser.lastName}",
email: apiUser.emailAddress,
};
};
export default adaptApiUserToUser;
// src/services/api.ts
import axios from 'axios';
import adaptApiUserToUser from './apiAdapters/userAdapter';
const apiClient = axios.create({
baseURL: 'https://api.example.com',
});
const getUser = async (id: number): Promise => {
const response = await apiClient.get("/users/${id}");
return adaptApiUserToUser(response.data);
};
export default { getUser };
// src/features/profile/screens/ProfileScreen.tsx
import React, { useState, useEffect } from 'react';
import api from '../../services/api';
const ProfileScreen = () => {
const [user, setUser] = useState(null);
useEffect(() => {
const fetchUser = async () => {
const userData = await api.getUser(123); // Fetch user with ID 123
setUser(userData);
};
fetchUser();
}, []);
if (!user) {
return Loading...;
}
return (
<>
Full Name: {user.fullName}
Email: {user.email}
);
};
export default ProfileScreen;
"""
## 3. Component Design
### 3.1. Standard
Build reusable and composable components.
* **Do This:** Design components that can be used in multiple parts of the application and easily customized through props.
* **Don't Do This:** Create highly specific components that are only used in one place or have complex internal logic that is difficult to modify.
**Why:** Reusable components reduce code duplication, improve consistency, and simplify maintenance.
**Example:**
"""typescript
// src/components/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
color?: string; // Optional prop for button color
}
const Button: React.FC = ({ title, onPress, color = '#007BFF' }) => {
return (
{title}
);
};
const styles = StyleSheet.create({
button: {
padding: 12,
borderRadius: 8,
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default Button;
// Usage in different screens:
// src/features/authentication/screens/LoginScreen.tsx
// src/features/home/screens/HomeScreen.tsx
"""
### 3.2. Standard
Use functional components with React Hooks for state management and side effects.
* **Do This:** Prefer functional components and hooks over class components, especially for new code.
* **Don't Do This:** Use class components unless you are working with legacy code or require specific lifecycle methods.
**Why:** Functional components with hooks are more concise, easier to test, and promote code reuse through custom hooks. They also align with the recommended approach in modern React development.
**Example:**
"""typescript
// src/hooks/useCounter.ts
import { useState } from 'react';
const useCounter = (initialValue: number = 0) => {
const [count, setCount] = useState(initialValue);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return { count, increment, decrement };
};
export default useCounter;
// src/components/Counter.tsx
import React from 'react';
import useCounter from '../hooks/useCounter';
const Counter = () => {
const { count, increment, decrement } = useCounter(10);
return (
<>
Count: {count}
);
};
export default Counter;
"""
### 3.3. Standard
Use PropTypes or TypeScript for type checking and validating component props.
* **Do This:** Define the expected types of component props using PropTypes or TypeScript interfaces/types.
* **Don't Do This:** Skip type checking altogether, as this can lead to runtime errors and unexpected behavior.
**Why:** Type checking helps catch errors early in the development process, improves code reliability, and makes components easier to understand and use. TypeScript is increasingly preferred for React Native projects.
**Example (TypeScript):**
"""typescript
// src/components/Greeting.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
interface GreetingProps {
name: string;
age?: number; // Optional prop
}
const Greeting: React.FC = ({ name, age }) => {
return (
Hello, {name}!
{age && You are {age} years old.}
);
};
const styles = StyleSheet.create({
container: {
padding: 16,
},
text: {
fontSize: 16,
},
});
export default Greeting;
"""
## 4. Data Handling
### 4.1. Standard
Abstract API calls into dedicated service modules.
* **Do This:** Create service modules that encapsulate the logic for interacting with APIs, including data fetching, transformation, and error handling.
* **Don't Do This:** Directly make API calls within components, as this leads to tightly coupled code and makes it difficult to test and maintain.
**Why:** Service modules promote code reuse, improve testability, and allow you to easily switch between different data sources or API implementations.
**Example:**
"""typescript
// src/services/api.ts
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://api.example.com',
});
const getUsers = async (): Promise => {
const response = await apiClient.get('/users');
return response.data;
};
const createUser = async (userData: User): Promise => {
const response = await apiClient.post('/users', userData);
return response.data;
};
export default { getUsers, createUser };
// src/features/userList/screens/UserListScreen.tsx
import React, { useState, useEffect } from 'react';
import api from '../../services/api';
const UserListScreen = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const userList = await api.getUsers();
setUsers(userList);
};
fetchUsers();
}, []);
return (
// ... Render the list of users ...
);
};
export default UserListScreen;
"""
### 4.2. Standard
Implement proper error handling for API calls and data processing.
* **Do This:** Use try-catch blocks to handle potential errors during API calls and data processing. Display user-friendly error messages to the user.
* **Don't Do This:** Ignore errors or display technical error messages to the user.
**Why:** Proper error handling improves the user experience, prevents unexpected crashes, and makes the application more robust.
**Example:**
"""typescript
// src/services/api.ts
import axios from 'axios';
const getUsers = async (): Promise => {
try {
const response = await axios.get('/users');
return response.data;
} catch (error: any) { // type assertion: tells Typescript that error is of type any
console.error('Error fetching users:', error.message);
throw new Error('Failed to fetch users'); // Re-throw the error for handling in the component
}
};
export default { getUsers };
// src/features/userList/screens/UserListScreen.tsx
import React, { useState, useEffect } from 'react';
import api from '../../services/api';
import { Alert } from 'react-native';
const UserListScreen = () => {
const [users, setUsers] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchUsers = async () => {
try {
const userList = await api.getUsers();
setUsers(userList);
setError(null); // Clear any previous error
} catch (err: any) {
setError(err.message || 'Failed to fetch users'); // type assertion: tells Typescript that err is of type any
Alert.alert('Error', 'Failed to load users. Please try again later.'); //Enhanced error message to the user
}
};
fetchUsers();
}, []);
if (error) {
return Error: {error};
}
return (
// ... Render the list of users ...
);
};
export default UserListScreen;
"""
### 4.3. Standard
Use data transformation techniques to adapt data to the specific needs of your application.
* **Do This:** Transform data received from APIs or other sources into a consistent and convenient format for use in your components.
* **Don't Do This:** Directly use raw data from external sources without any transformation.
**Why:** Data transformation improves code clarity, reduces dependencies on external data formats, and allows you to easily adapt to changes in data sources. Refer to the "Adapter Pattern" (2.3) for examples of data transformation.
## 5. Navigation
### 5.1. Standard
Use React Navigation for handling application navigation.
* **Do This:** Use React Navigation's pre-built navigators and components for creating different navigation patterns (e.g., stack, tab, drawer).
* **Don't Do This:** Implement custom navigation logic from scratch, as this is complex and error-prone.
**Why:** React Navigation provides a powerful and flexible API for creating complex navigation flows in React Native applications.
**Example:**
"""typescript
// src/navigation/AppNavigator.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../features/home/screens/HomeScreen';
import ProfileScreen from '../features/profile/screens/ProfileScreen';
const Stack = createStackNavigator();
const AppNavigator = () => {
return (
);
};
export default AppNavigator;
// src/features/home/screens/HomeScreen.tsx
import React from 'react';
import { Button, View, Text } from 'react-native';
const HomeScreen = ({ navigation }: { navigation: any }) => {
return (
Home Screen
navigation.navigate('Profile')}
/>
);
};
export default HomeScreen;
"""
### 5.2. Standard
Define navigation parameters using TypeScript interfaces for type safety.
* **Do This:** Create interfaces that specify the expected types of navigation parameters for each screen.
* **Don't Do This:** Pass navigation parameters as plain JavaScript objects without any type checking.
**Why:** Type-safe navigation parameters help catch errors early in the development process and improve code reliability.
**Example:**
"""typescript
// src/navigation/types.ts
export type RootStackParamList = {
Home: undefined;
Profile: { userId: string };
Settings: undefined;
};
// src/screens/ProfileScreen.tsx
import React from 'react';
import { RouteProp, useRoute } from '@react-navigation/native';
import { RootStackParamList } from '../navigation/types';
type ProfileScreenRouteProp = RouteProp;
const ProfileScreen = () => {
const route = useRoute();
const { userId } = route.params;
return (
Profile Screen
User ID: {userId}
);
};
export default ProfileScreen;
// src/screens/HomeScreen.tsx
import React from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { RootStackParamList } from '../navigation/types';
import { StackNavigationProp } from '@react-navigation/stack'
type HomeScreenNavigationProp = StackNavigationProp;
const HomeScreen = () => {
const navigation = useNavigation();
return (
Home Screen
navigation.navigate('Profile', {userId: "42"})}
/>
);
};
export default HomeScreen;
"""
### 5.3 Standard
Implement deep linking for direct navigation to specific screens.
* **Do This:** Configure your React Native app to handle deep links, allowing users to navigate to specific content or sections of the app directly from external sources (e.g., emails, websites).
* **Don't Do This:** Overlook deep linking, especially if your app relies on sharing content or integrating with other platforms.
**Why:** Deep linking enhances user engagement, improves app discoverability, and streamlines the user experience by allowing users to bypass the app's main navigation flow and access content directly.
**Example:**
In "App.js" or your root component:
"""typescript
import React, { useEffect } from 'react';
import { Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ArticleScreen from './screens/ArticleScreen';
const Stack = createStackNavigator();
function App() {
useEffect(() => {
const handleDeepLink = async (event) => {
// Example: scheme://myapp/articles/123
const { path, queryParams } = Linking.parse(event.url);
if (path.startsWith('articles/')) {
const articleId = path.split('/')[1]; // Extract article id.
navigation.navigate('Article', { articleId });
}
};
Linking.getInitialURL().then((url) => {
if (url) {
handleDeepLink({ url });
}
});
Linking.addEventListener('url', handleDeepLink);
return () => {
Linking.removeEventListener('url', handleDeepLink);
};
}, []);
return (
);
}
export default App;
"""
## 6. Platform-Specific Code
### 6.1. Standard
Use platform-specific extensions or the "Platform" API for handling platform-specific logic.
* **Do This:** Create separate files with ".ios.js" or ".android.js" extensions for platform-specific implementations or use the "Platform" API to conditionally execute code based on the platform.
* **Don't Do This:** Write complex inline conditional statements to handle platform differences.
**Why:** Platform-specific code organization improves code clarity and maintainability and allows you to easily adapt the application to different platforms.
**Example:**
"""typescript
// src/components/MyComponent.ios.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
backgroundColor: 'lightblue', // iOS-specific style
},
text: {
fontSize: 16,
},
});
const MyComponent = () => (
This is an iOS component.
);
export default MyComponent;
// src/components/MyComponent.android.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
backgroundColor: 'lightgreen', // Android-specific style
},
text: {
fontSize: 16,
},
});
const MyComponent = () => (
This is an Android component.
);
export default MyComponent;
// src/components/MyComponent.tsx - Generic Component that imports from each platform
import React from 'react';
import { Platform } from 'react-native';
import MyComponentIOS from './MyComponent.ios';
import MyComponentAndroid from './MyComponent.android';
const MyComponent = Platform.select({
ios: () => ,
android: () => ,
default: () => Unsupported platform,
});
export default MyComponent;
"""
### 6.2. Standard
Use platform-specific styling for optimal UI rendering.
* **Do This:** Adjust styling based on the platform to ensure consistent and visually appealing UI across different devices.
* **Don't Do This:** Use a single set of styles for all platforms, as this can lead to UI inconsistencies.
**Why:** Platform-specific styling improves the user experience and ensures that the application looks and feels native on each platform.
Consider using "PlatformColor" to automatically adjust for system theme changes.
## 7. Performance and Optimization
### 7.1. Standard
Optimize images for mobile devices.
* **Do This:** Compress images, use appropriate image formats (JPEG for photos, PNG for graphics), and resize images to the required dimensions.
* **Don't Do This:** Use large, unoptimized images, as this can significantly impact application performance and storage usage.
**Why:** Optimized images reduce the application's size, improve loading times, and conserve bandwidth.
### 7.2. Standard
Use memoization techniques to prevent unnecessary re-renders.
* **Do This:** Wrap functional components with "React.memo" to prevent re-renders when props have not changed. Use "useMemo" and "useCallback" hooks to memoize expensive calculations and function references.
* **Don't Do This:** Skip memoization altogether, as this can lead to performance issues in complex applications.
**Why:** Memoization optimizes rendering performance by preventing unnecessary re-renders of components and recalculations of values.
**Example:**
"""typescript
import React, { useState, useCallback, useMemo } from 'react';
interface ExpensiveComponentProps {
data: number[];
}
const ExpensiveComponent: React.FC = React.memo(({ data }) => {
const processedData = useMemo(() => {
console.log('Processing data...');
// Simulate an expensive calculation
return data.map(item => item * 2);
}, [data]);
return (
Processed Data:
{processedData.map((item, index) => (
{item}
))}
);
});
const MyComponent = () => {
const [count, setCount] = useState(0);
const [data, setData] = useState([1, 2, 3, 4, 5]);
const increment = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []);
const updateData = () => {
setData(prevData => [...prevData, prevData.length + 1]);
};
return (
Count: {count}
);
};
export default MyComponent;
"""
### 7.3. Standard
Use FlatList or SectionList for rendering large lists of data.
* **Do This:** Use "FlatList" or "SectionList" components for rendering lists with a large number of items, as these components optimize rendering performance by only rendering items that are currently visible on the screen.
* **Don't Do This:** Use "ScrollView" to render large lists, as this can lead to performance issues due to rendering all items at once.
**Why:** "FlatList" and "SectionList" optimize rendering performance by virtualizing the list, i.e., only rendering the items that are currently visible on the screen.
## 8. Security
### 8.1 Standard
Secure API keys and sensitive information.
* **Do This:** Store API keys and other sensitive information securely using environment variables or secure storage mechanisms (e.g., React Native Keychain). Never include API keys directly in the code.
* **Don't Do This:** Commit API keys or other sensitive information to the source code repository.
**Why:** Protecting API keys and sensitive information prevents unauthorized access to your application and its data.
**Important Note**: Detailed steps on securely storing keys depend on third-party native modules designed for secure storage. General best practices involve never directly embedding keys in the code.
### 8.2 Standard
Implement proper input validation and sanitization.
* **Do This:** Validate and sanitize user inputs to prevent security vulnerabilities (e.g., SQL injection, cross-site scripting). Use appropriate encoding and escaping techniques when displaying user-generated content.
* **Don't Do This:** Trust user input without any validation or sanitization.
**Why:** Input validation and sanitization protect your application from malicious attacks and prevent data corruption.
### 8.3 Standard
Secure communication with APIs
* **Do This:** Always use "HTTPS" rather than "HTTP" for API communications
* **Don't Do This:** Send sensitive data over unencrypted channels.
**Why:** HTTPS encrypts data transmitted between the app and the server, preventing eavesdropping and man-in-the-middle attacks.
### 8.4 Standard
Implement certificate pinning
* **Do This
danielsogl
Created Mar 6, 2025
This guide explains how to effectively use .clinerules with Cline, the AI-powered coding assistant.
The .clinerules file is a powerful configuration file that helps Cline understand your project's requirements, coding standards, and constraints. When placed in your project's root directory, it automatically guides Cline's behavior and ensures consistency across your codebase.
Place the .clinerules file in your project's root directory. Cline automatically detects and follows these rules for all files within the project.
# Project Overview project: name: 'Your Project Name' description: 'Brief project description' stack: - technology: 'Framework/Language' version: 'X.Y.Z' - technology: 'Database' version: 'X.Y.Z'
# Code Standards standards: style: - 'Use consistent indentation (2 spaces)' - 'Follow language-specific naming conventions' documentation: - 'Include JSDoc comments for all functions' - 'Maintain up-to-date README files' testing: - 'Write unit tests for all new features' - 'Maintain minimum 80% code coverage'
# Security Guidelines security: authentication: - 'Implement proper token validation' - 'Use environment variables for secrets' dataProtection: - 'Sanitize all user inputs' - 'Implement proper error handling'
Be Specific
Maintain Organization
Regular Updates
# Common Patterns Example patterns: components: - pattern: 'Use functional components by default' - pattern: 'Implement error boundaries for component trees' stateManagement: - pattern: 'Use React Query for server state' - pattern: 'Implement proper loading states'
Commit the Rules
.clinerules in version controlTeam Collaboration
Rules Not Being Applied
Conflicting Rules
Performance Considerations
# Basic .clinerules Example project: name: 'Web Application' type: 'Next.js Frontend' standards: - 'Use TypeScript for all new code' - 'Follow React best practices' - 'Implement proper error handling' testing: unit: - 'Jest for unit tests' - 'React Testing Library for components' e2e: - 'Cypress for end-to-end testing' documentation: required: - 'README.md in each major directory' - 'JSDoc comments for public APIs' - 'Changelog updates for all changes'
# Advanced .clinerules Example project: name: 'Enterprise Application' compliance: - 'GDPR requirements' - 'WCAG 2.1 AA accessibility' architecture: patterns: - 'Clean Architecture principles' - 'Domain-Driven Design concepts' security: requirements: - 'OAuth 2.0 authentication' - 'Rate limiting on all APIs' - 'Input validation with Zod'
# Tooling and Ecosystem Standards for React Native This document outlines coding standards specifically related to tooling and ecosystem choices within React Native projects. The emphasis is on selecting, configuring, and utilizing tools and libraries that enhance development speed, code quality, maintainability, and performance in modern React Native applications. ## 1. Project Setup and Tooling ### 1.1. Package Management **Standard:** Use Yarn or npm for package management. Prefer Yarn 3+ with Plug'n'Play (PnP) for improved performance and dependency management. **Do This:** """bash # Using Yarn yarn add react react-native # Using npm npm install react react-native """ **Don't Do This:** * Mixing "yarn" and "npm" in the same project. * Committing "node_modules" directory. **Why:** Consistent package management ensures reproducible builds and avoids dependency conflicts. Yarn PnP offers faster installations and a cleaner project structure by eliminating the "node_modules" directory. **Example (Yarn PnP):** 1. Enable PnP by setting "nodeLinker: pnp" in ".yarnrc.yml". 2. Install dependencies: "yarn install" ### 1.2. Development Environment **Standard:** Use VS Code or a similar IDE with React Native specific extensions. **Do This:** Install the following VS Code extensions: * ESLint * Prettier * React Native Tools (if using VS Code) * Debugger for Chrome/Edge (for web debugging of React Native components) **Don't Do This:** * Using a basic text editor without linting, formatting, or debugging capabilities. **Why:** IDE extensions provide real-time feedback on code quality, formatting, and potential errors, significantly improving developer productivity. **Example (VS Code .vscode/settings.json):** """json { "editor.formatOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "files.eol": "\n", //Enforce consistent line endings "files.insertFinalNewline": true, "files.trimTrailingWhitespace": true, "prettier.requireConfig": true // Enforce project Prettier config } """ ### 1.3. CLI Tools **Standard:** Use "npx" to execute locally installed CLI tools. **Do This:** """bash npx react-native init MyApp npx eslint . --fix """ **Don't Do This:** * Installing CLI tools globally unless strictly necessary. **Why:** "npx" ensures that you are using the version of the tool specified in your "package.json", avoiding version conflicts and inconsistencies across different environments. ### 1.4. TypeScript **Standard:** Strongly consider using TypeScript for type safety, improved code maintainability, and enhanced developer experience. **Do This:** * Initialize a new React Native project with TypeScript ("npx react-native init MyApp --template react-native-template-typescript"). * Gradually migrate existing JavaScript projects to TypeScript. * Use TypeScript interfaces and types extensively to define data structures and component props. * Enable strict mode in "tsconfig.json". **Don't Do This:** * Using "any" type excessively, defeating the purpose of TypeScript. * Ignoring TypeScript compiler errors. **Why:** TypeScript reduces runtime errors, improves code readability, and facilitates code refactoring, especially in large and complex projects. **Example (TypeScript component):** """typescript import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; interface Props { name: string; age: number; } const Greeting: React.FC<Props> = ({ name, age }) => { return ( <View style={styles.container}> <Text>Hello, {name}!</Text> <Text>You are {age} years old.</Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 10, backgroundColor: '#eee', margin: 5, }, }); export default Greeting; """ ### 1.5. Debugging **Standard:** Leverage React Native Debugger or Chrome DevTools for debugging JavaScript code. Use Flipper for inspecting native modules, logs, and network requests. **Do This:** * Install React Native Debugger standalone app. * Install Flipper desktop app. * Enable remote debugging in the React Native app. * Use "console.log", "console.warn", and "console.error" judiciously for debugging. **Don't Do This:** * Relying solely on "alert" for debugging. * Leaving debugging statements in production code. **Why:** React Native Debugger and Flipper provide powerful tools for inspecting the application state, network requests, and native module behavior, making debugging more efficient. **Example (Using Flipper):** 1. Install the required Flipper plugins (React, Network, Layout). 2. Ensure the React Native app is connected to Flipper. 3. Inspect the component hierarchy, network requests, and logs in the Flipper UI. ### 1.6. EAS Build and Update **Standard:** Employ EAS (Expo Application Services) Build for building and distributing your application. Use EAS Update for managing over-the-air updates. **Do This:** * Configure your "eas.json" to define build profiles. * Utilize EAS CLI build command for creating builds: "eas build -p android --profile production" * Leverage EAS update push commands when deploying updates **Don't Do This:** * Relying on manual build processes which are error-prone. * Neglecting over-the-air updates when applicable. **Why:** EAS simplifies the complex process of building and distributing React Native apps to the app stores, saving time and reducing configuration overhead. EAS Update enables faster iteration cycles by deploying code changes directly to users without requiring a new app store submission. ## 2. UI Libraries and Component Design ### 2.1. Component Libraries **Standard:** Choose a UI component library like React Native Paper, NativeBase, or UI Kitten based on the specific project's needs and design requirements. **Do This:** * Evaluate different component libraries based on their features, performance, and customization options. * Use a consistent component library throughout the project for a unified look and feel. * Customize the component library's theme to match the application's branding. **Don't Do This:** * Mixing components from multiple UI libraries without a clear reason, leading to visual inconsistencies and increased bundle size. * Reinventing the wheel by creating custom components for common UI elements already provided by UI libraries. **Why:** UI component libraries provide pre-built, well-tested, and customizable UI elements that accelerate development and ensure a consistent user interface. **Example (React Native Paper):** """javascript import React from 'react'; import { Appbar, Button } from 'react-native-paper'; const MyComponent = () => { return ( <> <Appbar.Header> <Appbar.Content title="My App" /> </Appbar.Header> <Button mode="contained" onPress={() => console.log('Pressed')}> Press me </Button> </> ); }; export default MyComponent; """ ### 2.2. Styling **Standard:** Use StyleSheet for basic inline styles and consider using Styled Components or Emotion for more complex styling scenarios, particularly when dealing with dynamic styles or theming. **Do This:** * Use "StyleSheet.create" for performance optimization. * Adopt a consistent naming convention for style properties. * Leverage platform-specific styles using "Platform.OS". * Use theme providers from UI libraries or create a custom theme context for consistent styling across the application. **Don't Do This:** * Using inline styles excessively, leading to code duplication and performance issues. * Hardcoding colors and sizes directly in the components. **Why:** StyleSheet provides a performant way to define styles, while Styled Components and Emotion offer advanced features like dynamic styling, theming, and CSS-in-JS capabilities. **Example (Styled Components):** """javascript import styled from 'styled-components/native'; import { Platform } from 'react-native'; const StyledView = styled.View" background-color: ${props => props.theme.backgroundColor}; padding: 10px; margin: 5px; border-radius: 5px; ${Platform.select({ ios: " shadow-color: #000; shadow-offset: 0px 2px; shadow-opacity: 0.25; shadow-radius: 3.84px; ", android: " elevation: 5; ", })} "; const StyledText = styled.Text" color: ${props => props.theme.textColor}; font-size: 16px; "; export { StyledView, StyledText }; """ ### 2.3 State Management **Standard:** Choose Zustand, Jotai, Recoil, or Redux Toolkit depending on the complexity of your application and your team's experience. For simpler applications, consider using React Context with "useReducer" for local state management. **Do This:** * Carefully evaluate different state management libraries based on their learning curve, performance, and features. * Use Redux Toolkit for projects that require a predictable and centralized state management solution with features like middleware and devtools. * Use Zustand, Jotai or Recoil for light-weight approaches better suited for local or component-specific state. * Structure your state using atomic principles in Jotai, or slices using Redux Toolkit. * Avoid over-engineering state management for simple applications. **Don't Do This:** * Using global state for component-specific data. * Mutating state directly. **Why:** State management libraries provide structured and predictable ways to manage application state, especially in complex applications with multiple components sharing data. **Example (Zustand):** """javascript import create from 'zustand'; interface BearState { bears: number; increase: (by: number) => void; } const useStore = create<BearState>((set) => ({ bears: 0, increase: (by) => set((state) => ({ bears: state.bears + by })), })); export default useStore; """ ### 2.4. Navigation **Standard:** Use React Navigation library for handling navigation. **Do This:** * Use the latest version of React Navigation. * Define navigation stacks and tabs using the "createNativeStackNavigator", "createBottomTabNavigator", or "createDrawerNavigator" functions. * Pass parameters between screens using the "navigation.navigate" method. * Use "useNavigation" hook to access the navigation object from within a component. * Centralize your navigation configuration within a "NavigationService" to ease refactoring, and ensure that all routes are defined in a single place. **Don't Do This:** * Relying on third-party navigation solutions that are not actively maintained. * Passing large amounts of data as navigation parameters. * Using string-based route names directly without typing them. **Why:** React Navigation provides a flexible and extensible navigation solution for React Native applications, supporting various navigation patterns and customization options. **Example (React Navigation):** """javascript import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); const HomeScreen = ({ navigation }) => { return ( <Button title="Go to Details" onPress={() => navigation.navigate('Details', { itemId: 86 })} /> ); }; const DetailsScreen = ({ route }) => { const { itemId } = route.params; return ( <Text>Details Screen, item ID: {JSON.stringify(itemId)}</Text> ); }; const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; """ ## 3. Data Fetching and APIs ### 3.1. HTTP Client **Standard:** Use "axios" or the built-in "fetch" API for making HTTP requests. **Do This:** * Use "async/await" syntax for handling asynchronous operations. * Handle errors gracefully using "try/catch" blocks. * Implement request timeouts to prevent indefinite loading states. * Use a base URL for API endpoints to simplify code maintenance. * Consider adopting a library like "react-query" or "swr" for enhanced data fetching capabilities like caching, background updates, and optimistic updates. **Don't Do This:** * Using deprecated libraries for making HTTP requests. * Ignoring potential errors during API calls. * Hardcoding API keys or sensitive data directly in the code. **Why:** "axios" and "fetch" provide reliable and flexible ways to interact with APIs, while "react-query" and "swr" offer additional features for managing data fetching. **Example (Axios with TypeScript):** """typescript import axios from 'axios'; interface User { id: number; name: string; email: string; } const getUsers = async (): Promise<User[]> => { try { const response = await axios.get<User[]>('https://jsonplaceholder.typicode.com/users'); return response.data; } catch (error) { console.error(error); throw error; } }; export default getUsers; """ ### 3.2. Data Persistence **Standard:** Use AsyncStorage for storing small amounts of data locally. For larger or more complex datasets, consider using SQLite, Realm, or other suitable database solutions. **Do This:** * Store user authentication tokens securely using Keychain or similar secure storage mechanisms. * Use a consistent naming convention for storage keys. * Implement data encryption for sensitive information. * Consider using a library like "redux-persist" to automatically persist and rehydrate Redux state. **Don't Do This:** * Storing large amounts of data in AsyncStorage, leading to performance issues. * Storing sensitive information in plain text. * Blocking the main thread with synchronous storage operations. **Why:** AsyncStorage provides a simple key-value storage solution, while SQLite and Realm offer more robust database capabilities for managing larger datasets. Secure storage mechanisms like Keychain help protect sensitive information. **Example (AsyncStorage):** """javascript import AsyncStorage from '@react-native-async-storage/async-storage'; const storeData = async (key, value) => { try { const jsonValue = JSON.stringify(value) await AsyncStorage.setItem(key, jsonValue) } catch (e) { console.error("Error storing data", e) } } const getData = async (key) => { try { const jsonValue = await AsyncStorage.getItem(key) return jsonValue != null ? JSON.parse(jsonValue) : null; } catch(e) { console.error("Error getting data", e) return null; } } """ ## 4. Testing ### 4.1. Unit Testing **Standard:** Use Jest or Mocha with Enzyme or React Testing Library for writing unit tests. **Do This:** * Write unit tests for all components, functions, and modules. * Use mocking to isolate components and functions during testing. * Aim for high test coverage. * Run tests automatically on every commit using a CI/CD pipeline. **Don't Do This:** * Skipping unit tests for critical parts of the application. * Writing tests that are too tightly coupled to the implementation details. **Why:** Unit tests help to ensure that the code is working correctly and to prevent regressions when making changes. **Example (Jest with React Testing Library):** """javascript import React from 'react'; import { render, screen } from '@testing-library/react-native'; import Greeting from '../Greeting'; //Assuming the Greeting component from the TypeScript example describe('Greeting Component', () => { it('renders the greeting message', () => { render(<Greeting name="John" age={30} />); expect(screen.getByText('Hello, John!')).toBeDefined(); expect(screen.getByText('You are 30 years old.')).toBeDefined(); }); }); """ ### 4.2. End-to-End Testing **Standard:** Use Detox or Appium for writing end-to-end tests. **Do This:** * Write end-to-end tests to verify the functionality of the entire application. * Run end-to-end tests on real devices or emulators. * Use a CI/CD pipeline to automatically run end-to-end tests on every commit. **Don't Do This:** * Relying solely on manual testing. * Skipping end-to-end tests for critical user flows. **Why:** End-to-end tests help to ensure that the entire application is working correctly and to prevent regressions when making changes. ## 5. Code Quality and Linting ### 5.1. Linting and Formatting **Standard:** Use ESLint with Prettier for code linting and formatting. **Do This:** * Configure ESLint with React Native specific rules. * Configure Prettier with consistent formatting options. * Integrate ESLint and Prettier with your IDE for real-time feedback. * Use a pre-commit hook to automatically lint and format the code before committing. **Don't Do This:** * Ignoring ESLint and Prettier warnings and errors. * Using inconsistent code formatting. **Why:** ESLint and Prettier help to enforce consistent coding standards and to prevent common coding errors, improving code quality and maintainability. **Example (.eslintrc.js):** """javascript module.exports = { root: true, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', ], parser: '@typescript-eslint/parser', plugins: ['react', '@typescript-eslint', 'prettier'], rules: { 'prettier/prettier': 'error', 'react/prop-types': 'off', // TypeScript handles prop types '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-explicit-any': 'warn', }, settings: { react: { version: 'detect', }, }, }; """ ### 5.2. Static Analysis **Standard:** Consider using SonarQube or similar static analysis tools to identify potential code quality issues. **Do This:** * Integrate static analysis tools with your CI/CD pipeline. * Address code quality issues identified by static analysis tools. **Don't Do This:** * Ignoring code quality issues identified by static analysis tools. **Why:** Static analysis tools can help to identify potential code quality issues that may not be caught by linting or testing. ## 6. Libraries to consider * **react-native-svg**: For dealing with vector graphics. * **lottie-react-native:** For animations. * **react-native-reanimated:** For creating smooth, complex animations and interactions. * **react-native-gesture-handler:** For native gesture handling and performance. * **formik / react-hook-form:** Form management. * **yup / zod:** Schema definition and validation. * **i18next:** Internationalization and localization. ## 7. Security Considerations * **Data Encryption:** Always encrypt sensitive data before storing it locally using libraries like "react-native-keychain". Implement end-to-end encryption where possible. * **Input Validation:** Validate all user inputs carefully to prevent injection attacks and other vulnerabilities. Use libraries like "yup" or "zod" for schema validation. * **Secure API Communication:** Use HTTPS for all API requests to protect data in transit. * **Dependency Management:** Regularly audit your project dependencies for vulnerabilities using tools like "npm audit" or "yarn audit". Keep dependencies up-to-date. * **Permissions:** Request only the necessary permissions from users. Explain why each permission is needed. * **Code Obfuscation:** Consider using code obfuscation to make it more difficult for attackers to reverse engineer your application. * **Authentication and Authorization:** Implement robust authentication and authorization mechanisms to protect user data. Use industry-standard protocols like OAuth 2.0 where appropriate. This coding standards document will be updated regularly to reflect the latest best practices in React Native development. Adherence to these standards will help to ensure that the code is high quality, maintainable, and performant.
# Security Best Practices Standards for React Native This document outlines security best practices for React Native development. Following these standards will help protect your applications against common vulnerabilities, ensuring the confidentiality, integrity, and availability of user data. This document assumes you already have a basic familiarity with React Native development. ## 1. Data Storage ### 1.1 Secure Local Storage **Why:** Storing sensitive information locally without proper encryption can expose it to unauthorized access. **Do This:** * Use secure storage libraries like "react-native-keychain" for storing sensitive data (passwords, tokens, API keys). This encrypts data at rest. * If "react-native-keychain" doesn't meet your needs for non-sensitive data, use "react-native-encrypted-storage", which offers a higher-level API than raw "AsyncStorage". **Don't Do This:** * Avoid storing sensitive data in plain text using "AsyncStorage". **Code Example:** """javascript import * as Keychain from 'react-native-keychain'; const storeCredentials = async (username, password) => { try { await Keychain.setGenericPassword(username, password); console.log('Credentials stored securely!'); } catch (error) { console.error('Keychain storage error:', error); } }; const retrieveCredentials = async () => { try { const credentials = await Keychain.getGenericPassword(); if (credentials) { console.log('Credentials retrieved successfully'); return { username: credentials.username, password: credentials.password, }; } else { console.log('No credentials stored'); return null; } } catch (error) { console.error('Keychain retrieval error:', error); return null; } }; // Usage Example const storeUserCredentials = async () => { await storeCredentials('myUsername', 'mySecretPassword'); }; const getUserCredentials = async () => { const credentials = await retrieveCredentials(); if (credentials) { console.log('Username:', credentials.username); console.log('Password:', credentials.password); } }; """ **Anti-Pattern:** Directly storing API keys in source code or configuration files. This makes them easily accessible if the code is compromised. **Great Code:** Utilizing environment variables and build-time configuration to manage API keys, combined with encrypted storage at runtime. """javascript // .env file (never commit this to your repository) API_KEY=your_secret_api_key """ """javascript // app.json { "expo": { "name": "MyApp", "slug": "myapp", "version": "1.0.0", "extra": { "apiKey": process.env.API_KEY } } } """ """javascript import Constants from 'expo-constants'; const getApiKey = () => { if (Constants.expoConfig && Constants.expoConfig.extra) { return Constants.expoConfig.extra.apiKey; } return null; }; const apiKey = getApiKey(); """ ### 1.2 Data Masking **Why:** Prevents direct exposure of sensitive data in logs, analytics, or error reports. **Do This:** * Mask sensitive data before logging or transmitting it. Libraries such as "crypto-js" can provide robust hashing. * Avoid logging sensitive information directly (e.g., passwords, credit card numbers). **Don't Do This:** * Log full user details or personally identifiable information (PII) without proper anonymization or redaction. **Code Example:** """javascript import CryptoJS from 'crypto-js'; const logEvent = (eventData) => { const maskedEventData = { ...eventData, creditCardNumber: eventData.creditCardNumber ? CryptoJS.SHA256(eventData.creditCardNumber).toString() : null, }; console.log('Event Data:', maskedEventData); // Send maskedEventData to analytics service }; // Usage Example const event = { type: 'payment', amount: 100, creditCardNumber: '1234567890123456', }; logEvent(event); """ ## 2. Network Communication ### 2.1 HTTPS Enforcement **Why:** Ensures data transmission is encrypted and prevents man-in-the-middle attacks. **Do This:** * Use HTTPS for all API requests. Verify SSL certificates to prevent SSL pinning bypasses. * Ensure your server-side infrastructure is configured to enforce HTTPS. **Don't Do This:** * Make API requests over HTTP, especially for sensitive data. **Code Example:** """javascript const fetchData = async () => { try { const response = await fetch('https://api.example.com/data', { // Note the HTTPS method: 'GET', headers: { 'Content-Type': 'application/json', }, }); if (!response.ok) { throw new Error("HTTP error! Status: ${response.status}"); } const data = await response.json(); console.log('Data:', data); } catch (error) { console.error('Fetch error:', error); } }; """ **Anti-pattern:** Hardcoding "http" in your API URL. **Great Code:** Using environment variables to define the API base URL which has "https". """javascript const API_BASE_URL = process.env.API_BASE_URL; // Should be an https URL const fetchData = async () => { try { const response = await fetch("${API_BASE_URL}/data", { method: 'GET', headers: { 'Content-Type': 'application/json', }, }); if (!response.ok) { throw new Error("HTTP error! Status: ${response.status}"); } const data = await response.json(); console.log('Data:', data); } catch (error) { console.error('Fetch error:', error); } }; """ ### 2.2 SSL Pinning **Why:** Validates the server's SSL certificate to prevent man-in-the-middle attacks by only trusting a specific certificate or public key. **Do This:** * Implement SSL pinning using libraries like "react-native-ssl-pinning". **Don't Do This:** * Rely solely on the operating system's trusted certificate authorities; they can be compromised. **Code Example:** """javascript import { check } from 'react-native-ssl-pinning'; const fetchDataWithSSLPinning = async () => { try { const response = await check('api.example.com', { // replace with your API endpoint publicKey: 'YOUR_PUBLIC_KEY_HERE', // replace with your public key }); if (response.valid) { console.log('SSL Pinning Validation Successful!'); // Proceed with fetching data } else { console.error('SSL Pinning Validation Failed!'); // Handle the error (e.g., refuse connection) } } catch (error) { console.error('SSL Pinning Check Error:', error); // Handle the error } }; """ ### 2.3 Input Validation **Why:** Prevents injection attacks and ensures data integrity. **Do This:** * Validate all user inputs on both the client and server sides. Sanitize inputs to prevent injection attacks. * Use appropriate data types and formats for input fields. * Utilize validation libraries like "Yup" or "React Hook Form" with validation schemas. **Don't Do This:** * Trust client-side validation alone. Always validate on the server. * Directly use user input in database queries or commands without sanitization. **Code Example:** """javascript import * as Yup from 'yup'; import { useForm, Controller } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { TextInput, Button, View, Text } from 'react-native'; const validationSchema = Yup.object().shape({ email: Yup.string().email('Invalid email').required('Email is required'), password: Yup.string() .min(8, 'Password must be at least 8 characters') .required('Password is required'), }); const LoginForm = () => { const { control, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(validationSchema) }); const onSubmit = data => { console.log(data); // Submit validated data }; return ( <View> <Controller control={control} render={({ field: { onChange, onBlur, value } }) => ( <TextInput style={{ borderWidth: 1, padding: 10, marginBottom: 10 }} onBlur={onBlur} onChangeText={onChange} value={value} placeholder="Email" keyboardType="email-address" /> )} name="email" defaultValue="" /> {errors.email && <Text style={{ color: 'red' }}>{errors.email.message}</Text>} <Controller control={control} render={({ field: { onChange, onBlur, value } }) => ( <TextInput style={{ borderWidth: 1, padding: 10, marginBottom: 10 }} onBlur={onBlur} onChangeText={onChange} value={value} placeholder="Password" secureTextEntry={true} /> )} name="password" defaultValue="" /> {errors.password && <Text style={{ color: 'red' }}>{errors.password.message}</Text>} <Button title="Login" onPress={handleSubmit(onSubmit)} /> </View> ); }; export default LoginForm; """ ## 3. Authentication and Authorization ### 3.1 Secure Authentication Flows **Why:** Robust authentication is the foundation of a secure application. **Do This:** * Implement multi-factor authentication (MFA) where possible. * Use established authentication protocols like OAuth 2.0 or OpenID Connect. * Store passwords securely using bcrypt or Argon2 hashing algorithms on the server-side. * Use biometric authentication (Face ID, Touch ID) via "expo-local-authentication" for enhanced security. **Don't Do This:** * Store passwords in plain text or use weak hashing algorithms like MD5 or SHA1. * Implement custom authentication protocols without proper security review. **Code Example (Biometric Authentication):** """javascript import * as LocalAuthentication from 'expo-local-authentication'; import { useState, useEffect } from 'react'; import { View, Text, Button, Alert } from 'react-native'; const BiometricAuth = () => { const [isBiometricSupported, setIsBiometricSupported] = useState(false); useEffect(() => { (async () => { const compatible = await LocalAuthentication.hasHardwareAsync(); setIsBiometricSupported(compatible); })(); }); const fallBackToDefaultAuth = () => { Alert.alert( 'Fallback Authentication', 'Please enter your password:', [ {text: 'Cancel', style: 'cancel'}, {text: 'OK', onPress: () => console.log('Password authentication handled here')}, ], {cancelable: false} ); }; const authenticate = async () => { const result = await LocalAuthentication.authenticateAsync({ promptMessage: 'Authenticate to access app', fallbackLabel: 'Enter Password', cancelLabel: 'Cancel', }); if(result.success) { Alert.alert('Authentication successful!'); } else { fallBackToDefaultAuth() console.log('Authentication failed', result.error); } }; return ( <View> <Text> {isBiometricSupported ? 'Your device is compatible with biometric authentication' : 'Face or Fingerprint scanner not available on this device'} </Text> <Button title="Authenticate" onPress={authenticate} /> </View> ); }; export default BiometricAuth; """ ### 3.2 Authorization **Why:** Prevents unauthorized access to resources. **Do This:** * Implement role-based access control (RBAC) to restrict access based on user roles. * Use JSON Web Tokens (JWT) for secure authorization. Verify JWT signatures on the server-side. * Implement proper access control checks in your API endpoints. **Don't Do This:** * Rely solely on client-side authorization checks. * Store sensitive data in JWTs; use them only for authorization. **Code Example (JWT Verification - Example Node.js Server):** """javascript // Node.js server example const jwt = require('jsonwebtoken'); const verifyToken = (req, res, next) => { const token = req.headers['authorization']; if (!token) { return res.status(403).send({ message: 'No token provided!' }); } jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => { if (err) { return res.status(401).send({ message: 'Unauthorized!' }); } req.userId = decoded.id; next(); }); }; //Example usage (protecting an API endpoint) app.get('/api/profile',verifyToken, (req, res) => { //accessing data after succesfull authentication res.status(200).send({message: "Access Granted"}) }) """" ## 4. Dependencies and Updates ### 4.1 Dependency Management **Why:** Vulnerabilities in third-party libraries can compromise your application. **Do This:** * Regularly update dependencies to patch security vulnerabilities. * Use a dependency scanning tool to identify known vulnerabilities (e.g., "npm audit", "yarn audit"). * Lock dependencies using "package-lock.json" or "yarn.lock" to ensure consistent versions across environments. **Don't Do This:** * Use outdated or unmaintained libraries. * Ignore dependency security warnings. **Code Example (Dependency Update Workflow):** 1. Run "npm audit" or "yarn audit" 2. Review identified vulnerabilities. 3. Run "npm update" or "yarn upgrade" to update vulnerable packages. 4. Test your application thoroughly after updating dependencies. ### 4.2 React Native Upgrades **Why:** Newer versions of React Native often include important security patches and performance improvements. Failing to upgrade leaves your application vulnerable to known exploits and missing out on optimizations. **Do This:** * Keep React Native and related packages updated to at least the stable *minor* version releases. Major version upgrades should be evaluated on a seperate time frame. * Review the release notes for each update to identify security-related fixes and breaking changes. * Use "react-native upgrade" to update your React Native project. * Test your application thoroughly after each upgrade. * Pay close attention to the deprecation warnings, and address them according to the most up-to-date documentation **Don't Do This:** * Stay on outdated React Native versions. * Ignore the deprecation warnings. ## 5. Code Obfuscation (Defense in Depth) ### **5.1 Code Obfuscation** **Why:** Makes it harder for attackers to reverse engineer your app, understand its logic, and identify vulnerabilities **Do This:** * Use tools like ProGuard (Android) and JavaScript obfuscators (e.g., "javascript-obfuscator") as part of your build process * Consider commercial React Native build services to automate the obfuscation process **Don't Do This:** * Realize that it's not a silver bullet, but a deterrent. * Rely *solely* on obfuscation as your only security measure **Code Example (JavaScript Obfuscation using "javascript-obfuscator"):** 1. Install "javascript-obfuscator": """bash npm install javascript-obfuscator --save-dev """ 2. Create an obfuscation script (e.g., "obfuscate.js"): """javascript const JavaScriptObfuscator = require('javascript-obfuscator'); const fs = require('fs'); const fileToObfuscate = 'src/App.js'; // Replace with your main file const outputFile = 'dist/App.obfuscated.js'; fs.readFile(fileToObfuscate, 'utf8', (err, data) => { if (err) { console.error('Error reading file:', err); return; } const obfuscationResult = JavaScriptObfuscator.obfuscate(data, { compact: true, controlFlowFlattening: true, deadCodeInjection: true, // ... other options }); fs.writeFile(outputFile, obfuscationResult.getObfuscatedCode(), (err) => { if (err) { console.error('Error writing file:', err); } else { console.log('File obfuscated successfully!'); } }); }); """ 3. Add a script to your "package.json": """json "scripts": { "obfuscate": "node obfuscate.js" } """ 4. Run the obfuscation script: """bash npm run obfuscate """ 5. Update your build process to use the obfuscated file. ## 6. Sensitive Information Handling ### 6.1 In-Memory Handling **Why:** Minimizing the time sensitive data exists in memory reduces the attack surface **Do This:** * Clear sensitive data from memory as soon as it's no longer needed. * Avoid storing sensitive information in global variables. * Use local variables with limited scope for processing sensitive data. **Don't Do This:** * Leave sensitive data lingering in memory longer than necessary. * Rely on garbage collection to automatically clear sensitive data (it's not guaranteed). **Code Example:** """javascript const processSensitiveData = (data) => { let sensitiveInfo = data.creditCardNumber; //Do processing. sensitiveInfo = null; // Clear from memory console.warn("sensitiveInfo is NUll NOW.", sensitiveInfo) }; """ ## 7. Error Handling and Logging ### 7.1 Secure Error Handling **Why:** Prevents exposing sensitive information in error messages. **Do This:** * Implement custom error handling to prevent exposing sensitive data in stack traces or error messages. * Log errors to a secure location, not to the console in production. **Don't Do This:** * Display detailed error messages to end-users in production. * Log sensitive data in error logs. **Code Example:** """javascript const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); // Replace with your actual endpoint if (!response.ok) { throw new Error("HTTP error! Status: ${response.status}"); } const data = await response.json(); console.log('Data:', data); } catch (error) { // Log error to a secure logging service (e.g., Sentry, Firebase Crashlytics) console.error('Fetch error occurred. Refer to secure logs for details.'); // Display a generic error message to the user // Alert.alert('Error', 'An unexpected error occurred. Please try again later.'); } }; """ ## 8. Platform-Specific Considerations ### 8.1 iOS Security **Why:** iOS has specific security features that should be utilized. **Do This:** * Utilize the iOS Keychain for secure storage of credentials. * Implement App Transport Security (ATS) to enforce HTTPS connections. * Protect against jailbreaking by detecting and responding appropriately. ### 8.2 Android Security **Why:** Understand Android-specific attack vectors and mitigation strategies. **Do This:** * Utilize Android Keystore for secure storage of encryption keys and credentials. * Protect against reverse engineering and tampering using ProGuard. * Implement runtime application self-protection (RASP) techniques. ## 9. Regular Security Audits **Why:**Proactively identify and address vulnerabilities. **Do This:** * Conduct regular code reviews and security audits. * Use static analysis tools to identify potential security flaws. * Perform penetration testing to simulate real-world attacks. * Keep abreast of the latest security threats and vulnerabilities. ## Conclusion Maintaining a secure React Native application is an ongoing process. By following these best practices, you can significantly reduce the risk of security vulnerabilities and protect your users' data. Regular reviews, updates, and vigilance are key to ensuring a secure and reliable application.
# Component Design Standards for React Native This document outlines the coding standards for React Native component design. It provides guidance on creating reusable, maintainable, and performant components. Following these standards ensures code consistency, reduces bugs, and enhances collaboration within development teams. The standards are based on the latest React Native best practices and aim to promote a modern, efficient development workflow. ## 1. Component Architecture and Structure ### 1.1. Component Types **Do This:** * Favor functional components with React Hooks over class components for new development. Function components are more concise, readable, and encourage better code organization. * Use class components only when integrating with older codebases or when very specific lifecycle methods are absolutely necessary and cannot be emulated with hooks (which is rare). **Don't Do This:** * Rely heavily on class components for new implementations. This leads to verbose code and potential performance overhead. * Mix functional and class components unnecessarily, as this introduces inconsistency and makes the codebase harder to understand. **Why:** Functional components with hooks promote better code organization, readability, and testability. They also align with the modern React paradigm, simplifying state management and side-effect handling. **Example:** """jsx // Functional Component with Hooks (Preferred) import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, ActivityIndicator } from 'react-native'; const MyComponent = ({ text }) => { const [loading, setLoading] = useState(true); useEffect(() => { // Simulate loading data setTimeout(() => { setLoading(false); }, 1000); }, []); if (loading) { return ( <View style={styles.container}> <ActivityIndicator size="large" color="#0000ff" /> </View> ); } return ( <View style={styles.container}> <Text style={styles.text}>{text}</Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, }, text: { fontSize: 16, }, }); export default MyComponent; // Class Component (Avoid for new development) import React, { Component } from 'react'; import { View, Text, StyleSheet } from 'react-native'; class MyClassComponent extends Component { constructor(props) { super(props); this.state = { message: 'Hello from Class Component!', }; } render() { return ( <View style={styles.container}> <Text style={styles.text}>{this.state.message}</Text> </View> ); } } const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, }, text: { fontSize: 16, }, }); export default MyClassComponent; """ ### 1.2. Component Composition **Do This:** * Favor component composition over deep inheritance. Create small, focused components that can be composed together to form more complex UIs. * Use React's "children" prop or render props to pass content between components. Consider using render callbacks as needed. **Don't Do This:** * Create large, monolithic components that handle too much logic. * Rely on deep inheritance hierarchies, as this makes code harder to understand and maintain. **Why:** Component composition promotes reusability, modularity, and testability. It also aligns with the React philosophy of building UIs from small, independent components. **Example:** """jsx // Composed Components import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; // Reusable Button Component const Button = ({ title, onPress, style }) => ( <TouchableOpacity style={[styles.button, style]} onPress={onPress}> <Text style={styles.buttonText}>{title}</Text> </TouchableOpacity> ); // Card Component using Button const Card = ({ children, title }) => ( <View style={styles.card}> <Text style={styles.cardTitle}>{title}</Text> {children} </View> ); const MyScreen = () => ( <View> <Card title="Welcome!"> <Text>This is content inside the card.</Text> <Button title="Click Me" onPress={() => alert('Button Pressed!')} /> </Card> </View> ); const styles = StyleSheet.create({ card: { backgroundColor: 'white', padding: 16, margin: 8, borderRadius: 8, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.23, shadowRadius: 2.62, elevation: 4, }, cardTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 8, }, button: { backgroundColor: '#2196F3', padding: 10, borderRadius: 5, marginTop: 10, }, buttonText: { color: 'white', textAlign: 'center', }, }); //Example of using a "render props" pattern const DataProvider = ({ url, render }) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch(url) .then(response => response.json()) .then(jsonData => { setData(jsonData); setLoading(false); }) .catch(error => { console.error("Error fetching data:", error); setLoading(false); //Ensure loading is set to false even on error }); }, [url]); return loading ? <Text>Loading data...</Text> : render(data); }; // Usage: const UserList = () => ( <DataProvider url="https://jsonplaceholder.typicode.com/users" render={users => ( <ScrollView> {users.map(user => ( <Text key={user.id}>{user.name}</Text> ))} </ScrollView> )} /> ); export default MyScreen; """ ### 1.3. Folder Structure **Do This:** * Organize components based on features or modules. Create separate folders for reusable components, screens, and utility functions. * Use a consistent naming convention for files and folders. **Don't Do This:** * Place all components in a single folder. * Use inconsistent naming conventions. **Why:** A well-organized folder structure improves code discoverability, maintainability, and scalability. **Example:** """ src/ ├── components/ # Reusable components │ ├── Button/ │ │ ├── Button.js # Component implementation │ │ └── Button.styles.js # Component styles │ ├── Card/ │ │ ├── Card.js │ │ └── Card.styles.js ├── screens/ # Application screens │ ├── HomeScreen/ │ │ ├── HomeScreen.js │ │ └── HomeScreen.styles.js │ ├── ProfileScreen/ │ │ ├── ProfileScreen.js │ │ └── ProfileScreen.styles.js ├── utils/ # Utility functions │ ├── api.js │ └── helpers.js """ ## 2. Component Implementation Details ### 2.1. Props Validation **Do This:** * Use "PropTypes" or TypeScript to define the expected types and shapes of component props. This helps catch errors early and improves code documentation. * Make use of default prop values as much as possible. **Don't Do This:** * Skip prop validation. * Use "any" types recklessly in TypeScript. **Why:** Prop validation improves code reliability and helps prevent unexpected errors. **Example:** """jsx // Using PropTypes import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; const MyComponent = ({ name, age, isAdmin, style }) => ( <View style={[styles.container, style]}> <Text style={styles.text}>Name: {name}</Text> <Text style={styles.text}>Age: {age}</Text> <Text style={styles.text}>Is Admin: {isAdmin ? 'Yes' : 'No'}</Text> </View> ); MyComponent.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number, isAdmin: PropTypes.bool, style: PropTypes.object, }; MyComponent.defaultProps = { age: 18, isAdmin: false, }; const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, }, text: { fontSize: 16, }, }); export default MyComponent; // Using TypeScript interface Props { name: string; age?: number; isAdmin?: boolean; style?: StyleProp<ViewStyle>; } const MyTypescriptComponent: React.FC<Props> = ({ name, age = 18, isAdmin = false, style }) => ( <View style={[styles.container, style]}> <Text style={styles.text}>Name: {name}</Text> <Text style={styles.text}>Age: {age}</Text> <Text style={styles.text}>Is Admin: {isAdmin ? 'Yes' : 'No'}</Text> </View> ); const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, }, text: { fontSize: 16, }, }); export default MyTypescriptComponent; """ ### 2.2. State Management **Do This:** * Use React's "useState" hook for local component state. * Use Context API, Redux, Zustand, or similar libraries for application-wide state management. * Consider using "useReducer" hook for more complex state logic within a component. **Don't Do This:** * Overuse global state management for local component state. * Mutate state directly (e.g., "this.state.value = newValue"). Always use "setState" or the state updater function provided by "useState". **Why:** Proper state management ensures predictable data flow and simplifies debugging. Avoid unnecessary re-renders that can occur with poorly managed state. **Example:** """jsx // Using useState hook import React, { useState } from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; const CounterComponent = () => { const [count, setCount] = useState(0); const increment = () => { setCount(prevCount => prevCount + 1); // Functional update form }; const decrement = () => { setCount(count - 1); }; return ( <View style={styles.container}> <Text style={styles.text}>Count: {count}</Text> <Button title="Increment" onPress={increment} /> <Button title="Decrement" onPress={decrement} /> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, }, text: { fontSize: 16, }, }); // Using useReducer hook import React, { useReducer } from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; const reducer = (state, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } }; const CounterWithReducer = () => { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( <View style={styles.container}> <Text style={styles.text}>Count: {state.count}</Text> <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} /> <Button title="Decrement" onPress={() => dispatch({ type: 'DECREMENT' })} /> </View> ); }; """ ### 2.3. Styling **Do This:** * Use React Native's "StyleSheet" API for defining styles. This helps to enforce consistency and improve performance. * Keep styles close to the component they are styling (co-location). * Leverage style inheritance and composition to avoid duplication. * Use themes and style variables for consistent look and feel. **Don't Do This:** * Use inline styles excessively, as this makes code harder to read and maintain. * Hardcode style values throughout the application. **Why:** Consistent styling improves the user experience and makes the application easier to maintain. **Example:** """jsx // Using StyleSheet import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const MyComponent = ({ text }) => ( <View style={styles.container}> <Text style={styles.text}>{text}</Text> </View> ); const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, alignItems: 'center', }, text: { fontSize: 16, color: '#333', }, }); // Example of Themes: const theme = { colors: { primary: '#2196F3', secondary: '#607D8B', text: '#333', background: '#f0f0f0' }, spacing: { small: 8, medium: 16, large: 24 }, typography: { fontSize: { small: 14, medium: 16, large: 18 } } }; //In a separate file, create a context import React from 'react'; const ThemeContext = React.createContext(theme); export default ThemeContext; //A custom hook to consume the theme: import { useContext } from 'react'; import ThemeContext from './ThemeContext'; const useTheme = () => useContext(ThemeContext); export default useTheme; //Then in a component import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import useTheme from './useTheme'; //Import the custom hook const ThemedComponent = () => { const theme = useTheme(); //Consume the theme return ( <View style={[styles.container, { backgroundColor: theme.colors.background }]}> <Text style={[styles.text, { color: theme.colors.text }]}>Themed Text</Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, borderRadius: 8, alignItems: 'center', }, text: { fontSize: 16, }, }); export default ThemedComponent; export default MyComponent; """ ### 2.4. Handling Asynchronous Operations **Do This:** * Use "async/await" syntax for handling asynchronous operations. * Implement proper error handling using "try/catch" blocks. * Show loading indicators while waiting for asynchronous operations to complete. **Don't Do This:** * Use callbacks excessively, as this can lead to callback hell. * Ignore potential errors during asynchronous operations. **Why:** Proper handling of asynchronous operations ensures a smooth and responsive user experience. **Example:** """jsx // Using async/await import React, { useState, useEffect } from 'react'; import { View, Text, Button, ActivityIndicator, StyleSheet } from 'react-native'; const DataFetchingComponent = () => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); if (!response.ok) { throw new Error("HTTP error! status: ${response.status}"); } const json = await response.json(); setData(json); } catch (e) { setError(e); console.error("Fetching error:", e); // Consider using a logging service in production } finally { setLoading(false); } }; fetchData(); }, []); if (loading) { return ( <View style={styles.container}> <ActivityIndicator size="large" color="#0000ff" /> </View> ); } if (error) { return ( <View style={styles.container}> <Text style={styles.text}>Error: {error.message}</Text> </View> ); } return ( <View style={styles.container}> <Text style={styles.text}>Title: {data.title}</Text> <Text style={styles.text}>Completed: {data.completed ? 'Yes' : 'No'}</Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, alignItems: 'center', }, text: { fontSize: 16, }, }); export default DataFetchingComponent; """ ## 3. Performance Optimization ### 3.1. Memoization **Do This:** * Use "React.memo" to memoize functional components and prevent unnecessary re-renders. * Use "useMemo" and "useCallback" hooks to memoize values and functions passed as props. **Don't Do This:** * Memoize components indiscriminately, as this can add unnecessary overhead. * Pass new object literals or inline functions as props to memoized components. **Why:** Memoization can improve performance by preventing unnecessary re-renders of components, particularly when dealing with complex UIs or expensive calculations. **Example:** """jsx // Using React.memo import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const MyComponent = ({ text }) => { console.log('MyComponent rendered'); // For debugging render frequency return ( <View style={styles.container}> <Text style={styles.text}>{text}</Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#f0f0f0', borderRadius: 8, margin: 10, }, text: { fontSize: 16, }, }); const MemoizedComponent = React.memo(MyComponent); //Memoize the component export default MemoizedComponent; // Using useCallback and useMemo import React, { useState, useCallback, useMemo } from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; const ExpensiveComponent = React.memo(({ data, onClick }) => { console.log('ExpensiveComponent rendered'); return ( <Button title={"Item: ${data.value}"} onPress={onClick} /> ); }); const MyParentComponent = () => { const [count, setCount] = useState(0); const data = useMemo(() => ({ value: count }), [count]); //Memoize data const handleClick = useCallback(() => { // Memoize the callback alert("Clicked item ${count}"); }, [count]); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={() => setCount(count + 1)} /> <ExpensiveComponent data={data} onClick={handleClick} /> </View> ); }; """ ### 3.2. Optimizing List Rendering **Do This:** * Use "FlatList" or "SectionList" components for rendering large lists. These components virtualize the list and only render items that are currently visible on the screen. * Provide a unique "key" prop for each item in the list. * Implement "getItemLayout" prop to improve scrolling performance. **Don't Do This:** * Use "ScrollView" for rendering large lists, as this can cause performance issues. * Use the index as the key prop. **Why:** "FlatList" and "SectionList" optimize list rendering by virtualizing the list and only rendering items that are currently visible on the screen. **Example:** """jsx // Using FlatList import React from 'react'; import { FlatList, View, Text, StyleSheet } from 'react-native'; const data = Array.from({ length: 100 }, (_, i) => ({ id: i.toString(), value: "Item ${i + 1}" })); const Item = ({ title }) => ( <View style={styles.item}> <Text style={styles.title}>{title}</Text> </View> ); const MyListComponent = () => { const renderItem = ({ item }) => ( <Item title={item.value} /> ); return ( <FlatList data={data} renderItem={renderItem} keyExtractor={item => item.id} getItemLayout={(data, index) => ({length: 50, offset: 50 * index, index})} //Example, assuming item height is fixed at 50 /> ); }; const styles = StyleSheet.create({ item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 16, }, }); export default MyListComponent; """ ### 3.3 Image Optimization **Do This:** * Use optimized image formats (e.g., WebP) to reduce image size. * Use "Image" component's "resizeMode" prop effectively (cover, contain, stretch, repeat, center). * Consider using a library like "react-native-fast-image" for improved image caching and performance. **Don't Do This:** * Use large, unoptimized images. * Load images unnecessarily. **Why:** Optimized images reduce the application's footprint, improve loading times, and enhance the user experience. **Example:** """jsx // Using Image component import React from 'react'; import { Image, View, StyleSheet } from 'react-native'; const MyImageComponent = () => ( <View style={styles.container}> <Image style={styles.image} source={{ uri: 'https://via.placeholder.com/150', }} resizeMode="cover" //Choose an appropriate resizeMode /> </View> ); const styles = StyleSheet.create({ container: { padding: 20, }, image: { width: 150, height: 150, }, }); export default MyImageComponent; //Using FastImage import FastImage from 'react-native-fast-image' const FastImageComponent = () => ( <View style={styles.container}> <FastImage style={styles.image} source={{ uri: 'https://via.placeholder.com/150', headers: { Authorization: 'someAuthToken' }, priority: FastImage.priority.normal, }} resizeMode={FastImage.resizeMode.contain} /> </View> ) """ ## 4. Security Best Practices ### 4.1. Data Validation and Sanitization **Do This:** * Validate and sanitize all user inputs to prevent injection attacks (e.g., SQL injection, XSS). * Use secure storage mechanisms for storing sensitive data (e.g., passwords, API keys). **Don't Do This:** * Trust user inputs without validation. * Store sensitive data in plain text. **Why:** Data validation and sanitization prevent malicious code from being injected into the application. Secure storage protects sensitive data from unauthorized access. ### 4.2. Secure Communication **Do This:** * Use HTTPS for all network communication to encrypt data in transit. * Implement proper authentication and authorization mechanisms to protect API endpoints. **Don't Do This:** * Use HTTP for transmitting sensitive data. * Expose API endpoints without authentication. **Why:** Secure communication protects data from eavesdropping and tampering. Proper authentication and authorization prevent unauthorized access to API endpoints. ### 4.3. Dependency Management **Do This:** * Keep dependencies up-to-date to patch security vulnerabilities. * Review dependencies for potential security risks. * Use a package manager (e.g., npm, yarn) to manage dependencies. **Don't Do This:** * Use outdated dependencies. * Install dependencies from untrusted sources. **Why:** Up-to-date dependencies reduce the risk of security vulnerabilities. Reviewing dependencies helps to identify and mitigate potential security risks. ## 5. Testing ### 5.1. Unit Testing **Do This:** * Write unit tests for individual components and functions to ensure they work as expected. * Use a testing framework (e.g., Jest, Mocha) to run unit tests. **Don't Do This:** * Skip unit testing. * Write tests that are too complex or tightly coupled to the implementation. **Why:** Unit tests provide a safety net for code changes and help to prevent regressions. ### 5.2. Integration Testing **Do This:** * Write integration tests to ensure that components work together correctly. * Use a testing framework (e.g., Detox, Appium) to run integration tests. **Don't Do This:** * Skip integration testing. * Write tests that are too brittle or rely on specific implementation details. **Why:** Integration tests ensure that the different parts of the application work together correctly. ### 5.3 Mocking **Do This:** * Mock external API calls * Mock native dependencies such as file system access or bluetooth * Use mocking libraries such as jest.mock or react-native-reanimated mocks to reduce build times and improve test isolation. **Don't Do This:** * Skip mocking key dependencies that will block testing. * Over mock components that makes tests unnecessary brittle. **Why:** Mocking dependencies decreases test times and improves granularity. By adhering to these component design standards, development teams can create React Native applications that are maintainable, performant, secure, and testable. These guidelines are intended to be flexible and adaptable to the specific needs of individual projects.
# Code Style and Conventions Standards for React Native This document outlines code style and conventions standards for React Native development. Adhering to these standards promotes code readability, maintainability, consistency, and collaboration within development teams. It emphasizes modern approaches and patterns based on the latest React Native features and best practices. These standards aim to provide specific, actionable guidance with the 'why' behind each convention. ## 1. General Formatting ### 1.1. Indentation and Whitespace * **Do This:** Use 2 spaces for indentation. Avoid tabs. * **Don't Do This:** Use tabs or more than 2 spaces for indentation. * **Why:** Consistent indentation enhances code readability, making it easier to follow the code's structure. """javascript // Do This function MyComponent() { return ( <View> <Text>Hello, World!</Text> </View> ); } // Don't Do This function MyComponent() { return ( <View> <Text>Hello, World!</Text> </View> ); } """ ### 1.2. Line Length * **Do This:** Limit lines to a maximum of 120 characters. * **Don't Do This:** Exceed the line length limit. * **Why:** Shorter lines improve readability, especially on smaller screens or when viewing code side-by-side. ### 1.3. Trailing Commas * **Do This:** Use trailing commas in multi-line object literals, arrays, and function parameters. * **Don't Do This:** Omit trailing commas in multi-line structures. * **Why:** Trailing commas simplify adding, removing, or reordering items and reduce Git diff noise. """javascript // Do This const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', }, // Trailing comma }); // Don't Do This const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center' } }); """ ### 1.4. Whitespace Usage * **Do This:** Use whitespace to separate logical blocks of code. Add a newline between functions and components. Use single spaces around operators. * **Don't Do This:** Clutter code with excessive or inconsistent whitespace. """javascript // Do This function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } function MyComponent() { const result = add(5, 3); return ( <View> <Text>{result}</Text> </View> ); } // Don't Do This function add(a,b){return a+b;}function subtract(a,b){return a-b;} function MyComponent(){const result=add(5,3);return(<View><Text>{result}</Text></View>);} """ ### 1.5. Consistent Quote Usage * **Do This:** Use single quotes ("'") for JSX attributes and JavaScript strings. * **Don't Do This:** Use double quotes (""") in JSX attributes or inconsistently mix single and double quotes. * **Why:** Consistency improves readability, and single quotes are generally preferred in React/React Native. """javascript // Do This <Text style={styles.text}>{'Hello, World!'}</Text> // Don't Do This <Text style={styles.text}>"Hello, World!"</Text> """ ## 2. Naming Conventions ### 2.1. Variables and Constants * **Do This:** Use "camelCase" for variable and function names. Use "PascalCase" for component names. Use uppercase with underscores ("UPPER_CASE_WITH_UNDERSCORES") for constants. * **Don't Do This:** Use inconsistent casing or vague, non-descriptive names. * **Why:** Clear naming conventions improve code understanding and maintainability. """javascript // Do This const initialValue = 0; function calculateTotal() { /* ... */ } function MyComponent() { /* ... */ } const API_URL = 'https://example.com/api'; // Don't Do This const initVal = 0; // Vague name function calc() { /* ... */ } // Vague name function mycomponent() { /* ... */ } // Incorrect casing const apiUrl = 'https://example.com/api'; // Incorrect casing for constant """ ### 2.2. Component File Naming * **Do This:** Name component files using "PascalCase" with ".js" or ".jsx" extensions (e.g., "MyComponent.js"). Prefer ".jsx" for files containing JSX. * **Don't Do This:** Use inconsistent naming schemes or non-descriptive file names. * **Why:** Consistent file naming facilitates easier file searching and project organization. ### 2.3. Style Sheet Naming * **Do This:** Name style sheets using "PascalCase" matching the component name (e.g., "MyComponent.styles.js"). * **Don't Do This:** Use generic names like "styles.js" or "stylesheet.js", which can lead to confusion. Isolate styles in separate files for better organization. * **Why:** Clear style sheet naming clarifies the relationship between components and their associated styles. """javascript // MyComponent.js import React from 'react'; import { View, Text } from 'react-native'; import styles from './MyComponent.styles'; function MyComponent() { return ( <View style={styles.container}> <Text style={styles.text}>Hello, World!</Text> </View> ); } export default MyComponent; // MyComponent.styles.js import { StyleSheet } from 'react-native'; export default StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 20, }, }); """ ### 2.4. Prop Naming * **Do This:** Use "camelCase" for props. Use descriptive names that clearly indicate the prop's purpose. * **Don't Do This:** Use short, ambiguous names or inconsistent casing. * **Why:** Meaningful prop names improve component API clarity. """javascript // Do This function MyComponent({ itemName, isEnabled }) { return ( <View> <Text>{itemName}</Text> {isEnabled ? <Text>Enabled</Text> : <Text>Disabled</Text>} </View> ); } // Don't Do This function MyComponent({ name, enabled }) { // Less descriptive names return ( <View> <Text>{name}</Text> {enabled ? <Text>Enabled</Text> : <Text>Disabled</Text>} </View> ); } """ ## 3. Component Structure and Best Practices ### 3.1. Functional Components with Hooks * **Do This:** Prefer functional components with Hooks over class components. * **Don't Do This:** Rely solely on class components, especially for new development. * **Why:** Functional components with Hooks offer a more concise and readable way to manage state and side effects. """javascript // Do This (Functional component with Hooks) import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; function Counter() { const [count, setCount] = useState(0); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={() => setCount(count + 1)} /> </View> ); } export default Counter; // Don't Do This (Class component - less preferred) import React, { Component } from 'react'; import { View, Text, Button } from 'react-native'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <View> <Text>Count: {this.state.count}</Text> <Button title="Increment" onPress={this.increment} /> </View> ); } } export default Counter; """ ### 3.2. Component Composition * **Do This:** Favor component composition over inheritance. Create small, reusable components. * **Don't Do This:** Build large, monolithic components or rely on deep inheritance hierarchies. * **Why:** Component composition promotes code reuse, testability, and maintainability. ### 3.3. Prop Types * **Do This:** Use TypeScript for prop type validation and static typing. * **Don't Do This:** Avoid defining prop types, or depend heavily on "PropTypes" runtime checking (use TypeScript instead). * **Why:** TypeScript provides compile-time type checking, leading to fewer runtime errors and better code maintainability, especially in large projects. """typescript // Do This (TypeScript) import React from 'react'; import { View, Text } from 'react-native'; interface Props { name: string; age?: number; // Optional prop } const MyComponent: React.FC<Props> = ({ name, age }) => { return ( <View> <Text>Name: {name}</Text> {age && <Text>Age: {age}</Text>} </View> ); }; export default MyComponent; """ ### 3.4. Stateless Components * **Do This:** Use stateless (pure) functional components whenever possible. * **Don't Do This:** Introduce state unnecessarily. * **Why:** Stateless components are simpler, easier to test, and improve performance. It avoids unnecessary re-renders if props haven’t changed. ### 3.5. Controlled vs. Uncontrolled Components * **Do This:** USe controlled components when you need to strictly control the input values. Use uncontrolled components if you just need to access the value when the form is submitted. """jsx // Controlled Component import React, { useState } from 'react'; import { View, TextInput } from 'react-native'; function ControlledInput() { const [text, setText] = useState(''); return ( <View> <TextInput value={text} onChangeText={setText} placeholder="Enter text" /> </View> ); } export default ControlledInput; // Uncontrolled Component import React, { useRef } from 'react'; import { View, TextInput, Button } from 'react-native'; function UncontrolledInput() { const inputRef = useRef(null); const handleSubmit = () => { console.log('Input value:', inputRef.current.value); // Or .current.props.value depending on RN version }; return ( <View> <TextInput ref={inputRef} defaultValue="" placeholder="Enter text" /> <Button title="Submit" onPress={handleSubmit} /> </View> ); } export default UncontrolledInput; """ ## 4. Styling ### 4.1. StyleSheet API * **Do This:** Use the "StyleSheet" API for defining styles. * **Don't Do This:** Use inline styles excessively. * **Why:** "StyleSheet" optimizes style creation and usage, enhancing performance. It also allows for better style management. """javascript // Do This import { StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 20, }, }); // Don't Do This (Excessive inline styles) <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}> <Text style={{ fontSize: 20 }}>Hello, World!</Text> </View> """ ### 4.2. Style Organization * **Do This:** Keep styles close to the component using them (e.g., "MyComponent.styles.js"). Employ separate files for global styles. * **Don't Do This:** Dump all styles into a single, massive stylesheet file. Adopt folder-based structure. * **Why:** Organized styles improve maintainability and reduce naming conflicts. ### 4.3. Platform-Specific Styles * **Do This:** Use "Platform.OS" to apply platform-specific styles. Employ the ".ios." and ".android." extensions for platform-specific files. * **Don't Do This:** Hardcode platform-specific values directly within components. * **Why:** Platform-specific styles ensure a consistent look and feel across different devices. """javascript // Do This import { StyleSheet, Platform } from 'react-native'; const styles = StyleSheet.create({ container: { paddingTop: Platform.OS === 'ios' ? 20 : 0, }, text: { fontSize: Platform.OS === 'ios' ? 16 : 14, }, }); // MyComponent.ios.js import React from 'react'; import { View, Text } from 'react-native'; import styles from './MyComponent.styles'; function MyComponent() { return ( <View style={styles.container}> <Text style={styles.text}>iOS Component</Text> </View> ); } export default MyComponent; // MyComponent.android.js import React from 'react'; import { View, Text } from 'react-native'; import styles from './MyComponent.styles'; function MyComponent() { return ( <View style={styles.container}> <Text style={styles.text}>Android Component</Text> </View> ); } export default MyComponent; """ ### 4.4. Themeing * **Do This:** Use a Context API or a dedicated library like React Navigation's theming support to implement themes. * **Don't Do This:** Hardcode colours and other styles across your application. * **Why:** Themeing allows for easily customisable styles across your entire application. """javascript // ThemeContext.js import React, { createContext, useState, useContext } from 'react'; const ThemeContext = createContext(); export const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light'); // Default theme const toggleTheme = () => { setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light')); }; return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> {children} </ThemeContext.Provider> ); }; export const useTheme = () => useContext(ThemeContext); // Styles.js import { StyleSheet } from 'react-native'; export const lightTheme = StyleSheet.create({ container: { backgroundColor: '#FFFFFF', color: '#000000', }, text: { color: '#000000', }, }); export const darkTheme = StyleSheet.create({ container: { backgroundColor: '#000000', color: '#FFFFFF', }, text: { color: '#FFFFFF', }, }); // Component import React from 'react'; import { View, Text, Button } from 'react-native'; import { useTheme } from './ThemeContext'; import { lightTheme, darkTheme } from './styles'; function ThemedComponent() { const { theme, toggleTheme } = useTheme(); const styles = theme === 'light' ? lightTheme : darkTheme; return ( <View style={styles.container}> <Text style={styles.text}>Themed Text</Text> <Button title="Toggle Theme" onPress={toggleTheme} /> </View> ); } export default ThemedComponent; // App.js usage import React from 'react'; import { ThemeProvider } from './ThemeContext'; import ThemedComponent from './ThemedComponent'; function App() { return ( <ThemeProvider> <ThemedComponent /> </ThemeProvider> ); } export default App; """ ## 5. State Management ### 5.1. Local State * **Do This:** Use "useState" for simple, component-specific state. * **Don't Do This:** Overuse global state management for local concerns. * **Why:** Reduces complexity and improves component isolation. ### 5.2. Global State * **Do This:** Consider using Context API with "useReducer" or dedicated libraries like Redux, Zustand, or Jotai for managing complex app-wide state. * **Don't Do This:** Mutate state directly. * **Why:** It centralizes state logic, improves data flow predictability, and facilitates state sharing across the application. """javascript // Do This (Context API with useReducer) import React, { createContext, useReducer, useContext } from 'react'; const initialState = { count: 0 }; const reducer = (state, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } }; const CounterContext = createContext(); export const CounterProvider = ({ children }) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <CounterContext.Provider value={{ state, dispatch }}> {children} </CounterContext.Provider> ); }; export const useCounter = () => useContext(CounterContext); // Component import React from 'react'; import { View, Text, Button } from 'react-native'; import { useCounter } from './CounterContext'; function CounterComponent() { const { state, dispatch } = useCounter(); return ( <View> <Text>Count: {state.count}</Text> <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} /> <Button title="Decrement" onPress={() => dispatch({ type: 'DECREMENT' })} /> </View> ); } export default CounterComponent; // App.js usage import React from 'react'; import { CounterProvider } from './CounterContext'; import CounterComponent from './CounterComponent'; function App() { return ( <CounterProvider> <CounterComponent /> </CounterProvider> ); } export default App; """ ### 5.3. Immutable Data Structures * **Do This:** Use immutable data structures to avoid accidental mutations. * **Don't Do This:** Directly modify state objects. * **Why:**Immutability prevents unexpected side effects and makes debugging easier. """javascript // Do This const updateObject = (oldObject, newValues) => { return Object.assign({}, oldObject, newValues); }; // Don't Do This state.myProperty = newValue; // Avoid direct mutations """ ## 6. Asynchronous Operations ### 6.1. Async/Await * **Do This:** Use "async/await" for asynchronous operations (e.g., API calls). * **Don't Do This:** Rely heavily on ".then()" chains. * **Why:** "async/await" provides a more readable and manageable way to handle asynchronous code. """javascript // Do This async function fetchData() { try { const response = await fetch('https://example.com/api'); const data = await response.json(); return data; } catch (error) { console.error('Error fetching data:', error); return null; } } // Don't Do This (Callback chains) function fetchData() { fetch('https://example.com/api') .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error('Error fetching data:', error); }); } """ ### 6.2. Error Handling * **Do This:** Implement proper error handling using "try/catch" blocks. Display user-friendly error messages. * **Don't Do This:** Ignore potential errors during asynchronous operations. * **Why:** Robust error handling prevents application crashes and improves the user experience. ## 7. Navigation ### 7.1. React Navigation * **Do This:** Use "react-navigation" for handling app navigation. Use version 6.x or later. * **Don't Do This:** Implement custom navigation solutions unless absolutely necessary. * **Why:** "react-navigation" is a well-maintained and feature-rich navigation library. ### 7.2. Navigation Patterns * **Do This:** Use appropriate navigation patterns (e.g., stack, tab, drawer) based on the application's structure. * **Don't Do This:** Inconsistently mix navigation patterns, which can confuse users. """javascript // Do This (React Navigation example) import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './HomeScreen'; import DetailsScreen from './DetailsScreen'; const Stack = createStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); } export default App; """ ## 8. Accessibility ### 8.1. Accessibility Properties * **Do This:** Use accessibility properties (e.g., "accessible", "accessibilityLabel", "accessibilityHint") to make the app accessible to users with disabilities. * **Don't Do This:** Ignore accessibility considerations. """javascript // Do This <Button title="Submit" accessible={true} accessibilityLabel="Submit the form" accessibilityHint="Submits the data entered in the form" onPress={handleSubmit} /> """ ### 8.2. Semantic HTML * **Do This:** Use semantic HTML-like components where appropriate (e.g., "Heading", "Paragraph") to provide structure and meaning to content. ## 9. Performance ### 9.1. Optimize Renderings * **Do This:** Use "React.memo" for functional components and "PureComponent" for class components to prevent unnecessary re-renders. Use the "useCallback" and "useMemo" hooks where applicable. * **Don't Do This:** Rely on default shouldComponentUpdate/React.memo comparisons, especially when dealing with complex data structures. * **Why:** Optimizing renderings improves app performance and reduces resource consumption. """javascript // Do This import React from 'react'; import { View, Text } from 'react-native'; const MyComponent = React.memo(({ data }) => { console.log('Rendering MyComponent'); return ( <View> <Text>{data.name}</Text> </View> ); }, (prevProps, nextProps) => { return prevProps.data.id === nextProps.data.id; // Custom comparison function }); export default MyComponent; import React, {useCallback} from 'react'; import { Button } from 'react-native'; function ParentComponent({onPress}) { const handleClick = useCallback(() => { onPress(); }, [onPress]); return ( <Button title="Click me" onPress={handleClick} /> ); } export default ParentComponent; """ ### 9.2. Image Optimization * **Do This:** Optimize images for mobile devices. Use appropriate image formats (e.g., WebP). Lazy-load images where possible. * **Don't Do This:** Use large, unoptimized images that slow down the app. ### 9.3. List Performance * **Do This:** Use "FlatList" or "SectionList" for rendering large lists. Implement "keyExtractor" and "getItemLayout" for improved performance. * **Don't Do This:** Use "ScrollView" for rendering long lists, as it can lead to performance issues. """javascript // Do This import React from 'react'; import { FlatList, Text, View } from 'react-native'; const data = Array.from({ length: 100 }, (_, i) => ({ id: i.toString(), name: "Item ${i}" })); function MyList() { const renderItem = ({ item }) => ( <View> <Text>{item.name}</Text> </View> ); const keyExtractor = (item) => item.id; return ( <FlatList data={data} renderItem={renderItem} keyExtractor={keyExtractor} /> ); } """ ### 9.4 Networking Optimizations * **Do This:** Use "useMemo" to memoize data that is expensive to compute. * **Don't Do This:** Create inline functions which will be re-created on every render. * **Why:** Creating inline functions will cause unnecessary re-renders. ## 10. Security ### 10.1. Data Validation * **Do This:** Validate user input on both the client and server sides. Use secure storage for sensitive data (e.g., "react-native-keychain"). * **Don't Do This:** Trust user input without validation. Store sensitive data in plain text. * **Why:** Proper data validation prevents injection attacks and data corruption. ### 10.2. Secure API Communication * **Do This:** Use HTTPS for all API communication. Implement authentication and authorization mechanisms. * **Don't Do This:** Use insecure HTTP connections for sensitive data. ### 10.3. Dependency Management * **Do This:** Regularly update dependencies to patch security vulnerabilities. Audit dependecies with "yarn audit" or "npm audit". * **Don't Do This:** Use outdated dependencies with known security flaws. ## 11. Testing ### 11.1. Unit Tests * **Do This:** Write unit tests for individual components and functions using Jest and React Native Testing Library. * **Don't Do This:** Neglect unit testing, leading to undetected bugs. ### 11.2. Integration Tests * **Do This:** Implement integration tests to verify interactions between different parts of the application. * **Don't Do This:** Skip integration testing, as it's crucial for validating app workflows. ### 11.3. End-to-End Tests * **Do This:** Use end-to-end testing frameworks (e.g., Detox, Appium) to test the complete user experience. * **Don't Do This:** Avoid end-to-end testing, which can lead to issues in production. ## 12. Documentation ### 12.1. Code Comments * **Do This:** Write clear and concise comments to explain complex logic or non-obvious code sections. Use JSDoc for documenting functions and components. * **Don't Do This:** Over-comment or write redundant comments that state the obvious. """javascript /** * Calculates the total price of items in the cart. * @param {Array<Object>} cartItems - An array of cart items. * @returns {number} The total price. */ function calculateTotalPrice(cartItems) { // Implementation... } """ ### 12.2. README Files * **Do This:** Provide comprehensive README files for projects and modules, including setup instructions, usage examples, and API documentation. * **Don't Do This:** Neglect documentation, making it difficult for others to understand and use the code. ## 13. Tooling ### 13.1. ESLint * **Do This:** Use ESLint with a consistent configuration (e.g., Airbnb, Standard) to enforce code style and detect potential issues. * **Don't Do This:** Ignore ESLint warnings and errors. ### 13.2. Prettier * **Do This:** Use Prettier to automatically format code and maintain consistency. Integrate Prettier with ESLint. * **Don't Do This:** Manually format code, leading to inconsistencies. ### 13.3. TypeScript * **Do This:** Use TypeScript (as implemented in section 3.3) for static typing. * **Don't Do This:** Use JavaScript without type checking, which makes it harder to catch bugs early. ## 14. Git Workflow ### 14.1. Branching Strategy * **Do This:** Use a clear branching strategy (e.g., Gitflow, GitHub Flow) to manage code changes and releases. * **Don't Do This:** Commit directly to the "main"/"master" branch or use inconsistent branching practices. ### 14.2. Commit Messages * **Do This:** Write descriptive commit messages that explain the purpose of each change. Follow conventional commits. * **Don't Do This:** Write vague or meaningless commit messages. * **Why:** Clear commit messages aid in code review, debugging, and team collaboration. ### 14.3. Code Reviews * **Do This:** Conduct thorough code reviews before merging branches. Use pull requests for code review. * **Don't Do This:** Skip code reviews, as they're essential for maintaining code quality. By adhering to these code style and conventions standards, React Native development teams can ensure code quality, improve collaboration, and build maintainable, performant, and secure applications. This document should be considered a living guide to be updated and refined as new technologies and best practices emerge.
# Testing Methodologies Standards for React Native This document outlines the testing methodologies standards for React Native applications. These guidelines ensure code quality, maintainability, and reliability by establishing best practices for unit, integration, and end-to-end testing within the React Native ecosystem. ## 1. General Testing Principles ### 1.1. Test-Driven Development (TDD) & Behavior-Driven Development (BDD) **Do This:** * Consider adopting TDD or BDD principles where appropriate. Write tests *before* implementing the code. This helps clarify requirements and design a more testable architecture from the outset. **Don't Do This:** * De-prioritize testing altogether or defer it until the end of a feature's development. This often results in poorly tested code and increased debugging effort. **Why:** * TDD/BDD can significantly improve code quality by driving design and ensuring features meet requirements early. It reduces defects and simplifies debugging. ### 1.2. Test Pyramid **Do This:** * Adhere to the test pyramid concept: * **Unit Tests (Top of Pyramid, Largest Quantity):** Focus on individual components and functions. * **Integration Tests (Middle of Pyramid, Moderate Quantity):** Verify interactions between multiple components. * **End-to-End (E2E) Tests (Bottom of Pyramid, Smallest Quantity):** Simulate real user flows across the entire application. **Don't Do This:** * Over-rely on E2E tests at the expense of unit and integration tests. E2E tests are slower and more brittle which leads to longer build times and decreased developer productivity. **Why:** * The test pyramid provides a balanced approach to testing, maximizing coverage while minimizing test execution time and maintenance effort. ### 1.3. Code Coverage **Do This:** * Aim for high code coverage (80%+), but focus on *meaningful* tests. Test all core logic, edge cases, and error conditions. **Don't Do This:** * Strive for 100% code coverage at all costs. Writing superficial tests solely to increase coverage isn't productive and can create maintenance overhead. * Ignore code coverage reports. Use them to identify untested areas and prioritize test development. **Why:** * Code coverage metrics help identify untested areas which potentially harbor bugs but should not be treated as the sole measure of test effectiveness. Prioritize writing tests that address critical functionality. ## 2. Unit Testing ### 2.1. Scope **Do This:** * Unit tests should focus on individual components, functions, or modules in isolation. * Mock dependencies (e.g., API calls, data stores, context providers, native modules) to isolate the unit under test. **Don't Do This:** * Allow side effects or external dependencies to influence unit tests. This makes tests unreliable and difficult to debug. **Why:** * Isolating the unit under test ensures that failures are localized, and tests run quickly. This promotes maintainability and rapid feedback. ### 2.2. Tools & Libraries **Do This:** * Use Jest as the primary testing framework. It is the recommended and most widely supported framework for React Native. * Use React Native Testing Library to test React components in a user-centric way. **Don't Do This:** * Use shallow rendering excessively. Prioritize testing the user-visible aspects of your components using React Native Testing Library or similar. **Why:** * Jest provides a comprehensive testing environment with mocking, assertions, and snapshot testing capabilities. React Native Testing Library encourages testing components from the user's perspective. ### 2.3. Example: Unit Testing a Simple Component """javascript // src/components/Greeting.js import React from 'react'; import { Text, View } from 'react-native'; const Greeting = ({ name }) => { return ( <View> <Text>Hello, {name}!</Text> </View> ); }; export default Greeting; """ """javascript // src/components/Greeting.test.js import React from 'react'; import { render, screen } from '@testing-library/react-native'; import Greeting from './Greeting'; describe('Greeting Component', () => { it('renders a greeting message with the provided name', () => { render(<Greeting name="John" />); const greetingElement = screen.getByText('Hello, John!'); expect(greetingElement).toBeDefined(); }); it('renders default greeting if no name is provided', () => { render(<Greeting />); const greetingElement = screen.getByText('Hello, undefined!'); //Avoid this: rely on proptypes for default values }); }); """ ### 2.4. Mocking **Do This:** * Use Jest's mocking capabilities to isolate the unit under test. Use "jest.mock()" to mock modules and "jest.fn()" to create mock functions. For mocking React Context: create a mock context provider. **Don't Do This:** * Over-mock. Only mock dependencies that prevent you from testing the core logic of the unit. * Mock implementation details. Mock only the public interface of dependencies. **Why:** * Mocking ensures that tests are deterministic and independent of external factors. It also allows you to simulate different scenarios, such as error states. """javascript // Example: Mocking an API call // src/api/userApi.js const fetchUserData = async (userId) => { const response = await fetch("https://api.example.com/users/${userId}"); const data = await response.json(); return data; }; export default fetchUserData; // src/components/UserProfile.js import React, { useState, useEffect } from 'react'; import { Text, View } from 'react-native'; import fetchUserData from '../api/userApi'; const UserProfile = ({ userId }) => { const [user, setUser] = useState(null); useEffect(() => { const loadUserData = async () => { const userData = await fetchUserData(userId); setUser(userData); }; loadUserData(); }, [userId]); if (!user) { return <Text>Loading...</Text>; } return ( <View> <Text>Name: {user.name}</Text> <Text>Email: {user.email}</Text> </View> ); }; export default UserProfile; // src/components/UserProfile.test.js import React from 'react'; import { render, screen, waitFor } from '@testing-library/react-native'; import UserProfile from './UserProfile'; import fetchUserData from '../api/userApi'; jest.mock('../api/userApi'); // Mock the entire module describe('UserProfile Component', () => { it('fetches and displays user data', async () => { const mockUserData = { id: 1, name: 'John Doe', email: 'john.doe@example.com' }; fetchUserData.mockResolvedValue(mockUserData); // Mock the return value render(<UserProfile userId={1} />); // Wait for the data to load and the component to update await waitFor(() => { expect(screen.getByText('Name: John Doe')).toBeDefined(); expect(screen.getByText('Email: john.doe@example.com')).toBeDefined(); }); }); it('displays loading state', () => { render(<UserProfile userId={1} />); expect(screen.getByText('Loading...')).toBeDefined(); }); it('handles error cases', async () => { fetchUserData.mockRejectedValue(new Error('Failed to fetch user data')); render(<UserProfile userId={1} />); await waitFor(() => { console.log(screen.debug()); // useful for debugging async render issues! //Note: error handling should be implemented in component, // in this test component should have error state and error message. //expect(screen.getByText('Error')).toBeDefined(); //This line is a placeholder! }); }); }); """ ### 2.5. Snapshot Testing **Do This:** * Use snapshot testing sparingly for components with complex or dynamic layouts. Snapshots are useful for detecting unintended UI changes. **Don't Do This:** * Rely solely on snapshot testing. Snapshots capture the UI's structure, but they don't verify functionality or behavior. * Commit snapshots without reviewing them. Ensure that any changes in the snapshot are intentional and correct. **Why:** * Snapshot tests quickly detect unexpected UI changes. However, they are less effective at verifying the component's logic. ## 3. Integration Testing ### 3.1. Scope **Do This:** * Integration tests should focus on verifying the interactions between two or more components or modules. * Test how your components function with Redux, Context, or other data management solutions **Don't Do This:** * Test entire user flows in integration tests. Reserve end-to-end (E2E) tests for that purpose. **Why:** * Integration tests ensure that different parts of the application work together correctly. ### 3.2. Tools & Libraries **Do This:** * Continue using Jest and React Native Testing Library. * Use mocking strategically to isolate parts of the integration. **Don't Do This:** * Avoid mocking unnecessarily. Aim to test as much of the real integration as possible. **Why:** * Minimal mocking reduces the risk of tests that are too tightly coupled to the implementation details. ### 3.3. Example: Integration Testing a List and Item Component """javascript // src/components/ListItem.js import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; const ListItem = ({ item, onPress }) => { return ( <TouchableOpacity onPress={onPress}> <View> <Text>{item.name}</Text> </View> </TouchableOpacity> ); }; export default ListItem; // src/components/List.js import React from 'react'; import { FlatList } from 'react-native'; import ListItem from './ListItem'; const List = ({ items, onItemPress }) => { return ( <FlatList data={items} renderItem={({ item }) => ( <ListItem item={item} onPress={() => onItemPress(item)} /> )} keyExtractor={(item) => item.id.toString()} /> ); }; export default List; // src/components/List.test.js import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react-native'; import List from './List'; describe('List Component', () => { const items = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, ]; const onItemPress = jest.fn(); it('renders a list of items', () => { render(<List items={items} onItemPress={onItemPress} />); expect(screen.getByText('Item 1')).toBeDefined(); expect(screen.getByText('Item 2')).toBeDefined(); }); it('calls onItemPress when an item is pressed', () => { render(<List items={items} onItemPress={onItemPress} />); const item1 = screen.getByText('Item 1'); fireEvent.press(item1); expect(onItemPress).toHaveBeenCalledWith(items[0]); }); }); """ ## 4. End-to-End (E2E) Testing ### 4.1. Scope **Do This:** * E2E tests should focus on verifying critical user flows through the entire application. * Simulate real user interactions as closely as possible. **Don't Do This:** * Test minor UI details. Focus on core functionality and user journeys. * Over-test the same flows repeatedly. Optimize for coverage of distinct scenarios. **Why:** * E2E tests provide the greatest confidence in the application's overall functionality. ### 4.2. Tools & Libraries **Do This:** * Consider using Detox or Appium for E2E testing. Detox is well-suited for React Native due to its grey-box testing approach that synchronizes with the app's state. **Don't Do This:** * Attempt to use unit testing frameworks for E2E testing. They are not designed for this purpose. **Why:** * Detox and Appium provide tools to automate UI testing and interact with native device features. ### 4.3. Example: E2E Test with Detox Detox requires specific setup and configuration as outlined in its documentation. The following is a simplified example. """javascript // e2e/firstTest.e2e.js describe('Example', () => { beforeAll(async () => { await device.launchApp(); }); beforeEach(async () => { await device.reloadReactNative(); }); it('should show hello screen after tap', async () => { await element(by.id('hello_button')).tap(); await expect(element(by.text('Hello!!!'))).toBeVisible(); }); it('should show world screen after tap', async () => { await element(by.id('world_button')).tap(); await expect(element(by.text('World!!!'))).toBeVisible(); }); }); """ ### 4.4. Test Data Management **Do This:** * Use a separate test database or API endpoint for E2E tests. This prevents tests from interfering with real user data. * Reset test data before each test suite. **Don't Do This:** * Use real user data in E2E tests. This is a security risk. **Why** * Ensures Tests are run in isolation. ### 4.5. Flakiness Reduction **Do This:** * Implement retry mechanisms for flaky tests. * Use explicit waits to ensure that UI elements are visible before interacting with them. * Write atomic E2E tests. **Don't Do This:** * Ignore flaky tests. They indicate underlying issues in the application or the test environment. **Why:** * Flaky tests undermine confidence in the test suite. By implementing retry mechanisms, explicit waits, and Atomic E2E tests reduces the likelihood of them. ## 5. Test Naming Conventions **Do This:** * Use descriptive and consistent test names. * Structure your test names to answer the following questions: What is being tested? Under what circumstances? What is the expected outcome? **Don't Do This:** * Use vague or ambiguous test names. **Why:** * Clear and concise test names make it easier to understand the purpose of each test and debug failures. """javascript // Example: // Good: it('fetches user data and displays it in the UI', () => { ... }); // Bad: it('test', () => { ... }); """ ## 6. Continuous Integration (CI) **Do This:** * Integrate your tests into your CI/CD pipeline to automatically run them on every commit or pull request. **Don't Do This:** * Skip running tests in CI. **Why:** * Continuous integration ensures that tests are executed regularly, providing early feedback on code changes. It helps to catch regression bugs before they reach production. ## 7. Accessibility Testing **Do This:** * Write accessibility tests to ensure that your application is usable by people with disabilities. * Use accessibility testing tools like React Native AccessibilityInfo or native accessibility APIs. **Don't Do This:** * Ignore accessibility. An accessible application is an inclusive application. **Why:** * Accessibility testing ensures that your application is inclusive and adheres to accessibility standards like WCAG. ## 8. Performance Testing ### 8.1. Scope **Do This:** * Measure rendering performance using tools like "PerfMonitor". * Perform stress testing for key components. **Don't Do This:** * Ignore performance testing until late in the development cycle. **Why:** * Improves application performance ### 8.2. Tools & Libraries **Do This:** * Use tools like Flipper for profiling. * Use Jest for performance testing. """javascript //Performance test example // src/components/List.performance.test.js import List from './List'; import React from 'react'; import { render } from '@testing-library/react-native'; describe('List Component - Performance', () => { it('renders 1000 items without performance degradation', () => { const items = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: "Item ${i}" })); const startTime = performance.now(); render(<List items={items} onItemPress={() => {}} />); const endTime = performance.now(); const renderTime = endTime - startTime; console.log("Rendering 1000 items took ${renderTime} ms"); expect(renderTime).toBeLessThan(500); // Adjust the threshold as needed //If it's consistently taking over 500ms to render, your app might feel sluggish }); }); """ ## 9. Security Testing ### 9.1. Scope **Do This:** * Implement security tests to catch common vulnerabilities, such as data injection attacks. * Use static analysis tools to identify potential vulnerabilities in your code. **Don't Do This:** * Assume that your application is secure by default. * Store sensitive information, such as API keys, directly in your code. **Why:** * Improves the security of your application. ## 10. Deprecated Features * Double check your version of React Native and ensure that you are not calling any deprecated features. By following the testing methodology standards in your React Native projects, you ensure higher code quality, improve maintainability, and deliver a more reliable and secure user experience. Adapt and extend these standards to match the specific needs of your projects and organization.