diff options
Diffstat (limited to 'app/components/TransitionContainer.js')
| -rw-r--r-- | app/components/TransitionContainer.js | 31 |
1 files changed, 5 insertions, 26 deletions
diff --git a/app/components/TransitionContainer.js b/app/components/TransitionContainer.js index c4f6e459f3..687a9ae9e0 100644 --- a/app/components/TransitionContainer.js +++ b/app/components/TransitionContainer.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { Styles, Component, Animated, View, Types, UserInterface } from 'reactxp'; import type { TransitionGroupProps } from '../transitions'; +import getStyles from './TransitionContainerStyles'; type TransitionContainerProps = { children: React.Node, @@ -16,11 +17,6 @@ type State = { dimensions: Types.Dimensions, }; -const transitionContainerStyle = Styles.createViewStyle({ - flex: 1, - position: 'relative' -}); - export default class TransitionContainer extends Component<TransitionContainerProps, State> { constructor(props: TransitionContainerProps) { @@ -30,16 +26,6 @@ export default class TransitionContainer extends Component<TransitionContainerPr this.state = { dimensions, - animationStyles: { - style: Styles.createAnimatedViewStyle({ - position: 'absolute', - width: dimensions.width, - height: dimensions.height, - }), - allowPointerEvents: Styles.createAnimatedViewStyle({ - pointerEvents: 'auto', - }) - } }; } @@ -64,7 +50,7 @@ export default class TransitionContainer extends Component<TransitionContainerPr onFinishedAnimation() { this.setState({ - childrenAnimation: this.state.animationStyles.allowPointerEvents, + childrenAnimation: getStyles().allowPointerEventsStyle, previousChildren: null }); } @@ -88,7 +74,6 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }).start(() => this.onFinishedAnimation()); }); } @@ -112,7 +97,6 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: this.state.dimensions.height, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }).start(() => this.onFinishedAnimation()); }); } @@ -138,13 +122,11 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }), Animated.timing(previousTranslationValue, { toValue: - this.state.dimensions.width / 2, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }) ]); compositeAnimation.start(() => this.onFinishedAnimation()); @@ -172,13 +154,11 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }), Animated.timing(previousTranslationValue, { toValue: this.state.dimensions.width, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }) ]); compositeAnimation.start(() => this.onFinishedAnimation()); @@ -189,15 +169,14 @@ export default class TransitionContainer extends Component<TransitionContainerPr const { children } = this.props; const { previousChildren, childrenAnimation, previousChildrenAnimation } = this.state; return ( - <View style={[ transitionContainerStyle ]}> - + <View style={ getStyles().transitionContainerStyle }> { previousChildren && (<Animated.View key={ previousChildren && previousChildren.key } - style={[this.state.animationStyles.style, previousChildrenAnimation]}> + style={[getStyles().animationDefaultStyle, previousChildrenAnimation]}> { previousChildren } </Animated.View>) } - <Animated.View key={ children.key } style={[this.state.animationStyles.style, childrenAnimation]}> + <Animated.View key={ children.key } style={[getStyles().animationDefaultStyle, childrenAnimation]}> { children } </Animated.View> |