Via event

We can also run animations via events such as onPress, onScroll, onChange etc.

To do that start with a simple text component without animation object and in onPress of add animation object to text JSON and then setUi it.

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

const submitButton = {
  component: 'button',
  value: 'Click Me',
  props: {
    style: {
      backgroundColor: "#6559cc",
    },
    textColor:"white"
  },
  onPress: ({setUi, getUi}) => {
    const animViewObj = getUi('animated_text'); 
    animViewObj['animation']['simple']= {
      animation: 'bounce',
      iterationCount: 'infinite',
    };
    setUi('animated_text', animViewObj);  
  },
};

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