MeshFlix (movie-app)

A cross-platform movie & TV streaming client built with Expo, React Native and TypeScript. MeshFlix ships a modern mobile UI with file-based routing (expo-router), multiple embed video providers, persistent settings (MMKV + Zustand) and a WebView-based player.

Quick highlights:

• Expo-managed app with TypeScript and expo-router (typed routes).
• React Query for data fetching and caching.
• Persistent settings with react-native-mmkv + Zustand.
• WebView-based media player with multiple third-party embed providers.
• EAS-ready build configuration.

Table of contents

• Prerequisites
• Quick start (local)
• Available scripts
• Environment variables
• Project structure & routing
• Important files & where to customize
• Building with EAS
• Troubleshooting
• Contributing
• Security notes & acknowledgements

Prerequisites

• Node.js (LTS recommended). Confirm with:
  • node --version
  • npm --version
• Expo CLI (recommended to use npx expo or install globally)
  • npm install -g expo-cli
• EAS CLI (if you want to build production/preview binaries)
  • npm install -g eas-cli
  • The project requires EAS CLI >= 12.1.0 (see eas.json).
• Android Studio or Xcode (for native builds / emulators). For iOS, macOS is required.
• (Optional) A TMDB API key — used to fetch movie and TV metadata.

Quick start (local development)

1. Clone the repository git clone https://github.com/rushiii3/movie-app2.git cd movie-app2

2. Install dependencies npm install

3. Create environment variables

   • Create a .env file in project root (see Environment variables below).

4. Start Metro / Expo npm start

   or

   npx expo start

5. Open the app

   • Run on Android emulator / device: npm run android

     or

     npx expo run:android
   • Run on iOS simulator (macOS): npm run ios

     or

     npx expo run:ios
   • Open in browser: npm run web

     or

     npx expo start --web

Available scripts

• npm start — Start the Expo Metro bundler (expo start).
• npm run android — Build & run on Android device/emulator (expo run:android).
• npm run ios — Build & run on iOS simulator/device (expo run:ios).
• npm run web — Start web build for development.
• npm test — Run tests (jest --watchAll).
• npm run lint — Run Expo linter.
• npm run reset-project — Moves starter code and creates a blank app directory (script included in repo).

Environment variables This project expects you to provide any secret keys (for example TMDB) using environment variables in a .env file.

Minimum recommended .env: TMDB_API_KEY=your_themoviedb_api_key_here

(Optional) add other keys if integrating other services

Notes:

• There is a .env file mentioned in the repo — ensure you add your TMDB API key and any other secrets yourself.
• For EAS builds, use eas secret or EAS build profile environment variable workflow:
  • eas secret:create --name TMDB_API_KEY --value
  • Refer to EAS docs if you need to expose secrets to build-time only.

Project structure (high-level)

• app/ — Expo Router file-based routes (screens live here).
  • _layout.tsx — global layout, providers and navigation stack.
  • index.tsx — welcome / onboarding entry screen.
  • (tabs)/ — tabbed screens: home.tsx, movies.tsx, series.tsx, live.tsx, settings.tsx, watchlater.tsx
  • detail/[id].tsx, player/[id].tsx, player/live.tsx — dynamic routes.
• src/
  • assets/ — fonts, images, animations.
  • components/ — shared UI components and loaders.
  • constants/ — colors, providers (src/constants/provider.ts contains configured embed providers).
  • features/ — feature-specific code (media screens, hooks, stores).
  • hooks/ — custom hooks used across the app.
  • providers/ — network/provider components.
  • store/ — global state (Zustand stores, persisted MMKV storage).
  • utils/ — helpers and formatters.
• android/ & ios/ — native projects (generated by Expo when ejected or when using run:android/run:ios).

Routing

• The app uses expo-router with file-based routing. Routes map directly from files under app/.
• Typed routes are enabled via app.json experiments.
• Main stack configuration and shared providers are set in app/_layout.tsx (Stack screens configured there).

Key files & where to customize

