On mount

These are declarative simple animations, that are run on component mount or during events such as onPress, onScroll etc. We can use simple animations to make a text bounce, fade, flash etc for set duration with few more tweaks describing those animations.

For full list of animations checkout react-native-animatable github repo

Here, as an example lets make a text bounce when its mounted.

First lets display a sample text component

const animatedText = {
  name: 'animated_text',
  component: 'text',
  value: 'Hello',
  props:{
    style:{
      color:'black',
    }
  },
};

Now to make this text bounce on mount, and keep bouncing forever all you have to do is add the below simple object in the animation object of text component JSON. animation: 'bounce' is for telling Nano to bounce and iterationCount: 'infinite' to keep animat

  animation:{
    simple: {
      animation: 'bounce',
      iterationCount: 'infinite',
    },
  }

So the final text component JSON will be

const animatedText = {
  name: 'animated_text',
  component: 'text',
  value: 'Hello',
  props:{
    style:{
      color:'black',
    }
  },
  animation:{
    simple: {
      animation: 'bounce',
      iterationCount: 'infinite',
    },
  }
};

Activity Indicator example

Loading...

We can tweak the properties of bounce animation by using iterationCount, duration, delay, direction etc. All of these extra properties are available here

Instead of bounce, we can have other animations like fadeIn, fadeOutetc. You can see all the animations available here