@tapston/react-native-animation v1.0.1

@tapston/react-native-animation

Make your UI animated. Just use animateLayout() before changing your state

Installation

$ npm i @tapston/react-native-animation

Or

$ yarn add @tapston/react-native-animation

Basic Usage

• Add initialAnimation() to myproject/index.js file:

//...
import { initialAnimation } from '@tapston/react-native-animation';
//...

const defaultAnimationConfig = {
  duration: 250,
  type: 'easeInEaseOut',
  property: 'opacity',
};

initialAnimation(defaultAnimationConfig);

//AppRegistry.registerComponent(appName, () => AppContainer);

• Now you can use animateLayout() in any component:

//...
import { animateLayout } from '@tapston/react-native-animation';
//...

const MyComponent = () => {
  const [data, setData] = useState([]);

  const animationConfig = {
    duration: 250,
    type: 'easeInEaseOut',
    property: 'opacity',
  };

  const getData = () => {
    const result = YourAPI.get();
    //just add animateLayout() to animate getData()
    animateLayout();
    setData(result);
  };

  useEffect(() => {
    getData();
  }, []);

//...

Properties

animateLayout config

initialAnimation config

Types for config

Properties for config

Contribution

• @r.ravkov The main author.