react-native-inappbrowser icon indicating copy to clipboard operation
react-native-inappbrowser copied to clipboard

For android, always returning "chrome tabs activity destroyed"

Open DeepikaSharma5 opened this issue 8 months ago • 2 comments

Works fine in iOS devices but for android (tested on both Emulator and real Device), the response always returns as dismiss where I am expecting a successful response:

{
"message": "chrome tabs activity destroyed",
"type": "dismiss"
}

I debugged may app and Deep Linking and all the other stuffs works perfectly. SO No issue in my implementation.

My versions:

 "react": "18.3.1",
 "react-native": "0.75.4",
 "react-native-inappbrowser-reborn": "^3.7.0",

Implemementation

import {ActivityIndicator, Linking, Modal, View} from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';
import env from '../../utils/env';
import {bindActionCreators} from '@reduxjs/toolkit';
import {
  customerSessionDetails,
  loginResponseLoading,
  loginUser,
  removeCutomerSessionDetails,
} from '../../redux/actions/customer/auth';
import {connect} from 'react-redux';
import {useEffect, useState} from 'react';
import {
  getLoginPageScreen,
  setLoginPageScreen,
} from '../../asyncStorage/dataStore';

interface LoginComponentProps {
  nonce: any;
  sessionId: any;
  isloginResponseLoading: boolean;
  navigation: any;
  removeCutomerSessionDetails: () => any;
  loginResponseLoading: (payload: any) => void;
  loginUser: (payload: any) => any;
  customerSessionDetails: (data: any) => any;
  navigationScreen: string;
}

const LoginComponent = (props: LoginComponentProps, ref: any) => {
  const [currentPage, setCurrentPage] = useState('');

  useEffect(() => {
    getLoginPageScreen().then((res: any) => {
      setCurrentPage(res);
    });
    if (
      props.sessionId &&
      props.nonce != undefined &&
      currentPage === props.navigationScreen
    ) {
      browserDetails();
    }
  }, [props.sessionId, props.nonce, currentPage, props.navigationScreen]);
  const browserDetails = async () => {
    const scimAuthGet = env.SCIM_AUTH_GET;
    const authEndpoint =
      scimAuthGet +
      `?clientId=${env.LOGIN_CLIENT_ID}` +
      `&nonce=${props.nonce}` +
      `&redirectUri=${env.NEW_BASE_URL}/api/login/openurl` +
      `&url=${env.DOMAIN_URL}/scim/Auth` +
      `&state=${props.sessionId}`;
    const deeplink = `${env.PROD_DEEPLINK_URL}myAppLogin/openurl`;

    const options = {
      // iOS Properties
      ephemeralWebSession: true,
      forceCloseOnRedirection: false,
      showInRecents: true,
    };

    try {
      if (await InAppBrowser.isAvailable()) {
        InAppBrowser.openAuth(authEndpoint, deeplink, options)
          .then(event => {
            props.removeCutomerSessionDetails();
            props.loginResponseLoading(false);

            handleDeeplinkingListener(event);
          })
          .catch(error => {
            console.error('ERROR AUTH', error);
          });
      } else {
        Linking.openURL(authEndpoint);
      }
    } catch (error) {
      console.error('ERROR BROWSER', error);
    }
  };

  const handleDeeplinkingListener = async (event: any) => {
    const eventUrl = event?.url;
    if (!eventUrl?.includes('openurl')) {
      return;
    }

    const {sessionId, navigation} = props;

    const reqCodeRe = /reqcode=([^&]+)/g;
    const [, reqCode] = reqCodeRe.exec(eventUrl) || [];

    const data = {
      sessionId,
      reqCode,
    };

    const navigationScreen = props.navigationScreen;
    setLoginPageScreen('');
    props.loginUser({
      data,
      navigation,
      navigationScreen,
    });
  };

  return (
    <View>
      {props.isloginResponseLoading &&
        currentPage === props.navigationScreen && (
          <Modal
            transparent
            visible={props.isloginResponseLoading}
            animationType="fade">
            <View
              style={{
                flex: 1,
                backgroundColor: 'rgba(0,0,0,0.5)',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <ActivityIndicator size="large" color="#c72d21" />
            </View>
          </Modal>
        )}
    </View>
  );
};

const mapStateToProps = (state: any) => {
  return {
    sessionId:
      state.customerReducer.authReducer.loginReducer.sessionDetails.sessionId,
    nonce: state.customerReducer.authReducer.loginReducer.sessionDetails.nonce,
    isloginResponseLoading:
      state.customerReducer.authReducer.loginReducer.loginResponseLoading,
  };
};
const mapDispatchToProps = (dispatch: any) =>
  bindActionCreators(
    {
      loginUser,
      customerSessionDetails,
      removeCutomerSessionDetails,
      loginResponseLoading,
    },
    dispatch,
  );

export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);

DeepikaSharma5 avatar Feb 17 '25 04:02 DeepikaSharma5