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