Support custom screen transitions about react-native-custom-tabs HOT 11 CLOSED

@aeirola
I merged, So I'm going to release it to npm as 0.1.7 soon.

from react-native-custom-tabs.

@aeirola
Thank you for PR.
I understand, and thought that proposal of the custom animation option is as follows.

• Only animations.
• Animation name is as short as possible.

CustomTabs.openURL(url, {
  ...
  // 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: 'slide_in_bottom',
    startExit: 'slide_out_bottom',
    endEnter: 'slide_in_bottom',
    endExit: 'slide_out_bottom',
  },
  // or
  animations: ANIMATIONS_SLIDE, // or ANIMATIONS_FADE
})

// in TabOption.js

// Change definition of ANIMATIONS_SLIDE/ANIMATIONS_FADE to `object` as follows.
export ANIMATIONS_SLIDE: Animations = {
  startEnter: 'com.github.droibit.android.reactnative.customtabs:anim/slide_in_right',
  ...
}

export type Animations = {
  startEnter: string,
  ...
}

What do you think about proposal?

from react-native-custom-tabs.

Hi @droibit. Yeah, that actually makes more sense. With only one option for configuring animations it is explicit that only one animation is configurable. I'll update the PR to reflect this.

from react-native-custom-tabs.

I updated the PR with a more streamlined configuration. Unfortunately during testing I noticed that the custom animations provided by this package are not accessible as we expected. It looks like all resources provided by dependent native modules are packaged under the application package name, meaning that I'm not able to access the animations through com.github.droibit.android.reactnative.customtabs:anim/slide_in_right, but instead only through my.application.package.name:anim/slide_in_right.

Maybe it is better to then just export ANIMATIONS_SLIDE and ANIMATIONS_FADE as unique strings, which are handled as special cases in the Java code so that we are able to access the correct animations through R.anim. The interface to the user of the package will still remain the same, with only one animations property.

from react-native-custom-tabs.

@aeirola Thank you for updating.
Oh, I mistook the full qualifier of slide animation...
Consider the resource access problem and write my proposal again.

• Only animations.

And,

• For consistency, only object type.
• And specify short resource name(In many cases, can omit the package name).

CustomTabs.openURL(url, {
  ...
  // For value, specify only full qualifier or only resource name.
  // Note: For resources bundled with application, complement the application package name on Java side.
  animations: {
    startEnter: 'slide_in_bottom',
    startExit: 'slide_out_bottom',
    endEnter: 'slide_in_bottom',
    endExit: 'slide_out_bottom',
  },
  // or
  animations: ANIMATIONS_SLIDE, // or ANIMATIONS_FADE
})


// Change definition of ANIMATIONS_SLIDE/ANIMATIONS_FADE to `object` as follows.
export ANIMATIONS_SLIDE: Animations = {
  // Note: For resources bundled with library, complement the application package name on Java side.
  startEnter: 'slide_in_right',
  ...
}

export ANIMATIONS_FADE: Animatios = {
  // Note: Full qualifier does not complete package name.
  startEnter: 'android:anim/fade_in',
  ...
}

In Java side:

// 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("^.+:anim/");

/* package */ void applyAnimation(Context context, CustomTabsIntent.Builder builder, ReadableMap animations) {
  final int startEnterAnimationId = animations.hasKey("startEnter")
          ? context.getResources().getIdentifier(resolveAnimationIdentifierIfNeed(animations.getString("startEnter")), null, null)
          : 0;
  ...
}

// Complement the application name of the resource qualifier as necessary.
private String resolveAnimationIdentifierIfNeed(Context context, String identifier) {
  if (animationIdentifierPattern.matcher(identifier).find()) {
    return identifier;
  }
  return String.format("%s:anim/%s", context.getPackageName(), identifier);
}

I think that snipet probably works.
Could you consider the above contents?

from react-native-custom-tabs.

@droibit Yeah, that actually makes more sense. This way we would have a general interface for both custom and predefined animations. And it has the benefit for allowing shorthand custom animation names as well.

Only change I'd make to your proposal would be to have a slightly more common regex which wouldn't enforce the resource directory to be anim/, but instead have something like ^.+:.+/.

from react-native-custom-tabs.

@aeirola Thank you for review!
Could you change regular expression(^.+:.+/) and update PR?

from react-native-custom-tabs.

@droibit Yes, just updated the PR. Just performing final testing on my app to verify that it works. If the PR looks good, I could go ahead and squash the commits to a single one for cleaner history.

from react-native-custom-tabs.

@aeirola LGTM 👍

from react-native-custom-tabs.

@droibit Squashed and ready for merge.

from react-native-custom-tabs.

@aeirola
I just released 0.1.7.
Thank you!

from react-native-custom-tabs.