React-native-micro-animations NPM

Demonstration

Installation

Install dependences:

  npm i react-native-micro-animations

or

  yarn add react-native-micro-animations

Configuration

As svg files are used in the micro animation library, it is necessary to install support libraries for these types of files, for that follow the steps below:

Install support dependences:

  yarn add react-native-svg && yarn add react-native-svg-transformer

In file metro.config.js replace all code for the following code below:

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

`Menu` Component

Usage

Animated Menu Vertically

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }

  <AnimatedMenuVertically
    height={20}
    width={20}
    borderRadius={15}
    activeOpacity={0.6}
    backgroundColor={"#f5f5f5"}
    lineColor={"#343947"}
    onPress={yourOnPressFunction}
  />

Animated Menu Horizontally

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }

  <AnimatedMenuHorizontally
    height={20}
    width={20}
    borderRadius={15}
    activeOpacity={0.6}
    backgroundColor={"#f5f5f5"}
    lineColor={"#343947"}
    onPress={yourOnPressFunction}
  />

Properties

Prop	Description	Type
`height`	Heigth of the button	Number
`width`	Width of the button	Number
`borderRadius`	BorderRadius of the button	Number
`backgroundColor`	BackgroundColor of the button	String
`lineColor`	Color of the Line component into the button	String
`onPress`	Action when press the button	() => Void

`Elastic Button` Components

Usage

Animated Save Button

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }

  <SaveElasticButton 
    height={45} 
    width={45}
    onPress={yourOnPressFunction}
  />

Animated Like Button

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }

  <SaveElasticButton 
    height={45} 
    width={45}
    onPress={yourOnPressFunction}
  />

Animated Custom Button

  import EyeNormal from '~/assets/icons/eye-regular.svg';
  import EyeSolid from '~/assets/icons/eye-slash-solid.svg';

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }

 <CustomElasticButton
    initIcon={<EyeNormal height={45} width={45} fill={"#000"} />}
    endIcon={<EyeSolid height={45} width={45} fill={"#000"}/>}                    
    onPress={yourOnPressFunction}
  />

`Add Button` Components

Usage

Parallax Add Button

  import { ParallaxAddButton } from 'react-native-micro-animations';
  ...

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }
  ... 

  <ParallaxAddButton 
    height={15} 
    width={15}
    onPress={yourOnPressFunction}
  />

Rotate Add Button

  import { RotateAddButton } from 'react-native-micro-animations';
  ...

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }
  ... 
  
  <RotateAddButton 
    height={15} 
    width={15}
    onPress={yourOnPressFunction}
  />

Subtract Add Button

  import { SubtractAddButton } from 'react-native-micro-animations';
  ...

  const yourOnPressFunction = () => {
    console.log("Do something here...");
  }
  ... 
  
  <SubtractAddButton 
    height={15} 
    width={15}
    onPress={yourOnPressFunction}
  />

Properties

Prop	Description	Type
`height`	Heigth of the button	Number
`width`	Width of the button	Number
`borderRadius`	BorderRadius of the button	Number
`backgroundColor`	BackgroundColor of the button	String
`lineColor`	Color of the lines inside the button	String
`onPress`	Action when press the button	() => Void