diff --git a/README.md b/README.md index 0f95875..4330702 100644 --- a/README.md +++ b/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. diff --git a/android/src/main/java/com/github/droibit/android/reactnative/customtabs/CustomTabsModule.java b/android/src/main/java/com/github/droibit/android/reactnative/customtabs/CustomTabsModule.java index ee34980..77e1e3a 100644 --- a/android/src/main/java/com/github/droibit/android/reactnative/customtabs/CustomTabsModule.java +++ b/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); } -} +} \ No newline at end of file diff --git a/android/src/main/res/mipmap-hdpi/ic_chevron_left_black_24dp.png b/android/src/main/res/mipmap-hdpi/ic_chevron_left_black_24dp.png new file mode 100644 index 0000000..f4ef28e Binary files /dev/null and b/android/src/main/res/mipmap-hdpi/ic_chevron_left_black_24dp.png differ diff --git a/android/src/main/res/mipmap-hdpi/ic_chevron_left_white_24dp.png b/android/src/main/res/mipmap-hdpi/ic_chevron_left_white_24dp.png new file mode 100644 index 0000000..bd23a06 Binary files /dev/null and b/android/src/main/res/mipmap-hdpi/ic_chevron_left_white_24dp.png differ diff --git a/android/src/main/res/mipmap-mdpi/ic_chevron_left_black_24dp.png b/android/src/main/res/mipmap-mdpi/ic_chevron_left_black_24dp.png new file mode 100644 index 0000000..e6dbd93 Binary files /dev/null and b/android/src/main/res/mipmap-mdpi/ic_chevron_left_black_24dp.png differ diff --git a/android/src/main/res/mipmap-mdpi/ic_chevron_left_white_24dp.png b/android/src/main/res/mipmap-mdpi/ic_chevron_left_white_24dp.png new file mode 100644 index 0000000..4d7869d Binary files /dev/null and b/android/src/main/res/mipmap-mdpi/ic_chevron_left_white_24dp.png differ diff --git a/android/src/main/res/mipmap-xhdpi/ic_chevron_left_black_24dp.png b/android/src/main/res/mipmap-xhdpi/ic_chevron_left_black_24dp.png new file mode 100644 index 0000000..8ead939 Binary files /dev/null and b/android/src/main/res/mipmap-xhdpi/ic_chevron_left_black_24dp.png differ diff --git a/android/src/main/res/mipmap-xhdpi/ic_chevron_left_white_24dp.png b/android/src/main/res/mipmap-xhdpi/ic_chevron_left_white_24dp.png new file mode 100644 index 0000000..62f3590 Binary files /dev/null and b/android/src/main/res/mipmap-xhdpi/ic_chevron_left_white_24dp.png differ diff --git a/android/src/main/res/mipmap-xxhdpi/ic_chevron_left_black_24dp.png b/android/src/main/res/mipmap-xxhdpi/ic_chevron_left_black_24dp.png new file mode 100644 index 0000000..f443b3c Binary files /dev/null and b/android/src/main/res/mipmap-xxhdpi/ic_chevron_left_black_24dp.png differ diff --git a/android/src/main/res/mipmap-xxhdpi/ic_chevron_left_white_24dp.png b/android/src/main/res/mipmap-xxhdpi/ic_chevron_left_white_24dp.png new file mode 100644 index 0000000..7141cc6 Binary files /dev/null and b/android/src/main/res/mipmap-xxhdpi/ic_chevron_left_white_24dp.png differ diff --git a/example/android/app/src/main/res/mipmap-hdpi/ic_arrow_back_white_24dp.png b/example/android/app/src/main/res/mipmap-hdpi/ic_arrow_back_white_24dp.png new file mode 100644 index 0000000..cd19726 Binary files /dev/null and b/example/android/app/src/main/res/mipmap-hdpi/ic_arrow_back_white_24dp.png differ diff --git a/example/android/app/src/main/res/mipmap-mdpi/ic_arrow_back_white_24dp.png b/example/android/app/src/main/res/mipmap-mdpi/ic_arrow_back_white_24dp.png new file mode 100644 index 0000000..4ef72ee Binary files /dev/null and b/example/android/app/src/main/res/mipmap-mdpi/ic_arrow_back_white_24dp.png differ diff --git a/example/android/app/src/main/res/mipmap-xhdpi/ic_arrow_back_white_24dp.png b/example/android/app/src/main/res/mipmap-xhdpi/ic_arrow_back_white_24dp.png new file mode 100644 index 0000000..832f5a3 Binary files /dev/null and b/example/android/app/src/main/res/mipmap-xhdpi/ic_arrow_back_white_24dp.png differ diff --git a/example/android/app/src/main/res/mipmap-xxhdpi/ic_arrow_back_white_24dp.png b/example/android/app/src/main/res/mipmap-xxhdpi/ic_arrow_back_white_24dp.png new file mode 100644 index 0000000..32a6d91 Binary files /dev/null and b/example/android/app/src/main/res/mipmap-xxhdpi/ic_arrow_back_white_24dp.png differ diff --git a/example/index.android.js b/example/index.android.js index 07746df..901cb14 100644 --- a/example/index.android.js +++ b/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' }); }