What's Changed
- 🐎 Revamped Animation Engine by @chrfalch in #193
- 👤 Drop Shadows by @wcandillon in #217
- 🎭 Masks by @wcandillon in #221
- 📦 FitBox by @wcandillon in #229
- 📗 Documentation improvements by @wcandillon in #215
- 💄 Improve naming of Skia JSI instances @wcandillon in #216
Breaking Changes
The animation system has been updated and we are moving away (deprecating) property callback syntax in favour for our new derived value system. This is implemented in C++ and is fast and efficient:
const Component = () => {
const { width } = useWindowDimensions();
// Create timing loop
const progress = useLoop({
duration: 1000,
easing: Easing.inOut(Easing.cubic),
});
// Animate position of circle
const position = useDerivedValue(
(p) => mix(p, 10, width - (Size + Padding)),
[progress]
);
// Animate radius of circle
const radius = useDerivedValue((p) => 5 + p * 55, [progress]);
return (
<Canvas style={styles.canvas}>
<Fill color="white" />
<Circle cx={position} cy={20} r={radius} color="#DC4C4C" />
</Canvas>
);
};Consult the Animation section in the documentation for more details!
Full Changelog: v0.1.103-alpha...v0.1.105-alpha