Quick Start

Nano allows users to create smooth animations and Ui interactions. Animations in Nano are done via animation object.

Animation object is a simple object where we define declarative animations via simple key and more advanced animations via advanced key.

Note : Simple animations use react-native-animatable and advanced animations use react-native-reanimated underhood.

const animatedText = {
  name: 'text',
  component: 'text',
  value: 'Nano Text',
  props:{
    style:{
      color:'black'
      fontSize:20,
    }    
  },
  animation:{
    simple: {
      ...
    },
    advanced: [
      ...
    ],
  }
};

Simple

These are declarative simple animations, that are run on component mount or triggers via 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.

To see how simple animations are implemented in Nano checkout Simple Animations

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

Advanced

advanced takes array of objects with each object representing a set of animations. Each object contains two keys runIn and run .

Key	Value
runIn	can be series, parallel. default value is series
run	array of individual animations to run in either series or parallel

For example, animating the style prop fontSize from 20 to 100 will look like

const animatedText = {
  name: 'text',
  component: 'text',
  value: 'Nano Text',
  props:{
    style:{
      color:'black'
      fontSize:20,
    }    
  },
  animation:{
    advanced: [
      {
        runIn: 'series',
        run: [
          {
            type: 'timing',
            componentProps: {
              style: {
                  fontSize:100,
              }
            }
          }
        ]
      }
    ]
  }
};
    

We can achieve complex animations wherein some have runIn as series and others parallel by providing multiple objects to the advanced array.

To learn more about implementing advanced animations with Nano checkout Advanced animations