expo-template-elink v1.1.0

eLink App Template

🌟 Overview

An internal mobile application template by eLink Design, built using cutting-edge mobile development technologies. This template provides a robust starting point for React Native developers within our organization.

🚀 Tech Stack

• Framework: Expo
• Styling: NativeWind (Tailwind CSS for React Native)
• Language: TypeScript
• State Management: React Context API
• Navigation: Expo Routing

📂 Project Structure

src/
├── app/
│   ├── components/           # Reusable UI components
│   │   ├── atoms/            # Smallest, most basic components
│   │   ├── molecules/        # Slightly more complex components
│   │   ├── organisms/        # Complex, composed components
│   │   └── primitives/       # Special-purpose components
│   ├── contexts/             # Global state management
│   ├── hooks/                # Custom React hooks
│   ├── screens/              # Full-page screen components
│   └── types/                # TypeScript type definitions
├── types/                    # Additional type definitions
└── global.css                # Global styling

🔑 Key Features

• Modular component architecture
• Responsive design with NativeWind
• Context-based state management
• Accessibility-focused
• Platform-agnostic components

🛠 Development Conventions

• PascalCase for components
• camelCase for variables and functions
• Strict TypeScript typing
• Comprehensive error handling
• Performance-optimized rendering

🌐 Context Annotations

Our project uses inline comment-based context annotations to provide clear, standardized documentation for context providers.

Annotation Format

Context annotations follow this pattern:

// @context: propertyName - type - description

Why Context Annotations?

1. Self-Documenting Code: Inline comments provide immediate context
2. Easy Documentation: Annotations can be parsed for automatic documentation
3. Developer Experience: Quickly understand context properties

Real-World Examples

Network Context

// @context: isConnected - boolean - true if the device is connected to the internet, false otherwise
// @context: connectionType - string - the type of connection the device is using (wifi, cellular, etc.)
// @context: networkDetails - NetInfoState - the details of the network connection
const NetworkContext = createContext<NetworkContextType>({
  isConnected: true,
  connectionType: null,
  networkDetails: null
});

Theme Context

// @context: isDarkMode - boolean - true if the device is in dark mode, false otherwise
// @context: toggleTheme - function - toggles the theme between dark and light
const ThemeContext = createContext<ThemeContextType>({
  isDarkMode: false,
  toggleTheme: () => {}
});

Generating Context Metadata

Context metadata is automatically generated using a custom script:

# Manually generate context metadata
node scripts/generate-context-metadata.js

# Or simply start the app (script runs automatically)
npm start

🏁 Getting Started

# Install dependencies
npm install

# Start the development server
npm start

# Run on iOS simulator
npm run ios

# Run on Android emulator
npm run android

📦 Available Scripts

• npm start: Start the Expo development server (generates context metadata)
• npm run ios: Run on iOS simulator
• npm run android: Run on Android emulator

📝 Contributing

This is an internal project for eLink Design. Contributions are welcome from team members only.

📝 License

This project is proprietary and confidential. All rights reserved by eLink Design.