Stack screens animation and Pan Responder

[Estebank94]

Hello,

Currently I am using GestureRecognizer from react-native-swipe-gestures to detect when the user swipes up and call the navigate function.
I was wondering if there is a way to animate the navigation of a stack screen as the user slides his finger across the screen. This way I could make the screen follow the user's finger vertically. I am guessing I could use Pan Responder but I didn't find any documentation about this.

Did anyone try making something like this?

[satya164]

https://reactnavigation.org/docs/stack-navigator/#gestureenabled
https://reactnavigation.org/docs/stack-navigator/#animation-related-options

[Estebank94]

Thanks, that's a bit useful but it doesn't have any example that uses Pan Gesture.

[Estebank94]

This is what I was able to do until now:

RPReplay_Final1625239794.mov

There are two main problems here:

1. The animation is not smooth.
2. The previous screen disappears.

This is the code:

const HomeFeed = createStackNavigator();

const HomeFeedStack = (props: any) => {
  const translateY = useRef(new Animated.Value(0)).current;

  const handlePan = (evt) => {
    const { nativeEvent } = evt;
    console.log(nativeEvent);
    translateY.setValue(Math.abs(nativeEvent.translationY));
    if (Math.abs(nativeEvent.translationY) > 10) {
      props.navigation.navigate(HOME_FEED_DETAILS);
    }
  };

  const handlePanEnd = (event) => {
    if (event.nativeEvent.state === State.END) {
      if (Math.abs(event.nativeEvent.translationY) > 200) {
        console.log('FINISH ANIMATIN');
        Animated.timing(translateY, {
          toValue: 812,
          duration: 500,
          useNativeDriver: true,
        }).start();
      } else {
        console.log('GO BACK____');
        Animated.timing(translateY, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true,
        }).start(() => props.navigation.goBack());
      }
    }
  };

  const forSwipe = ({ layouts: { screen } }) => {
    return {
      containerStyle: {
        borderRadius: 50,
      },
      cardStyle: {
        transform: [
          {
            translateY: translateY.interpolate({
              inputRange: [0, 812],
              outputRange: [screen.height - 50, 0],
              extrapolate: 'clamp',
            }),
          },
        ],
      },
    };
  };

  return (
    <HomeFeed.Navigator mode="modal">
      <HomeFeed.Screen
        name={HOME_FEED}
        children={() => (
          <HomeFeedScreen
            handlePan={handlePan}
            handlePanEnd={handlePanEnd}
          />
        )}
        options={{ headerShown: false }}
      />
      <HomeFeed.Screen
        name={HOME_FEED_DETAILS}
        children={() => <View style={{ flex: 1, backgroundColor: 'blue' }} />}
        options={{ headerShown: false, cardStyleInterpolator: forSwipe }}
      />
    </HomeFeed.Navigator>
  );
};

[Estebank94]

Because I don't want to use swipe gesture, I want the screen to follow the finger as the user moves it from the bottom to the top of the screen.

[satya164]

I don't get why else would screen move with user's finger if not for swipe gesture, but regardless, just set a transparent background color for your screen in cardStyle and animate whatever component you want and with the library you want - which will get you your desired behavior.

[Estebank94]

To be more clear of what I want to achieve look at the last example of react-native-pager-view.
I don't want the user to swipe and then call the navigate function with fixed animation, that's the default modal animation on react navigation.
I want the user to swipe up and animate the screen as the users moves his finger, the screen should follow the finger. There are no examples on how to achieve that.
I can achieve that with that library but then I am not really navigating between screens.

[satya164]

Use that library and wrap it in a custom navigator so that it integrates with React Navigation https://reactnavigation.org/docs/custom-navigators/

[Estebank94]

Thanks, that was a great idea. I did that and it worked

[Estebank94]

Done. Thanks @satya164