{"id":4677,"url":"https://github.com/ScreamZ/react-native-true-sight","last_synced_at":"2025-08-04T01:32:57.135Z","repository":{"id":29608526,"uuid":"121741331","full_name":"ScreamZ/react-native-true-sight","owner":"ScreamZ","description":"📱 A cross-platform (Android / iOS) video player with customizable controls for React Native.","archived":false,"fork":false,"pushed_at":"2022-12-06T21:50:50.000Z","size":1174,"stargazers_count":86,"open_issues_count":10,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-01T07:55:42.417Z","etag":null,"topics":["customizable","react-native","video","video-player"],"latest_commit_sha":null,"homepage":"https://github.com/ScreamZ/react-native-true-sight","language":"TypeScript","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/ScreamZ.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}},"created_at":"2018-02-16T11:00:33.000Z","updated_at":"2024-01-18T09:56:47.000Z","dependencies_parsed_at":"2023-01-14T15:17:57.381Z","dependency_job_id":null,"html_url":"https://github.com/ScreamZ/react-native-true-sight","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ScreamZ/react-native-true-sight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Freact-native-true-sight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Freact-native-true-sight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Freact-native-true-sight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Freact-native-true-sight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScreamZ","download_url":"https://codeload.github.com/ScreamZ/react-native-true-sight/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Freact-native-true-sight/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636531,"owners_count":24282112,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["customizable","react-native","video","video-player"],"created_at":"2024-01-05T20:17:19.925Z","updated_at":"2025-08-04T01:32:56.823Z","avatar_url":"https://github.com/ScreamZ.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["Media"],"readme":"\u003ch1 align=\"center\"\u003e\n  React Native True Sight\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/screen-ios.png\" alt=\"\" width=300\u003e\n\u003c/p\u003e\n\u003ch4 align=\"center\"\u003eA cross-platform video player with customizable controls.\u003c/h4\u003e\n\n\u003cbr\u003e\n\nThis library provide a fully customisable video player that work both on Android and iOS. It also come with common use case documentation of things that you would like to implements.\n\nBy default there are two controls slots that are displayed respectively on different part of the parent container and you can use default components provided by this library:\n\n- **Middle**. Contain by default a grid display two buttons:\n  - One with play / pause alternating.\n  - Another that will restart the video.\n- **Bottom**. Contain the video current time, a progress bar and the total duration.\n- **Loader**. There is also a loader that will trigger while video is charging (network issues, bootstraping, ...).\n\n## Documentation\n\n- [Installation chapter](./doc/install.md)\n- [Render a FullScreen Video player](./doc/full-screen-player.md)\n- [Implement your own controls bar](./doc/custom-controls-bar.md)\n\n# Quick documentation\n\nThis is simple as that.\n\nVideoPlayer ship around any video component, but fits well with react-video. In v2 you've total control on the video component.\n\n- **autoStart** - Whether or not the video should start when rendered (Default to true).\n- **mainControl** - The component used to render the main control bar, you can use the default one provided by this lib or your own.\n- **bottomControl** - The component used to render the bottom control bar, you can use the default one provided by this lib or your own.\n\nFor advanced configuration, such as infinite loop, check the rest of the documentation and custom controls bar.\n\n```jsx\nimport React, { Component } from \"react\";\nimport { View } from \"react-native\";\nimport Video from \"react-native-video\";\nimport { VideoPlayer, DefaultMainControl, DefaultBottomControlsBar } from \"react-native-true-sight\";\n\nexport default class HomeScreen extends Component {\n  render() {\n    return (\n      \u003cVideoPlayer\n          autoStart={false}\n          mainControl={args =\u003e \u003cDefaultMainControl {...args} /\u003e}\n          bottomControl={args =\u003e \u003cDefaultBottomControlsBar {...args} /\u003e}\n        \u003e\n          {args =\u003e (\n            \u003cVideo\n              ref={args.playerRef}\n              source={{ uri: data.videoUrl }}\n              paused={args.videoPaused}\n              onLoad={args.onLoad}\n              onProgress={args.onProgress}\n              onEnd={args.onEnd}\n            /\u003e\n          )}\n        \u003c/VideoPlayer\u003e\n    );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FScreamZ%2Freact-native-true-sight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FScreamZ%2Freact-native-true-sight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FScreamZ%2Freact-native-true-sight/lists"}