How to use the react-native-animatable.initializeRegistryWithDefinitions function in react-native-animatable

//     useNativeDriver: true,
//   },
// });

// const customAnimationsDefinitions = {
//   customAnimation1: {
//     from: {opacity: 0, translateY: 20},
//     to: {opacity: 1, translateY: 0},
//   }, 
//   customAnimation2: {
//     from: {opacity: 0, translateY: 40},
//     to: {opacity: 1, translateY: 0},
//   },
// };
// IMPORTANT! Make uilib's animations available globally for the app's use (option to pass adittional animation definitions)
Animatable.initializeRegistryWithDefinitions(AnimatableManager.loadAnimationDefinitions(/** customAnimationsDefinitions */)); 


function getDefaultNavigationStyle() {
  return {
    statusBar: {
      visible: true,
      style: 'light',
      backgroundColor: ThemeManager.primaryColor, // for Android
    },
    layout: {
      backgroundColor: Colors.white,
      orientation: ['portrait'],
    },
    topBar: {
      visible: true,
      noBorder: true, // for iOS

loadAnimationDefinitions(animationDefinitions) {
    if (animationDefinitions) {
      Animatable.initializeRegistryWithDefinitions(animationDefinitions); // Make available globally in uilib
      Object.assign(definitions, animationDefinitions);
      this.animations = getObjectMap(definitions);
    }
    return definitions;
  }

function setupRelativeAnimation(height) {
    Animatable.initializeRegistryWithDefinitions({
        // bottom
        slideInUp_toast: {
            from: { translateY: height },
            to: { translateY: 0 }
        },
        slideOutDown_toast: {
            from: { translateY: 0 },
            to: { translateY: height }
        },
        // top
        slideInDown_toast: {
            from: { translateY: -height },
            to: { translateY: 0 }
        },
        slideOutUp_toast: {
            from: { translateY: 0 },

function setupRelativeAnimation(height) {
  Animatable.initializeRegistryWithDefinitions({
    // bottom
    slideInUp_toast: {
      from: {translateY: height},
      to: {translateY: 0},
    },
    slideOutDown_toast: {
      from: {translateY: 0},
      to: {translateY: height},
    },
    // top
    slideInDown_toast: {
      from: {translateY: -height},
      to: {translateY: 0},
    },
    slideOutUp_toast: {
      from: {translateY: 0},

import PropTypes from 'prop-types';

import {
  View,
  initializeRegistryWithDefinitions,
  registerAnimation,
  createAnimation,
} from 'react-native-animatable';
import Modal from 'modal-react-native-web';

import * as ANIMATION_DEFINITIONS from './animations';

import styles from './styles';

// Override default animations
initializeRegistryWithDefinitions(ANIMATION_DEFINITIONS);

// Utility for creating custom animations
const makeAnimation = (name, obj) => {
  registerAnimation(name, createAnimation(obj));
};

const isObject = (obj) => obj !== null && typeof obj === 'object';

class ReactNativeModal extends Component {
  static setAppElement = Modal.setAppElement;

  static propTypes = {
    animationIn: PropTypes.oneOfType([PropTypes.string, PropTypes.shape]),
    animationInTiming: PropTypes.number,
    animationOut: PropTypes.oneOfType([PropTypes.string, PropTypes.shape]),
    animationOutTiming: PropTypes.number,

componentDidMount() {
		Animatable.initializeRegistryWithDefinitions(Animations.custom as any);
		Orientation.lockToPortrait();
	}

componentWillMount() {
    var account = this.state.account;
    var firstAccount = Object.assign({}, account[0]);
    this.setState({ firstAccount });
    account = account.slice(1);
    //console.log('A', account);
    var secondAccount = Object.assign([], account);
    this.setState({ secondAccount });
    Animatable.initializeRegistryWithDefinitions({
      rotateTop: Animations.rotateTop,
      rotateBottom: Animations.rotateBottom,
    });
  }