UNPKG

2.34 kBJavaScriptView Raw
1import { Dimensions } from 'react-native';
2import * as animatable from 'react-native-animatable';
3const { height, width } = Dimensions.get('window');
4export const initializeAnimations = () => {
5 // Since react-native-animatable applies by default a margin of 100 to its
6 // sliding animation, we reset them here overriding the margin to 0.
7 const animationDefinitions = {
8 slideInDown: makeSlideTranslation('translateY', -height, 0),
9 slideInUp: makeSlideTranslation('translateY', height, 0),
10 slideInLeft: makeSlideTranslation('translateX', -width, 0),
11 slideInRight: makeSlideTranslation('translateX', width, 0),
12 slideOutDown: makeSlideTranslation('translateY', 0, height),
13 slideOutUp: makeSlideTranslation('translateY', 0, -height),
14 slideOutLeft: makeSlideTranslation('translateX', 0, -width),
15 slideOutRight: makeSlideTranslation('translateX', 0, width),
16 };
17 animatable.initializeRegistryWithDefinitions(animationDefinitions);
18};
19export const makeSlideTranslation = (translationType, fromValue, toValue) => ({
20 from: {
21 [translationType]: fromValue,
22 },
23 to: {
24 [translationType]: toValue,
25 },
26});
27// User can define custom react-native-animatable animations, see PR #72
28// Utility for creating our own custom react-native-animatable animations
29export const buildAnimations = ({ animationIn, animationOut, }) => {
30 let updatedAnimationIn;
31 let updatedAnimationOut;
32 if (isObject(animationIn)) {
33 const animationName = JSON.stringify(animationIn);
34 makeAnimation(animationName, animationIn);
35 updatedAnimationIn = animationName;
36 }
37 else {
38 updatedAnimationIn = animationIn;
39 }
40 if (isObject(animationOut)) {
41 const animationName = JSON.stringify(animationOut);
42 makeAnimation(animationName, animationOut);
43 updatedAnimationOut = animationName;
44 }
45 else {
46 updatedAnimationOut = animationOut;
47 }
48 return {
49 animationIn: updatedAnimationIn,
50 animationOut: updatedAnimationOut,
51 };
52};
53export const reversePercentage = (x) => -(x - 1);
54const makeAnimation = (name, obj) => {
55 animatable.registerAnimation(name, animatable.createAnimation(obj));
56};
57const isObject = (obj) => {
58 return obj !== null && typeof obj === 'object';
59};