{"id":13567769,"url":"https://github.com/ahsanakhtar91/video-frame-picker-react-native","last_synced_at":"2025-04-04T02:33:04.680Z","repository":{"id":124765260,"uuid":"467475195","full_name":"ahsanakhtar91/video-frame-picker-react-native","owner":"ahsanakhtar91","description":"A React Native app (clone of Instagram's cover frame picker screen).","archived":false,"fork":false,"pushed_at":"2022-03-14T09:11:59.000Z","size":8914,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-04T22:37:44.842Z","etag":null,"topics":["expo","react-native","react-native-ffmpeg","typescript","xcode"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahsanakhtar91.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-03-08T11:00:42.000Z","updated_at":"2024-06-05T19:58:36.000Z","dependencies_parsed_at":"2023-07-03T08:32:52.253Z","dependency_job_id":null,"html_url":"https://github.com/ahsanakhtar91/video-frame-picker-react-native","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/ahsanakhtar91%2Fvideo-frame-picker-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahsanakhtar91%2Fvideo-frame-picker-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahsanakhtar91%2Fvideo-frame-picker-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahsanakhtar91%2Fvideo-frame-picker-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahsanakhtar91","download_url":"https://codeload.github.com/ahsanakhtar91/video-frame-picker-react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247111448,"owners_count":20885435,"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-native-ffmpeg","typescript","xcode"],"created_at":"2024-08-01T13:02:42.487Z","updated_at":"2025-04-04T02:33:00.615Z","avatar_url":"https://github.com/ahsanakhtar91.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"------------------------------\nVideo Frame Picker (React Native)\n\n------------------------------\n\n**Live Demo** video is attached below!\n\nThis is an example **React Native** application in which a **picker/scrubber component** is created that allows to select a frame from a video by scrubbing/swiping through all of the image frames of the video, which is similar to the cover frame picker screen in **Instagram** which appears while uploading a video and asks you to select an image from the video to be treated as the cover/thumbnail of the video. \n\nSo, the **Video Frame Picker** is built as a clone of that screen. The technologies used to build this app are **React Native**, **TypeScript**, **Expo**, **XCode**, **React Hooks**, etc. This app is specifically tested on **iOS** and the most highlighted library used to build it is **[react-native-ffmpeg](https://www.npmjs.com/package/react-native-ffmpeg)**. The features of this app are:  \n\n- All of the frames from a sample **mp4** video start getting extracted upon launching the app to be later used in the **VideoFramesSrcubber** component.\n- A **loader** screen is shown only, until all the frames are extracted and the app is ready to proceed further to the main screen.\n- Upon successful extraction, the main screen appears containing a **scrubber component** at the bottom (a **swipeable bar** that navigates through all of the frames).\n- The main screen also has a **preview** component that shows the **selected frame** at the top, it keeps showing the preview of the frame selected through scrubbing/swiping.\n- The preview is also shown in a small frame inside the scrubber/swipeable bar component at the bottom too.\n- So, by horizontally swiping/scrubbing the small frame present in the scrubber component (using left-to-right and right-to-left finger gestures on scrubber component), the frames/images from the video are previewed along the way. In the end, the frame/image in the preview area is going to be the selected frame.\n- A Live Demo video is attached below to show how this app works.\n\n\u003ccode\u003e**Live Demo**: https://www.loom.com/share/aa0eb589ae654ec8abefb22ababd5c6a\u003c/code\u003e\n\nSteps to run the Video Frame Picker (React Native) App:\n- Get your React Native development environment ready, following the docs [here](https://reactnative.dev/docs/environment-setup) (skip if already done).\n- Run command \u003ccode\u003eyarn install\u003c/code\u003e on the root directory of Video Frame Picker (React Native) App to install the node packages.\n- This example app is specifically tested on iOS, so make sure your iOS setup for React Native is ready (including XCode, CocoaPods, Simulator, etc.). \n- After that, open up the Terminal (**macOS**).\n- Run \u003ccode\u003ecd ios\u003c/code\u003e on the root directory of the project folder.\n- Run \u003ccode\u003epod install\u003c/code\u003e\n- Run \u003ccode\u003eopen videoframepickerreactnative.xcworkspace\u003c/code\u003e\n- **XCode** will open. \n- Build the application in XCode (using **Build** option in **Product** menu).\n- Return back to Terminal.\n- Run \u003ccode\u003ecd ..\u003c/code\u003e (to move back to root directory).\n- Run the App by running the command \u003ccode\u003eexpo start --dev-client -c\u003c/code\u003e on the root directory.\n- If all goes well, you will see the app running in your iOS Simulator.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahsanakhtar91%2Fvideo-frame-picker-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahsanakhtar91%2Fvideo-frame-picker-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahsanakhtar91%2Fvideo-frame-picker-react-native/lists"}