CODEWITHSUNDEEP
react-nativesfsafariviewcontroller
jhen
jhen

Reputation: 1252

Implement Safari View Controller in React Native

We currently uploaded our app to the apple store and got the following answer:

We recommend implementing the Safari View Controller API to display web content within your app. The Safari View Controller allows the display of a URL and inspection of the certificate from an embedded browser in an app so that customers can verify the webpage URL and SSL certificate to confirm they are entering their sign in credentials into a legitimate page.

Currently i am using this code to open the web site from our app

Linking.openURL('here-goes-the-url')

So i am kind of lost what this answer from apple exactly means. Should i use a WebView inside my app to show the website content? I tried that but there i could not see any url or certificate as mentioned in the apple review.

What i found so far was something like that: https://www.npmjs.com/package/react-native-safari-view-controller

But this repo is not maintained since 2 years.

Does anyone can make it more clear for me what the reviewer means with that answer? Can i use the

WebBrowser.openBrowserAsync('url')

to achieve what they want?

Best regards

Upvotes: 10

Views: 10379

Answers (2)

arango_86
arango_86

Reputation: 4425

expo-web-browser provides access to the system's web browser and supports handling redirects. On iOS, it uses SFSafariViewController or SFAuthenticationSession, depending on the method you call, and on Android it uses ChromeCustomTabs. As of iOS 11, SFSafariViewController no longer shares cookies with the Safari, so if you are using WebBrowser for authentication you will want to use WebBrowser.openAuthSessionAsync, and if you just want to open a webpage (such as your app privacy policy), then use WebBrowser.openBrowserAsync

https://docs.expo.io/versions/latest/sdk/webbrowser/

Sample code from reference:-

export default function App() {
  const [result, setResult] = useState(null);

  const _handlePressButtonAsync = async () => {
    let result = await WebBrowser.openBrowserAsync('https://expo.io');
    setResult(result);
  };
  return (
    <View style={styles.container}>
      <Button title="Open WebBrowser" onPress={_handlePressButtonAsync} />
      <Text>{result && JSON.stringify(result)}</Text>
    </View>
  );
}

Upvotes: 5

SudoPlz
SudoPlz

Reputation: 23173

So right now, by using Linking.openURL... you're sending your users to an external browser (safari on iOS).

The reviewer wants you to offer a better user experience by keeping your users into your app while still giving them all the features safari has.

To do that you have to use something called a Safari View Controller (on iOS) which is basically like opening safari within your app.

Even-though the library you pointed to does exactly that, it's no longer maintained and it just works for iOS, so instead I'd use something more modern that works for Android as well:

https://github.com/proyecto26/react-native-inappbrowser

Upvotes: 8

Related Questions