npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

expo-template-elink

v1.0.3

Published

A customizable Expo template with NativeWind and TypeScript

Downloads

28

Readme

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.