README.md

Welcome to your Expo app 👋

This is an Expo project created with create-expo-app.

Get started

1. Install dependencies

   npm install

2. Start the app

   npx expo start

In the output, you'll find options to open the app in a

• development build
• Android emulator
• iOS simulator
• Expo Go, a limited sandbox for trying out app development with Expo

You can start developing by editing the files inside the app directory. This project uses file-based routing.

Colors App

A React Native Expo app with multiple interactive sections including atom visualization, decibel meter, color picker, emotion tracker, visual tasks, password generator, and settings.

Features

• Atom Section: Interactive atom visualization with electron throwing
• Decibel Meter: Real-time decibel level simulation with color feedback
• Color Picker: Tap to pick random colors with color display
• Emotion Tracker: Log emotions with colors throughout the day
• Visual Tasks: Colorful task management with visual feedback
• Password Generator: Generate passwords based on selected colors
• Settings: Theme customization and user management

Project Structure

├── app/
│   ├── _layout.tsx              # Root layout with context providers
│   └── (tabs)/
│       ├── _layout.tsx          # Tab layout (tabs hidden)
│       └── index.tsx            # Main app screen
├── components/
│   ├── LoginScreen.tsx          # User authentication screen
│   ├── BottomNavigation.tsx     # Custom bottom navigation
│   └── sections/               # Individual app sections
│       ├── AtomSection.tsx
│       ├── DecibelMeter.tsx
│       ├── ColorPicker.tsx
│       ├── EmotionTracker.tsx
│       ├── VisualTasks.tsx
│       ├── PasswordGenerator.tsx
│       └── SettingsSection.tsx
├── contexts/
│   ├── ThemeContext.tsx         # Theme management
│   └── UserContext.tsx          # User management
├── constants/
│   └── AppData.ts              # App constants and data
└── types/
    └── index.ts                # TypeScript type definitions

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Use the Expo Go app to scan the QR code, or run on simulator:

   npm run ios    # iOS simulator
   npm run android # Android emulator
   npm run web    # Web browser

Key Features

Theme System

• Dynamic theme management with context
• Color randomizer for generating new themes
• Consistent color application across all sections

Navigation

• Custom bottom navigation with animated icons
• Section-based navigation with visual feedback
• Expandable navigation bar

Interactive Sections

Each section provides unique interactive experiences with color-based feedback and animations.

Technologies Used

• React Native with Expo
• TypeScript
• React Navigation
• Lucide React Native (icons)
• React Native SVG
• Expo Status Bar

Development

The app uses React Context for state management and follows a modular component structure for easy maintenance and feature additions.

Learn more

To learn more about developing your project with Expo, look at the following resources:

• Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
• Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

Join the community

Join our community of developers creating universal apps.

• Expo on GitHub: View our open source platform and contribute.
• Discord community: Chat with Expo users and ask questions.