Support custom animations

Author: Axel Eirola

README.md

@@ -90,6 +90,15 @@ CustomTabs.openURL(url, {
   enableUrlBarHiding: true,
   showPageTitle: true,
   enableDefaultShare: true,
+  // For value, specify only full qualifier or only resource name.
+  // In the case of the resource name, the module complements the application package in java side.
+  animations: {
+    startEnter: 'com.github.droibit.android.reactnative.customtabs.example:anim/slide_in_bottom',
+    startExit: 'com.github.droibit.android.reactnative.customtabs.example:anim/slide_out_bottom',
+    endEnter: 'com.github.droibit.android.reactnative.customtabs.example:anim/slide_in_bottom',
+    endExit: 'com.github.droibit.android.reactnative.customtabs.example:anim/slide_out_bottom',
+  },
+  // or
   animations: ANIMATIONS_SLIDE, // or ANIMATIONS_FADE
   headers: {
     'my-custom-header': 'my custom header value'
@@ -105,7 +114,7 @@ The option to support:
 |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|number|undefined|Sets the exit and start animations. ANIMATIONS_FADE or ANIMATIONS_SLIDE.|
+|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 `com.github.droibit.android.reactnative.customtabs:anim/slide_in_right`.|
 |headers|Object|undefined|Sets any custom headers that should be used.|
 
 `undefined` property is the default behavior of the Custom Tabs.

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

@@ -22,6 +22,7 @@
 import com.facebook.react.common.annotations.VisibleForTesting;
 
 import java.util.Map;
+import java.util.regex.Pattern;
 
 import javax.annotation.Nullable;
 
@@ -43,12 +44,6 @@ public class CustomTabsModule extends ReactContextBaseJavaModule {
     @VisibleForTesting
     /* package */ static final String KEY_HEADERS = "headers";
 
-    @VisibleForTesting
-    /* package */ static final int ANIMATIONS_SLIDE = 0;
-
-    @VisibleForTesting
-    /* package */ static final int ANIMATIONS_FADE = 1;
-
     private static final Map<String, Object> CONSTANTS;
 
     static {
@@ -63,6 +58,10 @@ public class CustomTabsModule extends ReactContextBaseJavaModule {
 
     private static final String MODULE_NAME = "CustomTabsManager";
 
+    // Note: The full resource qualifier is "package:type/entry".
+    // https://developer.android.com/reference/android/content/res/Resources.html#getIdentifier(java.lang.String, java.lang.String, java.lang.String)
+    private static final Pattern animationIdentifierPattern = Pattern.compile("^.+:.+/");
+
     public CustomTabsModule(ReactApplicationContext reactContext) {
         super(reactContext);
     }
@@ -148,15 +147,8 @@ public void openURL(String url, ReadableMap option, Promise promise) {
         // TODO: If it does not launch Chrome, animation is unnecessary?
 
         if (option.hasKey(KEY_ANIMATIONS)) {
-            final int animation = option.getInt(KEY_ANIMATIONS);
-            switch (animation) {
-                case ANIMATIONS_SLIDE:
-                    applySlideAnimation(context, builder);
-                    break;
-                case ANIMATIONS_FADE:
-                    applyFadeAnimation(context, builder);
-                    break;
-            }
+            final ReadableMap animations = option.getMap(KEY_ANIMATIONS);
+            applyAnimation(context, builder, animations);
         }
         CustomTabsIntent customTabsIntent = builder.build();
 
@@ -194,14 +186,29 @@ public void openURL(String url, ReadableMap option, Promise promise) {
     }
 
     @VisibleForTesting
-    /* package */ void applySlideAnimation(Context context, CustomTabsIntent.Builder builder) {
-        builder.setStartAnimations(context, R.anim.slide_in_right, R.anim.slide_out_left)
-                .setExitAnimations(context, android.R.anim.slide_in_left, android.R.anim.slide_out_right);
+    /* package */ void applyAnimation(Context context, CustomTabsIntent.Builder builder, ReadableMap animations) {
+        final int startEnterAnimationId = animations.hasKey("startEnter")
+            ? resolveAnimationIdentifierIfNeed(context, animations.getString("startEnter"))
+            : 0;
+        final int startExitAnimationId = animations.hasKey("startExit")
+            ? resolveAnimationIdentifierIfNeed(context, animations.getString("startExit"))
+            : 0;
+        final int endEnterAnimationId = animations.hasKey("endEnter")
+            ? resolveAnimationIdentifierIfNeed(context, animations.getString("endEnter"))
+            : 0;
+        final int endExitAnimationId = animations.hasKey("endExit")
+            ? resolveAnimationIdentifierIfNeed(context, animations.getString("endExit"))
+            : 0;
+        builder.setStartAnimations(context, startEnterAnimationId, startExitAnimationId)
+                .setExitAnimations(context, endEnterAnimationId, endExitAnimationId);
     }
 
-    @VisibleForTesting
-    /* package */ void applyFadeAnimation(Context context, CustomTabsIntent.Builder builder) {
-        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);
+    // Complement the application name of the resource qualifier as necessary.
+    private int resolveAnimationIdentifierIfNeed(Context context, String identifier) {
+        if (animationIdentifierPattern.matcher(identifier).find()) {
+            return context.getResources().getIdentifier(identifier, null, null);
+        } else {
+            return context.getResources().getIdentifier(identifier, "anim", context.getPackageName());
+        }
     }
 }

src/TabOption.js

@@ -7,13 +7,30 @@
  * Start and exit animations of Custom Tabs.
  * Slide in from left at start, Slide out to right.at exit.
  */
-export const ANIMATIONS_SLIDE:number = 0;
+export const ANIMATIONS_SLIDE: Animations = {
+  startEnter: 'slide_in_right',
+  startExit: 'slide_out_left',
+  endEnter: 'android:anim/slide_in_left',
+  endExit: 'android:anim/slide_out_right',
+};
 
 /**
  * Start and exit animations of Custom Tabs.
  * Fade in at start, Fade out  at exit.
  */
-export const ANIMATIONS_FADE:number = 1;
+export const ANIMATIONS_FADE: Animations = {
+  startEnter: 'android:anim/fade_in',
+  startExit: 'android:anim/fade_out',
+  endEnter: 'android:anim/fade_out',
+  endExit: 'android:anim/fade_in',
+};
+
+export type Animations = {
+  startEnter: string,
+  startExit: string,
+  endEnter: string,
+  endExit: string,
+}
 
 /**
  * Options to customize Custom Tabs of look & feel.
@@ -46,10 +63,13 @@ export type TabOption = {
   /**
    * Sets the exit and start animations.
    *
+   * Each property needs to be an Andrion animation resource ID,
+   * e.g. 'com.github.droibit.android.reactnative.customtabs.example:anim/slide_out_bottom'
+   *
    * @see ANIMATIONS_FADE
    * @see ANIMATIONS_SLIDE
    */
-    animations?: number;
+    animations?: Animations;
 
   /**
    * Sets any custom headers that should be used.