• Stars
    star
    187
  • Rank 206,464 (Top 5 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created over 8 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Chrome Custom Tabs for React Native.

React Native Custom Tabs

npm version Software License

Chrome Custom Tabs for React Native.
Custom Tabs is supported only for Android, so the behavior on each platform is bellow.

  • Android
    If Chrome is installed, open the URL in Chrome that you have customized some of the look & feel. If it is not installed, open in other browser.

  • iOS
    If Chrome is installed, open the URL in it. If it is not installed, open in Safari.

Customization and detailed behavior refer to the Usage.

Installation

npm install react-native-custom-tabs --save

To link the native module automatically, it is recommended that you use the rnpm.

rnpm link

Android

In Android, Add it in your root build.gradle(e.g. example) at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

And, provide CustomTabsPackage in your Application class.

import com.github.droibit.android.reactnative.customtabs.CustomTabsPackage;

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            ...,
            new CustomTabsPackage()
    );
}

If you use version 0.1.5 or higher, change the app build.gradle.

android {
    ...
    compileSdkVersion 25
    buildToolsVersion "25.0.1"
}

dependencies {
    ...
    compile "com.android.support:appcompat-v7:25.0.1"
}

Usage

Open the URL as Linking of React Native.

CustomTabs.openURL('https://www.google.com').then((launched: {boolean}) => {
  console.log(`Launched custom tabs: ${launched}`);
}).catch(err => {
  console.error(err)
});

Customize for Android

You can customize the look & feel in Android. The following option is ignored in iOS.

import {
    ANIMATIONS_SLIDE,
    ANIMATIONS_FADE
} from 'react-native-custom-tabs';

CustomTabs.openURL(url, {
  toolbarColor: '#607D8B',
  enableUrlBarHiding: true,
  showPageTitle: true,
  enableDefaultShare: true,
  // Specify full animation resource identifier(package:anim/name)
  // or only resource name(in case of animation bundled with app).
  animations: {
    startEnter: 'slide_in_bottom',
    startExit: 'slide_out_bottom',
    endEnter: 'slide_in_bottom',
    endExit: 'slide_out_bottom',
  },
  // And supports SLIDE and FADE as default animation.
  // animations: ANIMATIONS_SLIDE or ANIMATIONS_FADE.
  headers: {
    'my-custom-header': 'my custom header value'
  },
  forceCloseOnRedirection: true,
});

The option to support:

property type default description
toolbarColor string undefined the Toolbar color. Supported formats are: #RRGGBB, #AARRGGBB, etc.
enableUrlBarHiding boolean undefined Enables the url bar to hide as the user scrolls down on the page.
showPageTitle boolean undefined Sets whether the title should be shown in the custom tab.
enableDefaultShare boolean undefined Whether to add a default shared items of the menu.
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.
headers Object undefined Sets any custom headers that should be used.
forceCloseOnRedirection boolean undefined Workaround that Custom Tabs doesn't close on redirecting back to app scheme.(#11)

undefined property is default behavior of the Custom Tabs.

Customize and default look & feel.
screenshot

License

Copyright (C) 2015 The Android Open Source Project
Copyright (C) 2016 Shinya Kumagai

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

More Repositories

1

flutter_custom_tabs

A Flutter plugin for mobile apps to launch a URL in Custom Tabs/SFSafariViewController.
Dart
133
star
2

rxactivitylauncher

Provide a way to receive the results of the Activity by RxJava.
Java
20
star
3

truth-postfix-plugin

Plugin for Google Truth to use in IntelliJ Idea/Android Studio.
Kotlin
12
star
4

CustomTabsLauncher

Library to help the launch of Custom Tabs.
Kotlin
8
star
5

androidapilevel-plugin

Plugin to display API level and version name of Android.
Kotlin
7
star
6

react-native-todo-plus

Sample todo app using React Native Android.
JavaScript
6
star
7

messenger

Library for easy use of the Message API of Android using Kotlin Coroutines.
Kotlin
3
star
8

facedetection

Sample application that uses the face detection of Google Play Services
Java
3
star
9

customtabs-oauth

OAuth sample application using the Custom Tabs
Java
2
star
10

moshi-moshi

Sample app that using Kotlin and Moshi.
Kotlin
2
star
11

rxjava-postfix-plugin

Postfix Completion with RxJava to use in IntelliJ Idea/Android Studio.
Kotlin
2
star
12

clippin

Easily and flexibly applies the Reveal Effect.
Java
2
star
13

kmm-firebase-todo-app

Kotlin Multiplatform todo app with Firebase.
Kotlin
2
star
14

dagger-hilt-sample

Dagger-Hilt sample application.
Kotlin
1
star
15

dynamic-feature-modules-navigation-sample

Sample application using dynamic feature modules & navigation component.
Kotlin
1
star
16

flutter_animation_sample

A new Flutter sample project for Animations.
Dart
1
star
17

android-pass-data-between-uis-sample

Sample app pass data between uis(Fragment/Activity)
Kotlin
1
star
18

ValueCopyMacro

A Swift Macro that generates a function that copies values like Kotlin's data classes.
Swift
1
star
19

react-native-redux-todo

Sample todo application that using react-native with redux.
TypeScript
1
star
20

hello-jetpack-compose

Kotlin
1
star
21

hello_dart

Dart
1
star
22

databinding.kotlin

DataBinding with Kotlin
Kotlin
1
star
23

place-auto-complete-sample

Sample application that using Google Maps + Place Auto Complete.
Java
1
star
24

flutter_bloc_todo

Sample todo application using flutter with bloc.
Dart
1
star
25

flutter_location_settings

WIP
Dart
1
star
26

hello-typescript

TypeScript
1
star
27

react-navigation-sample

Sample application that using react-navigation and redux.
TypeScript
1
star
28

boltssample.kotlin

Sample of bolts written in kotlin
Java
1
star
29

flutter-codelabs

Dart
1
star
30

progress-action-view

Show progress on Toolbar as ActionView.
Java
1
star
31

hello_flutter

First flutter sample application.
Dart
1
star
32

UIKit-Sample

Template repository for UIKit sample app with SPM generated by XcodeGen.
Swift
1
star
33

react-native-storybook-sample

Sample application that using react-native and storybook.
TypeScript
1
star
34

flutter_platform_view_scaling

Dart
1
star
35

lifecycle-of-viewmodel

Kotlin
1
star
36

ExposeForTestingMacro

A Swift macro to expose private properties and functions for unit tests.
Swift
1
star