TypeError: _ReanimatedModule.default.animateNextTransition is not a function in React-native-navigation

Question

Current Behavior

When you click on the text, you get an error with the title.

Expected Behavior

I hoped that the screen would move smoothly without being cut off or showing a white screen.

How to reproduce

App.js

import React from "react";
import createAnimatedSwitchNavigator from "react-navigation-animated-switch";
import { Transition } from "react-native-reanimated";
import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";
import A from "./A";
import B from "./B";

const MySwitch = createAnimatedSwitchNavigator(
  {
    Home: A,
    Other: B
  },
  {
    initialRouteName: "Home",
    headerMode: "none"
  },
  {
    // The previous screen will slide to the bottom while the next screen will fade in
    transition: (
      <Transition.Together>
        <Transition.Out
          type="slide-bottom"
          durationMs={400}
          interpolation="easeIn"
        />
        <Transition.In type="fade" durationMs={500} />
      </Transition.Together>
    )
  }
);
const HomeScreenRouter = createAppContainer(MySwitch);

export default HomeScreenRouter;

A.js

import React from "react";
import { StyleSheet, Text, View, TouchableHighlight } from "react-native";

export default class A extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => this.props.navigation.navigate("Other")}>
          Open up App.js to start working on your app!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

B.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default class B extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>B screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

Your Environment

| react-navigation | "^3.11.0"

| react-native | "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"

| node | v10.16.0

| react-native-reanimated | "^1.0.1"

| react-navigation-animated-switch | "^0.2.0"

| npm or yarn | 6.9.0

Please help me a lot

Thank you for your help.

Answer 1

it's not currently available in sdk 32. sdk 33 is coming soon.

this is documented in the readme