Как изменить анимацию навигации по умолчанию в React Native

вы можете установить разные режимы для экранов, один из них modal:

const MainStackNavigator = createStackNavigator(
  {
    SplashScreen: { screen: SplashScreen },
    OnBoardingScreen: { screen: OnBoarding },
    LoginScreen: { screen: LoginContainer },
  },
  {
    navigationOptions: {
      header: null
    },
    mode: "modal",
    cardStyle: { backgroundColor: "transparent" },
   transitionConfig: TransitionConfiguration,

  }
);

вы также можете использовать transitionConfig, он возвращает объект с двумя параметрами transitionSpec и screenInterpolator. вы можете настроить свойства времени анимации, такие как продолжительность и замедление, в transitionSpec и преобразованиях макета в screenInterpolator. Вот пример:

    const TransitionConfiguration = () => {
  return {
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: (sceneProps) => {
      const { layout, position, scene } = sceneProps;
      const width = layout.initWidth;
      const { index, route } = scene
      const params = route.params || {}; // <- That's new
      const transition = params.transition || 'default'; // <- That's new
      return {
        collapseExpand: CollapseExpand(index, position),
        default: SlideFromRight(index, position, width),
      }[transition];
    },
  }
}

По умолчанию новые экраны скользят справа.

let SlideFromRight = (index, position, width) => {
  const inputRange = [index - 1, index, index + 1];
  const translateX = position.interpolate({
    inputRange: [index - 1, index, index + 1],
    outputRange: [width, 0, 0]
  })
  const slideFromRight = { transform: [{ translateX }] }
  return slideFromRight
};

В transitionSpec нет ничего особенного. Фактически, это очень похоже на стандартный пример React Native Animated. Мы устанавливаем продолжительность нашего перехода и профиль смягчения, настраиваем анимацию на основе времени, а не пружину, и используем собственный драйвер для повышения производительности.

ScreenInterpolator — это место, где происходит волшебство. screenInterpolator — это функция, которую React Navigation вызывает с аргументом, который мы назовем sceneProps. screenInterpolator(sceneProps) вызывается для каждого экрана в стеке, а возвращаемое значение используется для настройки его перехода.

Если навигация (сцена) имеет параметр {transition: 'collapseExpand'}, экранный интерполятор использует анимацию CollapseExpand.

let CollapseExpand = (index, position) => {
  const inputRange = [index - 1, index, index + 1];
  const opacity = position.interpolate({
    inputRange,
    outputRange: [0, 1, 1],
  });

  const scaleY = position.interpolate({
    inputRange,
    outputRange: ([0, 1, 1]),
  });

  return {
    opacity,
    transform: [
      { scaleY }
    ]
  };
};