https://github.com/jackccrawford/mobile-base
Basic React Native App
https://github.com/jackccrawford/mobile-base
Last synced: 9 months ago
JSON representation
Basic React Native App
- Host: GitHub
- URL: https://github.com/jackccrawford/mobile-base
- Owner: jackccrawford
- Created: 2025-02-12T22:32:47.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-03-09T06:31:00.000Z (10 months ago)
- Last Synced: 2025-03-09T07:20:31.039Z (10 months ago)
- Language: TypeScript
- Size: 35.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mobile Base
A modern, well-structured React Native starter app that follows Material Design 3 principles.
[](https://codeium.com/windsurf)
[](https://codeium.com)
[](https://www.digitaltwinconsortium.org/)
[](https://reactjs.org/)
[](https://reactnative.dev/)
[](https://m3.material.io/)
[](https://expo.dev/)
[](https://www.typescriptlang.org/)
[](https://www.markdownguide.org/)
[](https://opensource.org/)
[](https://pattern-bridge.github.io/docs)
[](https://discord.gg/3XFf78nAx5)
[](https://x.com/jackccrawford)
[](https://www.managedv.com)
[](https://github.com/pattern-bridge/pattern-bridge/pulse)
[](http://makeapullrequest.com)
[](https://opensource.org/licenses/MIT)
## Features
- 🎨 **Material Design 3**: Complete implementation of MD3 theming, components, and interactions
- 🌓 **Smart Theming**: Intuitive theme switching with automatic system theme detection
- 📱 **Navigation**: Production-ready drawer and tab navigation setup using React Navigation
- 🎠**Pattern Examples**: Multiple layout patterns showcasing different UI approaches
- 📦 **Zero Config**: Ready to use with minimal setup required
- 🔒 **TypeScript**: Type-safe codebase with modern TypeScript practices
## Quick Start
```bash
# Clone the repository
git clone https://github.com/jackccrawford/mobile-base.git
# Install dependencies
cd mobile-base
npm install
# Start the development server
npx expo start --clear
```
Scan barcode to launch the app on your iOS or Android device.
## Project Structure
```
src/
├── components/ # Reusable UI components
├── navigation/ # Navigation configuration
├── screens/ # Screen components
├── theme/ # Material Design 3 theming
└── utils/ # Helper functions and utilities
```
## Layout Patterns
The app includes several layout pattern examples that you can use as starting points for your own screens:
- **Masonry**: Pinterest-style grid layout
- **Card Swipe**: Tinder-style card swiping interface (works on mobile and web)
- **Standard**: Traditional mobile list view
- **Focus**: Centered content with emphasis
- More patterns coming soon!
### Known Issues
- **TODO**: Card swipe animation on desktop browsers needs improvement - cards don't always animate completely off screen when swiped. The implementation works well on mobile web and native platforms.
## Customization
### Settings
The app includes a comprehensive settings screen with:
- Theme switching (Light/Dark/System) with intuitive icon-based toggle
- Custom header title configuration
- Direct links to GitHub and license information
### Color System
The app implements a carefully designed color system that:
- Provides optimal contrast in both light and dark modes
- Uses consistent patterns for selected/unselected states
- Follows Material Design 3 color token guidelines
### Theming
The app uses Material Design 3 theming system. You can customize the theme by modifying `src/theme/theme.ts`:
```typescript
const lightTheme = {
colors: {
primary: '#006495',
// ... other color tokens
},
// ... other theme properties
};
```
### Navigation
Navigation is set up using React Navigation v6. The main navigation structure is defined in `src/navigation/ThemedNavigator.tsx`.
## Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
## License
MIT License - See [LICENSE](LICENSE) for details
---
Build beautiful React Native apps.
Start with a solid foundation.