animation thingy.js

setAnchor = (anchorPos: 'small' | 'medium' | 'full') => {
		switch (anchorPos) {
			case 'full':
				// Keyboard must always be dismissed for full map anchor.
				Keyboard.dismiss();
				// Scroll to top for full map anchor
				if (this.scrollContainer) {
					this.scrollContainer.getNode().scrollTo({ y: 0, animated: true });
				}

				Animated.timing(this.anchorKey, {
					toValue: 2,
					duration: 240,
					easing: Easing.out(Easing.cubic),
					useNativeDriver: true
				}).start();
				Animated.timing(this.jsAnchorKey, {
					toValue: 2,
					duration: 240,
					easing: Easing.out(Easing.cubic),
					useNativeDriver: false
				}).start();

				if (this.animatableMapHeightContainer) {
					this.animatableMapHeightContainer.transitionTo(
						{
							height: CREATE_ACTIVITY_MEASUREMENTS.mapHeight.full
						},
						240,
						'ease-out-cubic'
					);
				}

				if (this.animatableFakeMapHeightContainer) {
					this.animatableFakeMapHeightContainer.transitionTo(
						{
							translateY: CREATE_ACTIVITY_MEASUREMENTS.mapTranslateY.full
						},
						240,
						'ease-out-cubic'
					);
				}

				break;
			case 'medium':
				Animated.timing(this.anchorKey, {
					toValue: 1,
					duration: 180,
					easing: Easing.out(Easing.cubic),
					useNativeDriver: true
				}).start();
				Animated.timing(this.jsAnchorKey, {
					toValue: 1,
					duration: 180,
					easing: Easing.out(Easing.cubic),
					useNativeDriver: false
				}).start();

				if (this.animatableMapHeightContainer) {
					this.animatableMapHeightContainer.transitionTo(
						{
							height: CREATE_ACTIVITY_MEASUREMENTS.mapHeight.medium
						},
						240,
						'ease-out-cubic'
					);
				}

				if (this.animatableFakeMapHeightContainer) {
					this.animatableFakeMapHeightContainer.transitionTo(
						{
							translateY: CREATE_ACTIVITY_MEASUREMENTS.mapTranslateY.medium
						},
						240,
						'ease-out-cubic'
					);
				}

				break;
			default:
				Animated.timing(this.anchorKey, {
					toValue: 0,
					duration: 180,
					easing: Easing.out(Easing.cubic),
					useNativeDriver: true
				}).start();
				Animated.timing(this.jsAnchorKey, {
					toValue: 0,
					duration: 180,
					easing: Easing.out(Easing.cubic),
					useNativeDriver: false
				}).start();

				if (this.animatableMapHeightContainer) {
					this.animatableMapHeightContainer.transitionTo(
						{
							height: CREATE_ACTIVITY_MEASUREMENTS.mapHeight.small
						},
						240,
						'ease-out-cubic'
					);
				}

				if (this.animatableFakeMapHeightContainer) {
					this.animatableFakeMapHeightContainer.transitionTo(
						{
							translateY: CREATE_ACTIVITY_MEASUREMENTS.mapTranslateY.small
						},
						240,
						'ease-out-cubic'
					);
				}
				break;
		}
	};