{"id":13724742,"url":"https://github.com/droibit/react-native-custom-tabs","last_synced_at":"2025-05-07T19:30:38.467Z","repository":{"id":47079187,"uuid":"56728839","full_name":"droibit/react-native-custom-tabs","owner":"droibit","description":"Chrome Custom Tabs for React Native.","archived":false,"fork":false,"pushed_at":"2023-10-16T07:05:09.000Z","size":558,"stargazers_count":188,"open_issues_count":52,"forks_count":108,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-04-08T08:19:49.783Z","etag":null,"topics":["android","chrome-custom-tabs","chrome-customtabs","ios","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-custom-tabs","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/droibit.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}},"created_at":"2016-04-21T00:03:00.000Z","updated_at":"2025-01-10T07:23:15.000Z","dependencies_parsed_at":"2024-01-10T21:01:53.280Z","dependency_job_id":"1045961f-91e0-430b-be22-fe90687d1b2e","html_url":"https://github.com/droibit/react-native-custom-tabs","commit_stats":{"total_commits":71,"total_committers":9,"mean_commits":7.888888888888889,"dds":"0.11267605633802813","last_synced_commit":"63d2e75a27441cd492d6dcfa8df35cce0391b620"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droibit%2Freact-native-custom-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droibit%2Freact-native-custom-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droibit%2Freact-native-custom-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droibit%2Freact-native-custom-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/droibit","download_url":"https://codeload.github.com/droibit/react-native-custom-tabs/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252943590,"owners_count":21829272,"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","chrome-custom-tabs","chrome-customtabs","ios","react-native"],"created_at":"2024-08-03T01:02:02.759Z","updated_at":"2025-05-07T19:30:35.725Z","avatar_url":"https://github.com/droibit.png","language":"Java","funding_links":[],"categories":["Java"],"sub_categories":[],"readme":"# React Native Custom Tabs\n[![npm version](https://badge.fury.io/js/react-native-custom-tabs.svg)](https://badge.fury.io/js/react-native-custom-tabs) [![Software License](https://img.shields.io/badge/license-Apache%202.0-brightgreen.svg)](https://github.com/droibit/react-native-custom-tabs/blob/develop/LICENSE)\n\n[Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) for React Native.   \nCustom Tabs is supported only for Android, so the behavior on each platform is bellow.\n\n* Android  \n    If Chrome is installed, open the URL in Chrome that you have customized some of the look \u0026 feel. If it is not installed, open in other browser.\n\n* iOS  \n    If Chrome is installed, open the URL in it. If it is not installed, open in Safari.\n\nCustomization and detailed behavior refer to the [Usage](#Usage).\n\n## Installation\n\n```\nnpm install react-native-custom-tabs --save\n```\n\nTo link the native module automatically, it is recommended that you use the [rnpm](https://github.com/rnpm/rnpm).\n\n```\nrnpm link\n```\n\n#### Android\n\nIn Android, Add it in your **root** `build.gradle`([e.g. example](https://github.com/droibit/react-native-custom-tabs/blob/develop/example/android/build.gradle)) at the end of repositories:\n\n```groovy\nallprojects {\n    repositories {\n        ...\n        maven { url \"https://jitpack.io\" }\n    }\n}\n```\n\nAnd, provide `CustomTabsPackage` in your Application class.\n\n```java\nimport com.github.droibit.android.reactnative.customtabs.CustomTabsPackage;\n\n@Override\nprotected List\u003cReactPackage\u003e getPackages() {\n    return Arrays.asList(\n            ...,\n            new CustomTabsPackage()\n    );\n}\n```\n\nIf you use version `0.1.5` or higher, change the **app** `build.gradle`.\n\n```groovy\nandroid {\n    ...\n    compileSdkVersion 25\n    buildToolsVersion \"25.0.1\"\n}\n\ndependencies {\n    ...\n    compile \"com.android.support:appcompat-v7:25.0.1\"\n}\n```\n\n## Usage\n\nOpen the URL as `Linking` of React Native.\n\n```javascript\nCustomTabs.openURL('https://www.google.com').then((launched: {boolean}) =\u003e {\n  console.log(`Launched custom tabs: ${launched}`);\n}).catch(err =\u003e {\n  console.error(err)\n});\n```\n\n#### Customize for Android\n\nYou can customize the look \u0026 feel in Android. The following option is ignored in iOS.\n\n```javascript\nimport {\n    ANIMATIONS_SLIDE,\n    ANIMATIONS_FADE\n} from 'react-native-custom-tabs';\n\nCustomTabs.openURL(url, {\n  toolbarColor: '#607D8B',\n  enableUrlBarHiding: true,\n  showPageTitle: true,\n  enableDefaultShare: true,\n  // Specify full animation resource identifier(package:anim/name)\n  // or only resource name(in case of animation bundled with app).\n  animations: {\n    startEnter: 'slide_in_bottom',\n    startExit: 'slide_out_bottom',\n    endEnter: 'slide_in_bottom',\n    endExit: 'slide_out_bottom',\n  },\n  // And supports SLIDE and FADE as default animation.\n  // animations: ANIMATIONS_SLIDE or ANIMATIONS_FADE.\n  headers: {\n    'my-custom-header': 'my custom header value'\n  },\n  forceCloseOnRedirection: true,\n});\n```\n\nThe option to support:\n\n|property|type|default|description|\n|--------|----|-------|-----------|\n|toolbarColor|string|undefined|the Toolbar color. Supported formats are: #RRGGBB, #AARRGGBB, [etc](http://d.android.com/reference/android/graphics/Color.html#parseColor(java.lang.String)). |\n|enableUrlBarHiding|boolean|undefined|Enables the url bar to hide as the user scrolls down on the page.|\n|showPageTitle|boolean|undefined|Sets whether the title should be shown in the custom tab.|\n|enableDefaultShare|boolean|undefined|Whether to add a default shared items of the menu.|\n|animations|Object|undefined|Sets the exit and start animations. ANIMATIONS_FADE, ANIMATIONS_SLIDE or custom object with string properties `startEnter`, `startExit`, `endEnter` and `endExit` each defining an Android animation resource ID to use for the animations, such as `slide_in_right`.|\n|headers|Object|undefined|Sets any custom headers that should be used.|\n|forceCloseOnRedirection|boolean|undefined|Workaround that Custom Tabs doesn't close on redirecting back to app scheme.([#11](https://github.com/droibit/react-native-custom-tabs/pull/11))|\n\n\n`undefined` property is default behavior of the Custom Tabs.\n\nCustomize and default look \u0026 feel.  \n![screenshot](http://i.imgur.com/0qE2E7a.gif)\n\n## License\n\n    Copyright (C) 2015 The Android Open Source Project\n    Copyright (C) 2016 Shinya Kumagai\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroibit%2Freact-native-custom-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdroibit%2Freact-native-custom-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroibit%2Freact-native-custom-tabs/lists"}