To

An open source React Native screen for learning and experimentation. This project demonstrates how to build a modern chat interface using React Native and Expo - perfect for developers who want to understand how to structure components, handle state, and create polished UIs.

What This Is

This is a single screen implementation that you can study, modify, and use as a starting point for your own React Native projects. It's designed to be educational - showing real-world patterns for:

• Component structure and organization
• Styling with StyleSheet
• State management with hooks
• Custom icon components
• Layout and positioning
• Cross-platform considerations

Features

• AI-powered chat interface for homework help
• Personalized character avatar with daily date display
• Message input with voice support
• Daily affirmations and tips
• Modern, clean UI design
• Cross-platform (iOS, Android, Web)

Tech Stack

• React Native 0.81
• Expo SDK 54
• React 19
• React Native Safe Area Context
• Expo Vector Icons

Getting Started

Prerequisites

• Node.js 18+
• Bun or npm
• Expo CLI

Installation

# Clone the repository
git clone git@github.com:edengilbertus/Chat-Screen.git
cd Chat-Screen

# Install dependencies
bun install

# Start the development server
bun expo start

Running on Devices

iOS Simulator:

bun expo start --ios

Android Emulator:

bun expo start --android

Web:

bun expo start --web

Or scan the QR code with Expo Go app on your physical device.

Project Structure

.
├── App.js                 # Main app entry with SafeAreaProvider
├── app.json              # Expo configuration
├── package.json          # Dependencies
├── index.js             # Entry point
├── screens/
│   └── ToScreen.js      # Main chat screen component
├── components/
│   └── Icons.js         # Custom SVG icons
└── assets/              # Images, fonts, icons
    ├── icon.png
    ├── splash-icon.png
    ├── adaptive-icon.png
    └── favicon.png

Learning Resources

Key Files to Study

ToScreen.js - The main screen showing:

• How to structure a complex screen component
• Using ScrollView for scrollable content
• TouchableOpacity for interactive elements
• Date formatting and display
• Image loading and positioning

Icons.js - Custom icon components demonstrating:

• SVG implementation in React Native
• Reusable component patterns
• Props and customization

App.js - App entry point showing:

• SafeAreaProvider setup
• SafeAreaView usage
• StatusBar configuration

Configuration

app.json

Expo configuration including:

• App name: "To"
• Version: 1.0.0
• Platform settings (iOS, Android, Web)
• Plugin configuration

Environment Variables

Create a .env file for sensitive configuration:

# API Keys, etc.

Development

Scripts

• bun start - Start Expo development server
• bun android - Start on Android
• bun ios - Start on iOS
• bun web - Start on web

Code Style

• Use functional components with hooks
• Follow React Native best practices
• Use StyleSheet for styling
• Keep components modular and reusable

Building for Production

iOS

eas build --platform ios

Android

eas build --platform android

Web

npx expo export:web

Troubleshooting

Metro bundler cache issues

bun expo start --clear

Dependency issues

rm -rf node_modules bun.lockb
bun install

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

License

MIT

Support

For issues and feature requests, please use the GitHub issues page.

---

Built with Expo and React Native