• app/_layout.tsx
  • Configures fonts, global providers (QueryClientProvider, NetworkProvider, BottomSheetModalProvider), splash screen behavior and the main Stack navigator.
• app/index.tsx
  • Welcome/get-started screen used on first launch.
• app/(tabs)/home.tsx
  • Example of a tabbed screen; uses useHomeLogic and the FlashList component to render feeds.
• src/constants/provider.ts
  • Contains a list of embed providers and their embed URL templates. Modify or add providers here if you need custom embed sources.
• src/store/useSettingsStore.ts
  • Persistent settings stored via MMKV + zustand. Default themeMode, accentColor, prefetch settings live here.
• src/features/media/screens/PlayerScreen.tsx
  • WebView-based player. If you need to adjust how the WebView behaves (userAgent, permissions, injected JS), modify this file.
• src/hooks/useFetch.ts (used widely)
  • Centralized fetch logic; likely where the TMDB_API_KEY is appended to requests (check and confirm).

Player & Providers

• A set of third-party embed players are preconfigured in src/constants/provider.ts. Each entry exposes an embed function that returns the embed URL for movie or tv type.
• The player implementation uses react-native-webview (src/features/media/screens/PlayerScreen.tsx) and starts playback using the provider embed URLs.
• If you add new providers or change templates, update the providers array and test the embed behavior.

Data & caching

• React Query (@tanstack/react-query) is used for API fetching and caching.
• Several custom hooks under src/features/media/hooks handle queries and screen logic.

Persistent settings

• Zustand for state management; persist middleware uses react-native-mmkv for storage (fast native storage).
• Defaults are defined in src/store/useSettingsStore.ts. Use the exposed setters to programmatically change settings.

Building with EAS

• EAS configuration is in eas.json and app.json. The repo includes three build profiles: development (development client), preview (apk), and production.
• To build a preview APK:
  • Ensure you are logged into Expo: eas login
  • eas build --platform android --profile preview
• To create a production build:
  • eas build --platform android --profile production
  • eas build --platform ios --profile production
• EAS CLI version must meet the project requirement (see eas.json). Use:
  • npm install -g eas-cli
  • eas --version
• For secrets in EAS builds, use eas secret:create or configure build-time env vars in the EAS project settings.

Troubleshooting & common notes

• Reanimated plugin: babel.config.js contains "react-native-reanimated/plugin". If you modify Babel config, ensure this plugin is last and Metro is restarted.
• Fonts & splash screen: app/_layout.tsx loads custom fonts. If the app hangs during start, check fonts and SplashScreen.hideAsync() behavior.
• Clear Metro cache if you observe odd behavior:
  • npx expo start -c
• Android build issues:
  • Ensure you have an up-to-date Android SDK & emulator.
  • For gradle / native errors, run the Android build logs to inspect issues and ensure matching Gradle/Java versions.
• iOS build issues:
  • Requires Xcode and macOS. Use npx expo prebuild if working with native code, or eas build for managed builds.
• Debugging WebView playback:
  • Player loads remote embed URLs. If a provider returns a blocked URL or requires CORS, the WebView may not work as expected — test the embed URL in a browser first.

Security notes

• Do not commit or expose API keys, secrets, or keystore files in public repositories.
• The repository currently contains android/app/debug.keystore — consider rotating or removing if this repository is public and you plan to release a signed production app.
• Use EAS secrets for build-time secrets and environment variables.

Contributing

• Bug reports, issues and PRs are welcome.
• Suggested workflow:
  • Fork the repo, create a branch, run tests & lint locally, open a PR with a clear description.
• Follow code style and maintain TypeScript strictness.

License & credits

• No LICENSE file included (please add an appropriate license if you intend to publish).
• Built with Expo and many open-source libraries (see package.json dependencies and devDependencies).

Acknowledgements

• Expo — awesome cross-platform development.
• React Query, Zustand, MMKV and many community libraries used throughout this project.

Contact

• For questions or help running the app, open an issue or contact the repository owner.