{"id":22798650,"url":"https://github.com/ralphpina/twiliorn","last_synced_at":"2026-05-04T23:35:22.859Z","repository":{"id":147150331,"uuid":"82359534","full_name":"ralphpina/twiliorn","owner":"ralphpina","description":"Twilio Video SDK for React Native","archived":false,"fork":false,"pushed_at":"2017-02-21T01:43:47.000Z","size":690,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-30T18:44:16.731Z","etag":null,"topics":["android","react-native","twilio-video"],"latest_commit_sha":null,"homepage":"https://www.twilio.com/docs/api/video","language":"Java","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/ralphpina.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-18T03:51:33.000Z","updated_at":"2020-10-01T14:55:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"bd1a63e1-8e17-4df4-86b1-360a36a90c86","html_url":"https://github.com/ralphpina/twiliorn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ralphpina/twiliorn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphpina%2Ftwiliorn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphpina%2Ftwiliorn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphpina%2Ftwiliorn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphpina%2Ftwiliorn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ralphpina","download_url":"https://codeload.github.com/ralphpina/twiliorn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphpina%2Ftwiliorn/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260006034,"owners_count":22944868,"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":["android","react-native","twilio-video"],"created_at":"2024-12-12T06:10:38.246Z","updated_at":"2026-05-04T23:35:22.828Z","avatar_url":"https://github.com/ralphpina.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"Twilio Video SDK React Native Wrapper\n--\n\n###Currently Android Only\nThere is an iOS only project that can be found here:\nhttps://github.com/gaston23/react-native-twilio-video-webrtc\n\n##Installation\n**TODO**: Currently it is not being distributed via npm. So you would need to import the `android/library` module and copy/paste the `TwilioVideoView` into your project.\n\n##Running Sample\n1) Clone this repo.\n2) Install dependencies. I use Yarn, so you can do `yarn` in the directory. Or use NPM and run `npm i`.\n3) Generate an access token as described [here](https://github.com/twilio/video-quickstart-android#quickstart).\n4) Set the access token in `index.android.js`.\n5) Run `react-native run-android` with an emulator or device connected.\n\nProbably a good idea to read the [docs](https://www.twilio.com/docs/api/video/getting-started).\n\n##Permissions\nThe library project declares the following permissions, which **will be merged** into your `AndroidManifest.xml`:\n\n```xml\n\u003cmanifest\u003e\n    \u003cuses-feature android:name=\"android.hardware.camera\"/\u003e\n    \u003cuses-feature android:name=\"android.hardware.camera.autofocus\"/\u003e\n    \u003cuses-feature\n        android:glEsVersion=\"0x00020000\"\n        android:required=\"true\"/\u003e\n    \n    \u003cuses-permission android:name=\"android.permission.CAMERA\"/\u003e\n    \u003cuses-permission android:name=\"android.permission.INTERNET\"/\u003e\n    \u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\"/\u003e\n    \u003cuses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/\u003e\n    \u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/\u003e\u003cuses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/\u003e\n    \n    ...\n\u003c/manifest\u003e\n```\n##Usage\n\nThere are two classes that can be used: \n`TwilioVideoView` - this is a basic setup that does not allow customization. All the UI, buttons, behavior, etc. are implemented natively.\n\n```javascript\n\u003cTwilioVideoView\n    style={styles.twilioView}\n    twilioAccessToken={TWILIO_ACCESS_TOKEN}/\u003e\n```\n`CustomTwilioVideoView` - this provides you you a way to customize and listen to events. You will need to create your own UI components such as buttons. You'll still get a main window for the call, as well as a thumbnail for the participant.\n\n```javascript\nexport default class CustomizedTwilioVideo extends Component {\n\n    twilioView: CustomizedTwilioVideo;\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            statusText: '',\n            isConnected: false,\n        };\n    }\n\n    connectButtonPress() {\n        this.state.isConnected ? this.twilioView.disconnect() : this.twilioView.connect(ROOM_NAME);\n    }\n\n    render() {\n        return (\n            \u003cView style={styles.container}\u003e\n                \u003cCustomTwilioVideoView\n                    ref={(twilioView) =\u003e { this.twilioView = twilioView; }}\n                    style={styles.twilioView}\n                    twilioAccessToken={TWILIO_ACCESS_TOKEN}\n                    onConnected={() =\u003e {\n                        this.setState({\n                            statusText: 'connected',\n                            isConnected: true,\n                        })\n                    }}\n                    onConnectFailure={event =\u003e this.setState({statusText: 'error: ' + event.nativeEvent.reason})}\n                    onDisconnected={() =\u003e {\n                        this.setState({\n                            statusText: 'disconnected',\n                            isConnected: false,\n                        })\n                    }}\n                    onParticipantConnected={event =\u003e this.setState({statusText: 'new participant: ' + event.nativeEvent.participant})}\n                    onParticipantDisconnected={event =\u003e this.setState({statusText: 'participant disconnected'})}\n                /\u003e\n                \u003cText\n                    style={styles.backButtonText}\n                    onPress={() =\u003e this.props.navigator.pop()}\n                \u003e\n                    Back\n                \u003c/Text\u003e\n                \u003cTouchableHighlight\n                    style={styles.switchCamera}\n                    onPress={() =\u003e this.twilioView.switchCamera()}\n                \u003e\n                    \u003cText style={styles.buttonText}\u003eCamera\u003c/Text\u003e\n                \u003c/TouchableHighlight\u003e\n                \u003cTouchableHighlight\n                    style={styles.toogleVideo}\n                    onPress={() =\u003e this.twilioView.toggleVideo()}\n                \u003e\n                    \u003cText style={styles.buttonText}\u003eVideo\u003c/Text\u003e\n                \u003c/TouchableHighlight\u003e\n                \u003cTouchableHighlight\n                    style={styles.toogleAudio}\n                    onPress={() =\u003e this.twilioView.toggleSound()}\n                \u003e\n                    \u003cText style={styles.buttonText}\u003eAudio\u003c/Text\u003e\n                \u003c/TouchableHighlight\u003e\n                \u003cView\n                    style={styles.connectButtom}\u003e\n                    \u003cText\n                        style={styles.connectText}\n                        onPress={() =\u003e this.connectButtonPress()}\n                    \u003e\n                        {this.state.isConnected ? 'D': 'C'}\n                    \u003c/Text\u003e\n                \u003c/View\u003e\n                \u003cText\n                    style={styles.statusText}\n                \u003e\n                    {this.state.statusText}\n                \u003c/Text\u003e\n            \u003c/View\u003e\n        );\n    }\n}\n```\n\n\n##Screenshot\n\n![Sample App](twilio-video-sample-screenshot.png \"Sample App\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralphpina%2Ftwiliorn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fralphpina%2Ftwiliorn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralphpina%2Ftwiliorn/lists"}