How to use react-native-animatable - 10 common examples

To help you get started, we’ve selected a few react-native-animatable examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tuantle / hypertoxin / src / components / views / layout-view-component.js View on Github external
import { BlurView } from 'react-native-blur';

const {
    Component
} = React;

const {
    Dimensions,
    ScrollView,
    PanResponder,
    View
} = ReactNative;

const AnimatedView = Animatable.View;
const AnimatedBlurView = Animatable.createAnimatableComponent(BlurView);

const DEVICE_WIDTH = Dimensions.get(`window`).width;

const DEFAULT_ANIMATION_DURATION_MS = 300;

const DEFAULT_LAYOUT_VIEW_STYLE = {
    container: {
        flexShrink: 1,
        flexDirection: `column`,
        justifyContent: `center`,
        alignItems: `stretch`,
        maxWidth: DEVICE_WIDTH
        // overflow: `hidden`
    },
    horizontal: {
        flexShrink: 1,
github oblador / react-native-animatable / Examples / AnimatableExplorer / App.js View on Github external
import React, { Component } from 'react';
import {
  SafeAreaView,
  SectionList,
  StyleSheet,
  TouchableWithoutFeedback,
} from 'react-native';
import { createAnimatableComponent, View, Text } from 'react-native-animatable';
import Slider from '@react-native-community/slider';
import AnimationCell from './AnimationCell';
import GROUPED_ANIMATION_TYPES from './grouped-animation-types.json';

const AnimatableSectionList = createAnimatableComponent(SectionList);

const COLORS = [
  '#65b237', // green
  '#346ca5', // blue
  '#a0a0a0', // light grey
  '#ffc508', // yellow
  '#217983', // cobolt
  '#435056', // grey
  '#b23751', // red
  '#333333', // dark
  '#ff6821', // orange
  '#e3a09e', // pink
  '#1abc9c', // turquoise
  '#302614', // brown
];
github wix / react-native-ui-lib / demo / src / demoApp.js View on Github external
//     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
github wix / react-native-ui-lib / src / style / animatableManager.js View on Github external
loadAnimationDefinitions(animationDefinitions) {
    if (animationDefinitions) {
      Animatable.initializeRegistryWithDefinitions(animationDefinitions); // Make available globally in uilib
      Object.assign(definitions, animationDefinitions);
      this.animations = getObjectMap(definitions);
    }
    return definitions;
  }
github wix / react-native-ui-lib / typings / components / toast / index.js View on Github external
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 },
github rghorbani / react-native-common / src / components / toast / index.js View on Github external
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},
github Dekoruma / react-native-web-modal / packages / modal-enhanced-react-native-web / src / index.js View on Github external
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,
github tuantle / hypertoxin / src / components / views / item-view-component.js View on Github external
import debouncer from '../../utils/debouncer';

const {
    Component
} = React;

const {
    Animated,
    // Dimensions,
    Easing,
    StyleSheet,
    TouchableOpacity,
    View
} = ReactNative;

const AnimatedView = Animatable.View;

// const DEVICE_WIDTH = Dimensions.get(`window`).width;

const DEFAULT_ITEM_PRESS_DEBOUNCE_TIME_MS = 250;

const DEFAULT_ANIMATION_DURATION_MS = 300;

const DEFAULT_ITEM_VIEW_STYLE = {
    container: {
        flexDirection: `row`,
        alignItems: `center`,
        alignSelf: `stretch`,
        justifyContent: `space-between`,
        // width: DEVICE_WIDTH,
        width: `100%`,
        height: Ht.Theme.view.size.item,
github tuantle / hypertoxin / src / components / fields / search-field-component.js View on Github external
import React from 'react';

import ReactNative from 'react-native'; // eslint-disable-line

import PropTypes from 'prop-types';

import * as Animatable from 'react-native-animatable';

import { BlurView } from 'react-native-blur';

import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';

import debouncer from '../../utils/debouncer';

const AnimatedView = Animatable.View;
const AnimatedBlurView = Animatable.createAnimatableComponent(BlurView);

const {
    Component
} = React;

const {
    FlatList
} = ReactNative;

const {
    Dimensions,
    View,
    TextInput
} = ReactNative;
github tuantle / hypertoxin / src / components / views / layout-view-component.js View on Github external
import * as Animatable from 'react-native-animatable';

import { BlurView } from 'react-native-blur';

const {
    Component
} = React;

const {
    Dimensions,
    ScrollView,
    PanResponder,
    View
} = ReactNative;

const AnimatedView = Animatable.View;
const AnimatedBlurView = Animatable.createAnimatableComponent(BlurView);

const DEVICE_WIDTH = Dimensions.get(`window`).width;

const DEFAULT_ANIMATION_DURATION_MS = 300;

const DEFAULT_LAYOUT_VIEW_STYLE = {
    container: {
        flexShrink: 1,
        flexDirection: `column`,
        justifyContent: `center`,
        alignItems: `stretch`,
        maxWidth: DEVICE_WIDTH
        // overflow: `hidden`
    },
    horizontal: {