9 React Native Features to Add to Your Developer Toolkit

Not a Medium Member? “Read For Free”

1. Easing.inOut

When something moves on screen, the speed is important. If it moves at the same speed the whole time, it looks stiff.

Easing lets you change the speed while the animation runs. There are three helpers you can wrap around any curve:

Easing.in(Easing.cubic)     // starts slow, ends fast
Easing.out(Easing.cubic)    // starts fast, ends slow
Easing.inOut(Easing.cubic)  // starts slow, fast in the middle, ends slow

In the demo, three balls race across three tracks. They all start and finish at the same time, but they don’t move the same way. The top one creeps out and then rushes to the end. The middle one shoots out and then slows down. The bottom one does both, and it looks the most natural.

Code:

const curves: EasingFunction[] = [
  Easing.in(Easing.cubic),
  Easing.out(Easing.cubic),
  Easing.inOut(Easing.cubic),
];
const TRACK = 280;
const BALL = 36;

export function EasingInOutDemo() {
  const theme = useTheme();
  const progress =…