react-native-sop-docs/03-development-standards/coding-guidelines.md

Development Standards & Guidelines

Naming Conventions

• Files: PascalCase for components, camelCase for utilities
• Components: PascalCase (e.g., UserProfile.tsx)
• Variables: camelCase (e.g., userName)
• Constants: UPPER_SNAKE_CASE (e.g., API_BASE_URL)
• Types/Interfaces: PascalCase with descriptive names

Component Architecture

Base Component Structure:

// src/components/common/Button/Button.tsx
import React from "react";
import {
  TouchableOpacity,
  Text,
  StyleSheet,
  ViewStyle,
  TextStyle,
} from "react-native";

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: "primary" | "secondary" | "outline";
  disabled?: boolean;
  style?: ViewStyle;
  textStyle?: TextStyle;
}

export const Button: React.FC<ButtonProps> = ({
  title,
  onPress,
  variant = "primary",
  disabled = false,
  style,
  textStyle,
}) => {
  return (
    <TouchableOpacity
      style={[
        styles.button,
        styles[variant],
        disabled && styles.disabled,
        style,
      ]}
      onPress={onPress}
      disabled={disabled}
      activeOpacity={0.7}
    >
      <Text style={[styles.text, styles[`${variant}Text`], textStyle]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: "center",
    justifyContent: "center",
  },
  primary: {
    backgroundColor: "#007AFF",
  },
  secondary: {
    backgroundColor: "#6C757D",
  },
  outline: {
    backgroundColor: "transparent",
    borderWidth: 1,
    borderColor: "#007AFF",
  },
  disabled: {
    opacity: 0.5,
  },
  text: {
    fontSize: 16,
    fontWeight: "600",
  },
  primaryText: {
    color: "#FFFFFF",
  },
  secondaryText: {
    color: "#FFFFFF",
  },
  outlineText: {
    color: "#007AFF",
  },
});

Code Style Guidelines

TypeScript Best Practices

1. Always use strict mode
2. Define interfaces for all props
3. Use proper type annotations
4. Avoid any type
5. Use union types for variants

React Native Specific

1. Use StyleSheet.create() for styles
2. Avoid inline styles when possible
3. Use proper component lifecycle methods
4. Implement proper error boundaries
5. Use React.memo for performance optimization

File Organization

1. One component per file
2. Index files for clean imports
3. Separate styles in same file
4. Group related components in folders