feat: add per-property transition support

[EQuimper]

Summary

• Add per-property transition support to EaseView, allowing different animation configs per animatable property (e.g., spring for opacity, timing for translateX, none for scale)
• Implement TransitionMap type with default fallback and per-property SingleTransition overrides
• Support type: 'none' to immediately snap a property to its target value without animation
• Full native implementation on both iOS (Core Animation) and Android (ObjectAnimator/SpringAnimation)

API Example

<EaseView
  animate={{ opacity: 1, translateX: 100, scale: 1.2 }}
  transition={{
    default: { type: 'spring', damping: 15 },
    opacity: { type: 'timing', duration: 200 },
    scale: { type: 'none' },
  }}
/>

Solution

• src/types.ts — new SingleTransition, TransitionMap, and updated Transition union type
• src/EaseView.tsx — resolve per-property transition maps into flat native props (transitionOpacityType, transitionOpacityDuration, etc.)
• src/EaseViewNativeComponent.ts — codegen props for per-property transition overrides
• ios/EaseView.mm — resolve per-property transition config on the native side, support none type for immediate value application
• android/EaseView.kt + EaseViewManager.kt — per-property transition resolution and none support
• src/__tests__/EaseView.test.tsx — tests for per-property resolution, default fallback, and none behavior
• example/src/App.tsx — demo showcasing per-property transitions
• README.md — documentation for the new API

Test Plan

Per-Property Transitions demo — opacity fades slowly (1.5s easeInOut) while translateX bounces with a spring. The timing difference between properties is clearly visible.

iOS — iPhone 17 Pro (iOS 26.2)

pr4-ios-trimmed.mp4

Android — Android 16 emulator (arm64)

pr4-android-trimmed.mp4

Web — Chrome, 390px viewport

pr4-web-final.mp4

[janicduplessis]

I think I would prefer to generalize to the transition per prop format before passing to native so we always use the same format and don’t end up with duplicate props. I would also just pass array of objects at the point, will be simpler.

So for the codegen I would do something like:

interface TransitionConfig {
… all possible configs
}

interface Transitions {
default: TransitionConfig,
opacity: TransitionConfig,
… all other props
}

transitions: Transitions

then in js we can normalize from the nice transition type we have to this shape. Can also provide a default value there if one wasn’t passed.

in native to get transition for a prop we can do transitions.prop || transitions.default

[janicduplessis]

If we have a single transition I think we should just pass {{ default: config }} instead of setting the config to all props.

[janicduplessis]

Same here, we should just pass {{ default: DEFAULT_CONFIG }}

[janicduplessis]

Also I feel like this might not be needed?

The way I see it here is just all we need to do is add the default config if one is not passed.

So if we pass:

• transition={{}} we send to native transitions={{ default: DEFAULT_TRANSITION }}
• transition={{alpha: {...}}} send to native transitions={{ default: DEFAULT_TRANSITION, alpha: {...}}}
• transition={{default: { some values }}} send to native transitions={{default: { some values }}}

[janicduplessis]

I think we can make all the props optional / nullable here, except defaultConfig that will always be there.

[janicduplessis]

Do we need this? Cant we just use the codegen type directly?

[janicduplessis]

can this stay an enum in the codegen

[janicduplessis]

I just realized it might not make sense to allow having a different config for transforms (scale, translate, roration). On iOS we set all of those together as a matrix so I dont think it is possible to animated with different timings, on Android it seems possible and on web probably not since it is all the transform prop.

What I suggest is instead of having a config for all transforms we just have a transform config that will apply to all transforms.

SO options would become

• default
• transform
• opacity
• borderRadius
• backgroundColor