react-native-nitro-theme-transition

Native, GPU-driven theme-change transitions for React Native — sixteen of them. No Skia. No Reanimated. No JS animation library.

The animation is Core Animation on iOS and the platform animators on Android, both interpolated by the OS render thread, so a busy JavaScript thread cannot drop a frame of it.

Built by Saleh Almashni

GitHub npm Docs 
npm install react-native-nitro-theme-transition react-native-nitro-modules

The sixteen effects

Every clip is the same screen of the example app, running on an Android emulator and an iOS simulator at the same time. Open one for the options it takes and how it is done natively.

fade Straight cross-dissolve. Options and native detail → circularReveal Collapses into a circle at your touch point. Options and native detail → circularRevealInverse A hole opens out from your touch and grows. Options and native detail → iris Collapses into a hexagon, diamond or squircle. Options and native detail → slide A straight edge paints the new theme across. Options and native detail → split Two edges part from the centre. Options and native detail → barnDoor Two edges close in; the old screen shrinks to a band. Options and native detail → blinds Parallel louvres wipe across themselves at once. Options and native detail → blur Blurs away, or wipes the new theme in out of focus. Options and native detail → liquidGlass A glass sheet slides down, swaps, and slides back up. Options and native detail → zoom The old screen scales up and fades away. Options and native detail → pixlated Colours swap behind a pixel mosaic. Options and native detail → dissolve Disintegrates into grain, speck by speck. Options and native detail → stripes A grainy edge sweeps across, cell by cell. Options and native detail → ripple Wavefronts expand from where you tapped. Options and native detail → shatter Breaks into shards that fall away in turn. Options and native detail →