How to Animate the Items of a React Native FlatList

  • Animating EntryTo easily demo our animation we’ll animated to insertion of the list item.
  • When a new item is added to the people array we’ll change the opacity of the row and, via transform, the scale and rotation.
  • First we’ll create a new animated value and, when the component mounts, we’ll change that value from 0 to 1 using Animated.timing.
  • Inside the render function we use the animated value to adjust the opacity and scale (directly, because 0 to 1 is what we’re looking for) and the rotation.
  • We’re now left with some subtle, yet slick, animations for each row item for whenever they’re added or removed.

I was recently asked about animating items in a React Native list — specifically animating the item when added and removed. That’s what we’ll cover today! To accomplish this we’ll use the FlatList…
Continue reading “How to Animate the Items of a React Native FlatList”

A tiny expression compiler for React Native Animated values

  • Its expressive API lets developers compose animated effects based on time, spring physics and even real-time user interaction with distinct ease.I’ve recently released animated.macro, a small JavaScript package that improves the ergonomics of working with animated values in React Native apps — and, more importantly, has been fun to build.
  • The results of these operations can then be used anywhere the basic values can.For instance, here’s how you add two animated values together:const result = Animated.add(x, y);And here’s a slightly more involved calculation:const result = Animated.modulo( Animated.add(phase, Math.PI * 2 + angle), Math.PI * 2);What can be improvedOn closer inspection, the…
  • This can be an inconvenience when refactoring animation code.In the second example, the types of phase and angle (and of Math.PI) similarly dictate the shape of the surrounding code — e.g. Animated values can’t be added with + and plain numbers can’t be added with Animated.add().
  • Can we do better?Yes.Introducing animated.macro 🕺🏽🔢animated.macro lets you write JS-like arithmetic expressions that operate on animated values and plain numbers alike.
  • These expressions take the form of tagged template literals that evaluate to animated values.The second example above can now be written as:import animated from “animated.macro”;const result = animated` (${phase} + ${Math.PI} * 2 + ${angle}) % (${Math.PI} * 2)`;Addition, subtraction, multiplication, division and modulo are all supported, with the same…

The Animated library, which allows animations to be set up in JS and executed on the native thread, is a mainstay of the React Native programming model. Its expressive API lets developers compose…
Continue reading “A tiny expression compiler for React Native Animated values”

How to Animate the Items of a React Native FlatList

  • Be sure to subscribe!Animating EntryTo easily demo our animation we’ll animated to insertion of the list item.
  • When a new item is added to the people array we’ll change the opacity of the row and, via transform, the scale and rotation.It’s important to note that inside the TouchableOpacity we’re using an Animated.View which allows us to modify that component using animated values.First we’ll create a new animated value and, when the component mounts, we’ll change that value from 0 to 1 using Animated.timing.Then we need to drive our UI from these values.
  • We can’t do that in componentWillUnmout because the component will be gone before any animations can run!If you test this out though you’ll see that it doesn’t actually do anything — the row just disappears the same as before.If you comment out the onRemove function you can see that the animation is happening.What we can do is call the onRemove function when the animation completes.
  • We’re now left with some subtle, yet slick, animations for each row item for whenever they’re added or removed.
  • It covers component design, Redux, Redux Saga, and more animations!Want more React Native videos?

I was recently asked about animating items in a React Native list — specifically animating the item when added and removed. That’s what we’ll cover today! To accomplish this we’ll use the FlatList…
Continue reading “How to Animate the Items of a React Native FlatList”

0.36: Headless JS, the Keyboard API, & more

  • Working with the on-screen keyboard is now easier with Keyboard .
  • import { Keyboard } from ‘react-native’ // Hide that keyboard!
  • There are some cases where an animated value needs to invert another animated value for calculation.
  • With version 0.36, combining two animated values via division is now possible.
  • b will then follow a ‘s spring animation and produce the value of 1 / a .

Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. It is only available on Android, for now.
Continue reading “0.36: Headless JS, the Keyboard API, & more”

@GreWeb

  • For instance, ugly animation interruption could happen if you render() a different component: because it forces the component to unmount.
  • I guess what’s generally hard with animations in React functional/descriptive paradigm (“always render() ing Virtual DOM again” idea) is to figure out how to not “break” your animations .
  • We have different components to render each step (uploading animation / uploaded final image) and the uploaded image needs to be downloaded again to not render as white.
  • Designing animations, as part of UX design, is a time consuming work but it tends to be underestimated while being essential for moving from a good app to a very good app .
  • We have built our own abstraction to solve this problem: a Component decorator manages to kill a lot of flashes and blinks cases (e.g. images not ready animation getting interrupted).

Read the full article, click here.


@greweb: “Uploading animation powered by React Native Animations and gl-react-native (OpenGL in React)”


This application is built with nice tech stack including React Native and GraphQL. The backend is powered by Scala, a robust functional language, and we use many other cool techs.


@GreWeb