Customise close or back button in chrome custom tab.

README.md

@@ -70,7 +70,10 @@ CustomTabs.openURL(url, {
   animations: ANIMATIONS_SLIDE, // or ANIMATIONS_FADE
   headers: {
     'my-custom-header': 'my custom header value'
-  }
+  },
+   backButton:true,         // or false
+   backButtonColor:'light',  // or dark
+   backButtonIcon:'ic_arrow_back_white_24dp' // to provide own back-button
 });
 ```
 
@@ -84,6 +87,9 @@ The option to support:
 |enableDefaultShare|boolean|undefined|Whether to add a default shared items of the menu.|
 |animations|number|undefined|Sets the exit and start animations. ANIMATIONS_FADE or ANIMATIONS_SLIDE.|
 |headers|Object|undefined|Sets any custom headers that should be used.|
+|backButton|Boolean|false|(android only), set '<' back button insted of cross icon.|
+|backButtonColor|enum|dark|(android only), 'light' or 'dark', provide white or black color '<' icon|
+|backButtonIcon|string|undefined| (android only), can provide own icon, just download the custom icons from https://material.io/icons/ and add them in REACTNATIVEPROJECT/android/app/src/main/res/mipmap-*|
 
 `undefined` property is the default behavior of the Custom Tabs.
 

android/src/main/java/com/github/droibit/android/reactnative/customtabs/CustomTabsModule.java

@@ -20,10 +20,16 @@
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.common.annotations.VisibleForTesting;
 
+
 import java.util.Map;
 
 import javax.annotation.Nullable;
 
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.content.res.Resources;
+import android.R.drawable;
+
 /**
  * CustomTabs module.
  *
@@ -43,6 +49,12 @@ public class CustomTabsModule extends ReactContextBaseJavaModule {
     /* package */ static final String KEY_ANIMATIONS = "animations";
     @VisibleForTesting
     /* package */ static final String KEY_HEADERS = "headers";
+    @VisibleForTesting
+    /* package */ static final String KEY_BACKBUTTON = "backButton";
+    @VisibleForTesting
+    /* package */ static final String KEY_BACKBUTTONCOLOR = "backButtonColor";
+    @VisibleForTesting
+    /* package */ static final String KEY_BACKBUTTONICON = "backButtonIcon";
 
     @VisibleForTesting
     /* package */ static final int ANIMATIONS_SLIDE = 0;
@@ -60,6 +72,9 @@ public class CustomTabsModule extends ReactContextBaseJavaModule {
         CONSTANTS.put(KEY_DEFAULT_SHARE_MENU_ITEM, KEY_DEFAULT_SHARE_MENU_ITEM);
         CONSTANTS.put(KEY_ANIMATIONS, KEY_ANIMATIONS);
         CONSTANTS.put(KEY_HEADERS, KEY_HEADERS);
+        CONSTANTS.put(KEY_BACKBUTTON, KEY_BACKBUTTON);
+        CONSTANTS.put(KEY_BACKBUTTONCOLOR, KEY_BACKBUTTONCOLOR);
+        CONSTANTS.put(KEY_BACKBUTTONICON, KEY_BACKBUTTONICON);
     }
 
     private static final String MODULE_NAME = "CustomTabsManager";
@@ -134,6 +149,30 @@ public void openURL(String url, ReadableMap option, Promise promise) {
                         "Invalid toolbar color '" + colorString + "': " + e.getMessage());
             }
         }
+        //KEY_BACKBUTTON
+        if (option.hasKey(KEY_BACKBUTTON) && option.getBoolean(KEY_BACKBUTTON)) {
+            Resources res = context.getResources();
+            String packageName = context.getPackageName();
+            String icon = "ic_chevron_left_black_24dp";
+            if (option.hasKey(KEY_BACKBUTTONCOLOR)) {
+                String color = option.getString(KEY_BACKBUTTONCOLOR);
+                icon = color.equalsIgnoreCase("light") ? "ic_chevron_left_white_24dp" : "ic_chevron_left_black_24dp";
+            }
+            int iconId = res.getIdentifier(icon, "mipmap", packageName);
+            Bitmap iconBitMap = BitmapFactory.decodeResource(res, iconId);
+            builder.setCloseButtonIcon(iconBitMap);
+        }
+
+        //KEY_BACKBUTTONICON
+        if (option.hasKey(KEY_BACKBUTTONICON)) {
+            Resources res = context.getResources();
+            String packageName = context.getPackageName();
+            String icon = !option.getString(KEY_BACKBUTTONICON).equals("") ? option.getString(KEY_BACKBUTTONICON) : "ic_chevron_left_black_24dp";
+            int iconId = res.getIdentifier(icon, "mipmap", packageName);
+            Bitmap iconBitMap = BitmapFactory.decodeResource(res, iconId);
+            builder.setCloseButtonIcon(iconBitMap);
+        }
+
         if (option.hasKey(KEY_ENABLE_URL_BAR_HIDING) &&
                 option.getBoolean(KEY_ENABLE_URL_BAR_HIDING)) {
             builder.enableUrlBarHiding();
@@ -205,4 +244,4 @@ public void openURL(String url, ReadableMap option, Promise promise) {
         builder.setStartAnimations(context, android.R.anim.fade_in, android.R.anim.fade_out)
                 .setExitAnimations(context, android.R.anim.fade_out, android.R.anim.fade_in);
     }
-}
+}

example/index.android.js

@@ -68,13 +68,16 @@ class Example extends Component {
     );
   }
 
-  openCustomizedCustomTabs() {
+    openCustomizedCustomTabs() {
     this.openGoogle({
       toolbarColor: '#607D8B',
       enableUrlBarHiding: true,
       showPageTitle: true,
       enableDefaultShare: true,
-      animations: ANIMATIONS_SLIDE
+      animations: ANIMATIONS_SLIDE,
+      backButton:true,
+      backButtonColor:'light',
+      backButtonIcon:'ic_arrow_back_white_24dp'
     });
   }