Could we use animated value from 0 to 1 and interpolate

[gabrielbull]

If we used an animated value from 0 to 1 instead of 0 to dimension we could then use that value to interpolate other animations. Take for example the header used by Apple in their Settings app:

It uses multiple transitions derived from the animated value. Look at how the back arrow is transitioned by fade in/fade out. Also look at how the title is transitioned into the back button, the General title moves and changes color to become the back button.

These changes would need to be made

Change the pan responder to give a fraction instead of the moveX value:

react-router-native-stack/lib/StackTransitioner.js

Lines 70 to 72 in c6a0e3a

	onPanResponderMove: (event, { moveX }) => {
	this.animatedValue.setValue(moveX);
	},

    onPanResponderMove: (event, { moveX }) => {
-      this.animatedValue.setValue(moveX);
+      this.animatedValue.setValue(moveX / this.getDimension());
    },

---

Change the finish animation to go to 1:

react-router-native-stack/lib/StackTransitioner.js

Lines 111 to 121 in c6a0e3a

	finishNavigation = duration => {
	Animated.timing(this.animatedValue, {
	toValue: this.getDimension(),
	duration,
	useNativeDriver: true,
	}).start(({ finished }) => {
	if (finished) {
	this.afterPan();
	}
	});
	};

  finishNavigation = duration => {
    Animated.timing(this.animatedValue, {
-      toValue: this.getDimension(),
+      toValue: 1,
      duration,
      useNativeDriver: true,
    }).start(({ finished }) => {
      if (finished) {
        this.afterPan();
      }
    });
  };

---

This one too:

react-router-native-stack/lib/StackTransitioner.js

Lines 184 to 189 in c6a0e3a

	this.animation = Animated.timing(this.animatedValue, {
	duration: getDuration(routeAnimationType || nextProps.animationType, action),
	toValue: action === PUSH ? -dimension : dimension,
	easing: getEasing(routeAnimationType || nextProps.animationType),
	useNativeDriver: true,
	}).start(({ finished }) => {

          this.animation = Animated.timing(this.animatedValue, {
            duration: getDuration(routeAnimationType || nextProps.animationType, action),
-            toValue: action === PUSH ? -dimension : dimension,
+            toValue: action === PUSH ? 0: 1,
            easing: getEasing(routeAnimationType || nextProps.animationType),
            useNativeDriver: true,
          }).start()

---

All lines that use the animated value in getTransforms would need to be converted to interpolate:

react-router-native-stack/lib/getTransforms.js

Lines 13 to 16 in c6a0e3a

	const baseStyle = {
	elevation: 1,
	transform: [{ translateX: animation }],
	};

    const baseStyle = {
      elevation: 1,
-      transform: [{ translateX: animation }],
+      transform: [{ translateX: animation.interpolate({
+        inputRange: [0, 1],
+         outputRange: [0, width]
+      }) }],
    };

[Traviskn]

I am working on implementing that exact type of ios style transition in the header branch of this repository. So far I've been interpolating based on the animation values of 0 to dimension, but working with a value from 0 to 1 would probably be a cleaner way to go I agree

[Traviskn]

After reviewing the code a bit more, my transitions are a bit more complicated that just going from 0 to dimension. Depending on the direction of the animation, I also go from 0 to -dimension. So if we wanted to take your suggested approach we would probably end up transitioning between -1, 0, and 1.