Open links in different ways (browser and webview)

ios/Podfile.lock

@@ -721,4 +721,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 225a865018bba07be314e8afa4e91319ab40adac
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.0

src/common/WebLink.js

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 import type { Dispatch } from '../types';
 import { connect } from '../react-redux';
 import Label from './Label';
-import openLink from '../utils/openLink';
+import openLinkEmbedded from '../utils/openLinkEmbedded';
 import { getCurrentRealm } from '../selectors';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
 
@@ -26,7 +26,7 @@ type Props = $ReadOnly<{|
 class WebLink extends PureComponent<Props> {
   handlePress = () => {
     const { realm, href } = this.props;
-    openLink(new URL(href, realm).toString());
+    openLinkEmbedded(new URL(href, realm).toString());
   };
 
   styles = createStyleSheet({

src/lightbox/LightboxActionSheet.js

@@ -5,7 +5,7 @@ import share from './share';
 import shareImage from './shareImage';
 import { showToast } from '../utils/info';
 import * as api from '../api';
-import openLink from '../utils/openLink';
+import openLinkEmbedded from '../utils/openLinkEmbedded';
 
 type DownloadImageType = {|
   src: string,
@@ -37,7 +37,7 @@ const tryToDownloadImage = async ({ src, auth }: DownloadImageType) => {
   const tempUrl = await api.tryGetFileTemporaryUrl(src, auth);
   if (tempUrl === null) {
     showToast('Please download the image from your browser');
-    openLink(new URL(src, auth.realm).toString());
+    openLinkEmbedded(new URL(src, auth.realm).toString());
     return;
   }
 

src/lightbox/shareImage.js

@@ -6,14 +6,14 @@ import type { Auth } from '../types';
 import ShareImageAndroid from '../nativeModules/ShareImageAndroid';
 import { showToast } from '../utils/info';
 import * as api from '../api';
-import openLink from '../utils/openLink';
+import openLinkEmbedded from '../utils/openLinkEmbedded';
 
 export default async (url: string, auth: Auth) => {
   const tempUrl = await api.tryGetFileTemporaryUrl(url, auth);
 
   if (tempUrl === null) {
     showToast('Please share the image from your browser');
-    openLink(new URL(url, auth.realm).toString());
+    openLinkEmbedded(new URL(url, auth.realm).toString());
     return;
   }
 

src/settings/LegalScreen.js

@@ -6,7 +6,7 @@ import type { NavigationStackProp, NavigationStateRoute } from 'react-navigation
 import type { Dispatch } from '../types';
 import { connect } from '../react-redux';
 import { Screen, OptionButton } from '../common';
-import openLink from '../utils/openLink';
+import openLinkEmbedded from '../utils/openLinkEmbedded';
 import { getCurrentRealm } from '../selectors';
 
 type Props = $ReadOnly<{|
@@ -23,12 +23,12 @@ type Props = $ReadOnly<{|
 class LegalScreen extends PureComponent<Props> {
   openTermsOfService = () => {
     const { realm } = this.props;
-    openLink(new URL('/terms/?nav=no', realm).toString());
+    openLinkEmbedded(new URL('/terms/?nav=no', realm).toString());
   };
 
   openPrivacyPolicy = () => {
     const { realm } = this.props;
-    openLink(new URL('/privacy/?nav=no', realm).toString());
+    openLinkEmbedded(new URL('/privacy/?nav=no', realm).toString());
   };
 
   render() {

src/start/AuthScreen.js

@@ -32,7 +32,7 @@ import { encodeParamsForUrl } from '../utils/url';
 import * as webAuth from './webAuth';
 import { loginSuccess, navigateToDev, navigateToPassword } from '../actions';
 import IosCompliantAppleAuthButton from './IosCompliantAppleAuthButton';
-import openLink from '../utils/openLink';
+import openLinkEmbedded from '../utils/openLinkEmbedded';
 
 /**
  * Describes a method for authenticating to the server.
@@ -269,7 +269,7 @@ class AuthScreen extends PureComponent<Props> {
       id_token: credential.identityToken,
     });
 
-    openLink(new URL(`/complete/apple/?${params}`, this.props.realm).toString());
+    openLinkEmbedded(new URL(`/complete/apple/?${params}`, this.props.realm).toString());
 
     // Currently, the rest is handled with the `zulip://` redirect,
     // same as in the web flow.

src/start/webAuth.js

@@ -3,7 +3,7 @@ import { NativeModules, Platform } from 'react-native';
 import SafariView from 'react-native-safari-view';
 
 import type { Auth } from '../types';
-import openLink from '../utils/openLink';
+import openLinkEmbedded from '../utils/openLinkEmbedded';
 import { tryParseUrl } from '../utils/url';
 import { base64ToHex, hexToAscii, xorHexStrings } from '../utils/encoding';
 
@@ -48,7 +48,7 @@ export const generateRandomToken = async (): Promise<string> => {
 export const generateOtp = async (): Promise<string> => generateRandomToken();
 
 export const openBrowser = (url: string, otp: string) => {
-  openLink(`${url}?mobile_flow_otp=${otp}`);
+  openLinkEmbedded(`${url}?mobile_flow_otp=${otp}`);
 };
 
 export const closeBrowser = () => {
@@ -86,11 +86,11 @@ export const authFromCallbackUrl = (callbackUrl: string, otp: string, realm: URL
   const otpEncryptedApiKey = url.searchParams.get('otp_encrypted_api_key');
 
   if (
-    url.host === 'login'
-    && otp
-    && email !== null
-    && otpEncryptedApiKey !== null
-    && otpEncryptedApiKey.length === otp.length
+    url.host === 'login' &&
+    otp &&
+    email !== null &&
+    otpEncryptedApiKey !== null &&
+    otpEncryptedApiKey.length === otp.length
   ) {
     const apiKey = extractApiKey(otpEncryptedApiKey, otp);
     return { realm, email, apiKey };

src/utils/openLink.js

@@ -1,11 +1,10 @@
 /* @flow strict-local */
-import { NativeModules, Platform } from 'react-native';
-import SafariView from 'react-native-safari-view';
+import { NativeModules, Platform, Linking } from 'react-native';
 
 export default (url: string): void => {
   if (Platform.OS === 'ios') {
-    SafariView.show({ url: encodeURI(url) });
+    Linking.openURL(url); //open url in the browser
   } else {
-    NativeModules.CustomTabsAndroid.openURL(url);
+    NativeModules.CustomTabsAndroid.openURL(url); //open url in the embedded webview
   }
 };

src/utils/openLinkEmbedded.js

@@ -0,0 +1,11 @@
+/* @flow strict-local */
+import { NativeModules, Platform } from 'react-native';
+import SafariView from 'react-native-safari-view';
+
+export default (url: string): void => {
+  if (Platform.OS === 'ios') {
+    SafariView.show({ url: encodeURI(url) }); //open link in embedded webview
+  } else {
+    NativeModules.CustomTabsAndroid.openURL(url); //open link in embedded webview
+  }
+};