grahammendick / navigation

Scene-Based Navigation for React and React Native
https://grahammendick.github.io/navigation/
Apache License 2.0
571 stars 40 forks source link

Supported declarative animation api (Android) #766

Closed grahammendick closed 7 months ago

grahammendick commented 7 months ago

Don't need anim resx files to create transitions anymore. Can do it all through a declarative api. Specify the starting position of an umounted/crumb scene and the Navigation router will animate the transition. Uses the same underlying native animation api as before but new's up Animation objects instead of loading them from resx files.

For example, here's how to define the transition from the Twitter sample

<NavigationStack
  crumbStyle={[
    {type: 'alpha', start: 0},
    {type: 'scale', startX: 0.8, startY: '0.8'},
    {type: 'translate', startX: '5%'},
  ]}
  unmountStyle={{type: 'translate', startX: '100%'}}
>

Don't need to know the from direction of the transition anymore. But it's still available for more complicate scenarios, for example, an asymmetric unmount transition (where the 'from' doesn't match the 'to').

unmountStyle={from => from ? {type: 'translate', fromX: '100%'} : {type: 'translate', toY: '100%'}}

Couldn't configure the shape of the crumb/unmountStyle props in the native spec on Fabric. Pretty sure Fabric still doesn't support arrays of objects. But it didn't matter because Fabric passed the whole prop to native anyway. For example, the ReadableMap had an array of items even though items wasn't in the native spec.