{"id":13678946,"url":"https://github.com/calebnance/expo-netflix","last_synced_at":"2025-04-04T16:15:40.265Z","repository":{"id":34062019,"uuid":"163851128","full_name":"calebnance/expo-netflix","owner":"calebnance","description":"Netflix UI Clone with React Native \u0026 Expo","archived":false,"fork":false,"pushed_at":"2024-01-21T02:32:18.000Z","size":7021,"stargazers_count":573,"open_issues_count":7,"forks_count":91,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-28T15:08:33.273Z","etag":null,"topics":["expo","react-native","react-navigation","react-navigation-v6"],"latest_commit_sha":null,"homepage":"https://expo-netflix.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/calebnance.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-02T14:26:53.000Z","updated_at":"2025-03-20T00:42:24.000Z","dependencies_parsed_at":"2023-02-15T07:15:58.910Z","dependency_job_id":"908df95f-0ea8-4682-a100-08ae53a416d4","html_url":"https://github.com/calebnance/expo-netflix","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-netflix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-netflix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-netflix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-netflix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calebnance","download_url":"https://codeload.github.com/calebnance/expo-netflix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208178,"owners_count":20901570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","react-native","react-navigation","react-navigation-v6"],"created_at":"2024-08-02T13:01:00.103Z","updated_at":"2025-04-04T16:15:40.244Z","avatar_url":"https://github.com/calebnance.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Netflix: UI Clone with React Native / Expo\n\nweb demo: [Expo Netflix](https://expo-netflix.vercel.app)\n\n[![follow @calebnance](https://img.shields.io/twitter/follow/calebnance.svg?style=for-the-badge\u0026logo=TWITTER\u0026logoColor=FFFFFF\u0026labelColor=00aced\u0026logoWidth=20\u0026color=lightgray)](https://twitter.com/calebnance)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"netflix screens\" src=\".gh-assets/screenshare-6.png\" /\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Install \u0026 Build](#install--build)\n- [Features](#features)\n- [API Components/Packages Used](#api-componentspackages-used)\n- [Linting](#linting)\n- [Expo Web](#expo-web)\n- [Demo \u0026 Release Notes](#release-notes)\n\n## Install \u0026 Build\n\nFirst, make sure you have Expo CLI installed: `npm install -g expo-cli`\n\n**Install:**\n\n```bash\nyarn\n```\n\n**Run Project Locally:**\n\n```bash\nyarn dev\n```\n\n## Features\n\n- Expo SDK 50\n- iOS, Android and PWA (Progressive Web App)\n- React Navigation v6\n- PropTypes\n\n## API Components/Packages Used\n\n- React Native\n  - `Animated`\n  - `Alert` and `Switch`\n  - `Image` and `ImageBackground`\n  - `Keyboard` and `TextInput`\n  - `TouchableOpacity` and `TouchableWithoutFeedback`\n  - `Dimensions`, `Platform` and `StatusBar`\n  - `ScrollView` and `FlatList`\n  - `StyleSheet`, `Text`, and `View`\n- Expo\n  - `expo-asset`\n  - `expo-font`\n  - `expo-linear-gradient`\n  - `AppLoading`\n  - `ScreenOrientation`\n- 3rd Party\n  - `react-native-appearance`\n  - `react-native-svg`\n  - `react-native-webview`\n\n## Linting\n\n- run: `yarn lint` for a list of linting warnings/error in cli\n- prettier and airbnb config\n- make sure you have prettier package installed:\n  - [prettier for atom](https://atom.io/packages/prettier-atom)\n  - [prettier for vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- then make sure to enable these options (packages → prettier):\n  - eslint integration\n  - stylelint integration\n  - automatic format on save (toggle format on save)\n- be aware of the `.prettierignore` file\n\n## Expo Web\n\nCurrently Expo Web support is **not production ready**, but if you want to see how this project looks on the web as a PWA (Progressive Web App)... using [react-native-web](https://github.com/necolas/react-native-web) and react-dom.\n\n[PWA: Expo Netflix](https://expo-netflix.calebnance.now.sh) looks best on a mobile device, but not bad on desktop!\n\n**Dev with Expo Web**\n- Remove node_modules if they exist: `rm -rf nodes_modules`\n- Install/Re-install: `yarn`\n- Start development: `yarn web` or `expo start --web`\n- Build PWA: `yarn web-build` or `expo build:web`\n\na couple manual changes within `index.html` i found needed to be made so far:\n- **to make splash screen work:** \"mobile-web-app-capable\" =\u003e \"apple-mobile-web-app-capable\"\n- **status bar transparent:** apple-mobile-web-app-status-bar-style=\"default\" =\u003e \"black-translucent\"\n- **no white background:** add background color within body{background-color: #121212; ...}\n- **check output meta:** double image meta tags\n- **check output js:** double/triple js packages\n\n## Release Notes\n\n**version 0.0.2 (current)**\n\n- upgraded to [Expo SDK 50](https://expo.dev/changelog/2024/01-18-sdk-50#%E2%9E%A1%EF%B8%8F-upgrading-your-app)\n- upgraded to [Expo SDK 49](https://blog.expo.dev/expo-sdk-49-c6d398cdf740)\n- upgraded to [Expo SDK 48](https://blog.expo.dev/expo-sdk-48-ccb8302e231)\n- upgraded to [Expo SDK 47](https://blog.expo.dev/expo-sdk-47-a0f6f5c038af)\n- upgraded to [Expo SDK 46](https://blog.expo.dev/expo-sdk-46-c2a1655f63f7)\n- upgraded to [Expo SDK 45](https://blog.expo.dev/expo-sdk-45-f4e332954a68)\n- upgraded to [Expo SDK 44](https://blog.expo.dev/expo-sdk-44-4c4b8306584a)\n- upgraded to [Expo SDK 43](https://blog.expo.dev/expo-sdk-43-aa9b3c7d5541)\n- upgraded to [React Navigation v6](https://reactnavigation.org/docs/getting-started)\n- upgraded to [React Navigation v5](https://reactnavigation.org/docs/5.x/getting-started)\n- upgraded to [Expo SDK 42](https://blog.expo.io/expo-sdk-42-579aee2348b6)\n- upgraded to [Expo SDK 41](https://blog.expo.io/expo-sdk-41-12cc5232f2ef)\n- upgraded to [Expo SDK 40](https://blog.expo.io/expo-sdk-40-is-now-available-d4d73e67da33)\n- upgraded to [Expo SDK 39](https://blog.expo.io/expo-sdk-39-is-now-available-4c10aa825e3f)\n- upgraded to [Expo SDK 38](https://blog.expo.io/expo-sdk-38-is-now-available-ab6cd30ca2ee)\n- upgraded to [Expo SDK 37](https://blog.expo.io/expo-sdk-37-is-now-available-dd5770f066a6)\n- upgraded to [React Navigation v4](https://reactnavigation.org/docs/4.x/getting-started)\n- upgraded to [Expo SDK 36](https://blog.expo.io/expo-sdk-36-is-now-available-b91897b437fe)\n- upgraded to [Expo SDK 35](https://blog.expo.io/expo-sdk-35-is-now-available-beee0dfafbf4)\n- Expo Web support\n- upgraded to [Expo SDK 34](https://blog.expo.io/expo-sdk-34-is-now-available-4f7825239319)\n- upgraded to [Expo SDK 33](https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c)\n- Home Top Navbar\n  - show/hide on scroll\n  - start of stack navigation in nav bar\n  - TV Shows, Movies and My List screens\n  - start of mock data and images for shows/movies\n- More Stack\n  - menu list (scrollable) created, with current version on screen\n  - **app settings**\n    - start of section headings\n    - displays current phone model name (ios only, for now)\n    - delete all downloads (mock alert)\n    - storage bar styled: device storage space, netflix (downloaded) space used, and free space (all mock data)\n  - **privacy** now opens a modal with WebView that opens [Help Netflix - Privacy page](https://help.netflix.com/legal/privacy?headless=true\u0026locale=en-US)\n  - **sign out** now opens an alert with selectable options\n  - **manage profiles**\n    - modal popup with edit overlay\n    - modal add profile with for kids switch\n- Modal Video player screen added\n  - on open (mount), screen orientation changes to landscape\n  - on close (unmount), screen orientation changes back to portrait\n\n**version 0.0.1**\n\n- iOS and Android\n- Tab Navigation\n  - Home\n    - simple banner (bandersnatch)\n    - add to my list\n    - simple wireframe with FlatList (horizontal scroll)\n  - Search\n    - simple animation onFocus and onBlur of search input\n    - autofocus on first render\n  - My Downloads\n  - More\n    - simple account profiles layout\n- Chrome Cast modal screen\n\n\u003cp align=\"left\"\u003e\n  \u003cimg alt=\"screen grab of netflix clone\" src=\".gh-assets/expo-netflix-0.0.1.gif\" width=\"320\" /\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebnance%2Fexpo-netflix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalebnance%2Fexpo-netflix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebnance%2Fexpo-netflix/lists"}