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