how to navigate to next screen after successful of paytm payment transaction. in react native

Question

I am integrating paytm transaction in react native API. and I have successfully integrated it. I am able to do successful transaction. but after transaction successful. some data from API is showing over there. like this = "[{"message":"success","is_payment_done":"Y"}]". but the problem is how can I navigate to next which I want to display after successful transaction.

here is my code

export default class payment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      order_id: "",
      mid: "xxxxxxxxxxxxxxxxxxxxxxxx",
      tranxToken: "",
      amount: "20",
      // callbackUrl:
      //   "https://securegw-stage.paytm.in/theia/paytmCallback?ORDER_ID=TESTORDER_1",
      isStaging: true,
      appInvokeRestricted: true,
    };
  }

  call_api = () => {
    fetch("https://xxxxxxx.in/App_API_CI/xxxxxxxxxx", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },

      body: JSON.stringify([
        {
          mobile_no: "xxxxxxxxx",
          user_id: "xx",
          patient_name: "xxxxxxx",
        },
      ]),
    })
      .then((returnValue) => returnValue.json())

      .then((response) => {
        console.log(
          "this checksum api esponse" +
            JSON.stringify(response[0].data.txnToken)
        );

        this.setState({ order_id: response[0].data.order_id });
        this.setState({ tranxToken: response[0].data.txnToken });

        this.handleTransaction();
      });
  };

  handleTransaction = () => {
    AllInOneSDKManager.startTransaction(
      this.state.order_id,
      this.state.mid,
      this.state.tranxToken,
      this.state.amount,
      "https://securegw-stage.paytm.in/theia/paytmCallback?ORDER_ID=" +
        this.state.order_id,
      this.state.isStaging,
      this.state.appInvokeRestricted
    )

      .then((result) => {
        () => console.log(result);
        //AsyncStorage.setItem("is_payment_done", "Y");
        this.props.navigation.navigate("MyDrawerRP");
      })
      .catch((err) => {
        console.log(err);
        Toast.show("Something went wrong");
      });
  };

  render() {
    return (
      <View style={{ alignSelf: "center", flex: 1, justifyContent: "center" }}>
        <TouchableOpacity
          onPress={this.call_api}
          style={{
            height: 90,
            width: width / 1.2,
            backgroundColor: "#7DF8F8",
            justifyContent: "center",
            elevation: 20,
          }}
        >
          <Text style={{ alignSelf: "center", fontSize: 35, color: "#000080" }}>
            PAY 20/-
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

this.props.navigation.navigate("MyDrawerRP");

this line should do your navigation. You sure your code gets here? ie is transaction completes successfully? If so, check if 'MyDrawerRP' is added to your navigator.

Answer 2

Can you remove ()=> after fetching result and test if you are able to get the result in log and proceed with the check on navigating

.then((result) => {
    () => console.log(result);    //remove () => here
    //AsyncStorage.setItem("is_payment_done", "Y");
    this.props.navigation.navigate("MyDrawerRP");
  })