react-native-micro-animations

Demonstration

Installation

1. 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:

1. Install support dependences:

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

2. 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

Stack

• [x] React Native
• [x] Animated API
• [x] Typescript
• [x] Styled Components

LICENSE

MIT © 2022 José Carlos Noronha