proyecto26 / react-native-inappbrowser

📱InAppBrowser for React Native (Android & iOS) 🤘
https://www.npmjs.com/package/react-native-inappbrowser-reborn
MIT License
1.31k stars 223 forks source link

how to programmatically call the close() function while the browser is open? #346

Closed Adnan-Bacic closed 2 years ago

Adnan-Bacic commented 2 years ago

the examples all show some variation of the .open() function. but i cant find any example on how to call the .close() function. this is needed while the inappbrowser is open.

so imagine a flow like this:

  1. open the inappbrowser with .open()
  2. user completes an action
  3. close the inappbrowser with .close()

but i cant find any examples on how i can programmatically close the inappbrowser while its open.

i assume i somehow need to know if a user completes a certain action in the inappbrowser, but i cant see any examples.

jdnichollsc commented 2 years ago

From that external page you need to use Deep linking to redirect your users to the app again

Adnan-Bacic commented 2 years ago

From that external page you need to use Deep linking to redirect your users to the app again

sorry but i find this a little weird. so the built in .close() function is literally useless as we can never use it?

also deep link will redirect web users right? doesnt seem ideal if you dont want to redirect on web

jdnichollsc commented 2 years ago

Can you attach a reproducible demo please? WebView sounds more appropriate for that scenario, because you can't detect events from external pages using InAppBrowser (security concerns), that's why we use deep linking to redirect the users to the app again. Please check Chrome CustomTabs and SafariViewController APIs for more details.

Best, Juan

Adnan-Bacic commented 2 years ago

I just have a hard time seeing why there exists a .close() function if we cant ever use it. I feel like it makes logical sense that we could use it, instead of having to do some sort of "hack" on the web to redirect. also what if you dont own the website you open? then you cant redirect.

there must be some way we can call the .close() function?

Adnan-Bacic commented 2 years ago

@jdnichollsc sorry for tagging you but im really curious about this. does this mean that we cannot call the .close() function at all?

jdnichollsc commented 2 years ago

Please attach your code or a repository to be able to reproduce your issue. About your scenario, why not using WebView instead to be able to detect messages from websites? 🤔 This plugin is limited by Chrome CustomTabs and SafariViewController native APIs and the only way to get a result is redirecting your users back to the app by using Deep linking, so let me know if you find any issue with this redirection. Also you can have an interval from your app to close the Browser using the close method after a period of time or something like that.

Please check the README of the project for more details.

Adnan-Bacic commented 2 years ago

Please attach your code or a repository to be able to reproduce your issue.

here is a simple example opening this repo.

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';

const Test = () => {
  const link = 'https://github.com/proyecto26/react-native-inappbrowser';

  return (
    <View
      style={styles.container}
    >
      <Button
        title="InAppBrowser"
        onPress={() => {
          InAppBrowser.open(link);
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

export default Test;

i would like to be able to somehow call InAppBrowser.close() to dismiss the InAppBrowser.

preferably after some sort of action, but you say that may not be possible. you mention setting a timer but i feel like this would be bad UX.

About your scenario, why not using WebView instead to be able to detect messages from websites?

i dont/didnt necessarily know there is a difference in what inappbrowser can do vs webview. im working on a project that already uses react-native-inappbrowser-reborn and not react-native-webview. so it made the most sense to me to not download an additional library to show web-content, and use the one that was already downloaded.

chyamuna commented 2 years ago

why is this issue closed? We are also require the same behavior. when we are redirecting to deeplink, it's not opening app, rather it is opening modal and trying to load deeplink in modal.

jdnichollsc commented 2 years ago

Please attach your code or a repository to be able to reproduce your issue.

here is a simple example opening this repo.

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';

const Test = () => {
  const link = 'https://github.com/proyecto26/react-native-inappbrowser';

  return (
    <View
      style={styles.container}
    >
      <Button
        title="InAppBrowser"
        onPress={() => {
          InAppBrowser.open(link);
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

export default Test;

i would like to be able to somehow call InAppBrowser.close() to dismiss the InAppBrowser.

preferably after some sort of action, but you say that may not be possible. you mention setting a timer but i feel like this would be bad UX.

About your scenario, why not using WebView instead to be able to detect messages from websites?

i dont/didnt necessarily know there is a difference in what inappbrowser can do vs webview. im working on a project that already uses react-native-inappbrowser-reborn and not react-native-webview. so it made the most sense to me to not download an additional library to show web-content, and use the one that was already downloaded.

Understood, but WebView and InAppBrowser are different by design, you can customize and detect events from WebView but you can't do that with CustomTabs (Android) or SafariViewController (iOS) for security concerns.

why is this issue closed? We are also require the same behavior. when we are redirecting to deeplink, it's not opening app, rather it is opening modal and trying to load deeplink in modal.

This lib provides access to these APIs, so we're limited by these Native components. For more details, check the docs:

BTW, this project was inspired by WebBrowser of Expo, for more details check here

krini commented 1 year ago

i would like to be able to somehow call InAppBrowser.close() to dismiss the InAppBrowser.

Did you find a workaround for this? I'm. not able to close the chrome custom tab on android.

Adnan-Bacic commented 1 year ago

i would like to be able to somehow call InAppBrowser.close() to dismiss the InAppBrowser.

Did you find a workaround for this? I'm. not able to close the chrome custom tab on android.

i did not. i guess its very obvious when an app has opened an in-app-browser and it perhaps shouldt be hard for a user to know when they should close it.