Add fade animation

README.md

@@ -63,6 +63,7 @@ const App = () => {
 import { openBrowser } from "@swan-io/react-native-browser";
 
 openBrowser("https://swan.io", {
+  animationType: "", // "fade" | "slide" (default to "slide")
   dismissButtonStyle: "close", // "cancel" | "close" | "done" (default to "close")
   barTintColor: "#FFF", // in-app browser UI background color
   controlTintColor: "#000", // in-app browser buttons color

android/src/main/java/io/swan/rnbrowser/RNSwanBrowserModuleImpl.java

@@ -36,10 +36,19 @@ protected static void open(final Activity activity,
     intentBuilder.setShowTitle(false);
     intentBuilder.setInstantAppsEnabled(false);
 
-    intentBuilder.setStartAnimations(activity,
-      com.facebook.react.R.anim.catalyst_slide_up, io.swan.rnbrowser.R.anim.inert);
-    intentBuilder.setExitAnimations(activity,
-      io.swan.rnbrowser.R.anim.inert, com.facebook.react.R.anim.catalyst_slide_down);
+    String animationType = options.getString("animationType");
+
+    if (animationType != null && animationType.equals("fade")) {
+      intentBuilder.setStartAnimations(activity,
+        com.facebook.react.R.anim.catalyst_fade_in, io.swan.rnbrowser.R.anim.inert);
+      intentBuilder.setExitAnimations(activity,
+        io.swan.rnbrowser.R.anim.inert, com.facebook.react.R.anim.catalyst_fade_out);
+    } else {
+      intentBuilder.setStartAnimations(activity,
+        com.facebook.react.R.anim.catalyst_slide_up, io.swan.rnbrowser.R.anim.inert);
+      intentBuilder.setExitAnimations(activity,
+        io.swan.rnbrowser.R.anim.inert, com.facebook.react.R.anim.catalyst_slide_down);
+    }
 
     @ColorInt int blackColor = activity.getResources().getColor(android.R.color.black);
     CustomTabColorSchemeParams.Builder paramsBuilder = new CustomTabColorSchemeParams.Builder();

example/Gemfile.lock

@@ -5,14 +5,13 @@ GEM
       base64
       nkf
       rexml
-    activesupport (6.1.7.7)
+    activesupport (7.0.8.4)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    addressable (2.8.6)
-      public_suffix (>= 2.0.2, < 6.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
@@ -57,27 +56,29 @@ GEM
       netrc (~> 0.11)
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
-    concurrent-ruby (1.2.3)
+    concurrent-ruby (1.3.3)
     escape (0.0.4)
     ethon (0.16.0)
       ffi (>= 1.15.0)
-    ffi (1.16.3)
+    ffi (1.17.0)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.8.3)
-    i18n (1.14.4)
+    i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     json (2.7.2)
-    minitest (5.22.3)
+    minitest (5.24.1)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
     nkf (0.2.0)
     public_suffix (4.0.7)
-    rexml (3.2.6)
+    rexml (3.2.9)
+      strscan
     ruby-macho (2.5.1)
+    strscan (3.1.0)
     typhoeus (1.4.1)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
@@ -89,7 +90,6 @@ GEM
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
       rexml (~> 3.2.4)
-    zeitwerk (2.6.13)
 
 PLATFORMS
   ruby
@@ -99,7 +99,7 @@ DEPENDENCIES
   cocoapods (>= 1.13, < 1.15)
 
 RUBY VERSION
-   ruby 2.6.10p210
+   ruby 3.3.4p94
 
 BUNDLED WITH
-   1.17.2
+   2.5.14

example/ios/RNSwanBrowserExample.xcodeproj/project.pbxproj

@@ -12,6 +12,7 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		8F983DC716006D6B741C5711 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = BA3AA277F4F3F63D43863DAB /* PrivacyInfo.xcprivacy */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -21,11 +22,11 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = RNSwanBrowserExample/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RNSwanBrowserExample/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RNSwanBrowserExample/main.m; sourceTree = "<group>"; };
-		13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = RNSwanBrowserExample/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		3B4392A12AC88292D35C810B /* Pods-RNSwanBrowserExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNSwanBrowserExample.debug.xcconfig"; path = "Target Support Files/Pods-RNSwanBrowserExample/Pods-RNSwanBrowserExample.debug.xcconfig"; sourceTree = "<group>"; };
 		5709B34CF0A7D63546082F79 /* Pods-RNSwanBrowserExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RNSwanBrowserExample.release.xcconfig"; path = "Target Support Files/Pods-RNSwanBrowserExample/Pods-RNSwanBrowserExample.release.xcconfig"; sourceTree = "<group>"; };
 		5DCACB8F33CDC322A6C60F78 /* libPods-RNSwanBrowserExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-RNSwanBrowserExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = RNSwanBrowserExample/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		BA3AA277F4F3F63D43863DAB /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = RNSwanBrowserExample/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
@@ -50,7 +51,7 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
 				13B07FB71A68108700A75B9A /* main.m */,
-				13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */,
+				BA3AA277F4F3F63D43863DAB /* PrivacyInfo.xcprivacy */,
 			);
 			name = RNSwanBrowserExample;
 			sourceTree = "<group>";
@@ -164,6 +165,7 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				8F983DC716006D6B741C5711 /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

example/ios/RNSwanBrowserExample/PrivacyInfo.xcprivacy

@@ -2,8 +2,6 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
-	<key>NSPrivacyCollectedDataTypes</key>
-	<array/>
 	<key>NSPrivacyAccessedAPITypes</key>
 	<array>
 		<dict>
@@ -31,6 +29,8 @@
 			</array>
 		</dict>
 	</array>
+	<key>NSPrivacyCollectedDataTypes</key>
+	<array/>
 	<key>NSPrivacyTracking</key>
 	<false/>
 </dict>

example/package.json

@@ -15,19 +15,19 @@
   "dependencies": {
     "@swan-io/react-native-browser": "link:../",
     "react": "18.2.0",
-    "react-native": "0.74.0",
+    "react-native": "0.74.3",
     "url-parse": "1.5.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@react-native/babel-preset": "0.74.81",
-    "@react-native/metro-config": "0.74.81",
+    "@react-native/babel-preset": "0.74.85",
+    "@react-native/metro-config": "0.74.85",
     "@types/react": "^18.2.60",
     "@types/url-parse": "^1.4.11",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "serve": "^14.2.1",
-    "typescript": "^5.4.5"
+    "babel-plugin-module-resolver": "^5.0.2",
+    "serve": "^14.2.3",
+    "typescript": "^5.5.3"
   }
 }

example/src/App.tsx

@@ -23,6 +23,7 @@ export const App = () => {
     let entry: StatusBarProps | undefined;
 
     openBrowser("https://swan.io", {
+      animationType: "slide",
       dismissButtonStyle: "close",
       barTintColor: "#FFF",
       controlTintColor: "#000",

ios/RNSwanBrowser.mm

@@ -61,6 +61,7 @@ - (void)open:(NSString *)url
      resolve:(RCTPromiseResolveBlock)resolve
       reject:(RCTPromiseRejectBlock)reject {
 
+  NSString *animationType = options.animationType();
   NSString *dismissButtonStyle = options.dismissButtonStyle();
   NSNumber *barTintColor = options.barTintColor().has_value() ? [NSNumber numberWithDouble:options.barTintColor().value()] : nil;
   NSNumber *controlTintColor = options.controlTintColor().has_value() ? [NSNumber numberWithDouble:options.controlTintColor().value()] : nil;
@@ -71,6 +72,7 @@ - (void)open:(NSString *)url
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject) {
 
+  NSString *animationType = [options valueForKey:@"animationType"];
   NSString *dismissButtonStyle = [options valueForKey:@"dismissButtonStyle"];
   NSNumber *barTintColor = [options valueForKey:@"barTintColor"];
   NSNumber *controlTintColor = [options valueForKey:@"controlTintColor"];
@@ -102,7 +104,13 @@ - (void)open:(NSString *)url
       [_safariVC setPreferredControlTintColor:[RCTConvert UIColor:controlTintColor]];
     }
 
-    [_safariVC setModalPresentationStyle:UIModalPresentationPageSheet];
+    if (animationType != nil && [animationType isEqualToString:@"fade"]) {
+      [_safariVC setModalPresentationStyle:UIModalPresentationOverFullScreen];
+      [_safariVC setModalTransitionStyle:UIModalTransitionStyleCrossDissolve];
+    } else {
+      [_safariVC setModalPresentationStyle:UIModalPresentationPageSheet];
+    }
+
     [RCTPresentedViewController() presentViewController:_safariVC animated:true completion:nil];
 
     _safariVC.delegate = self;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/react-native-browser",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "An easy-to-use in-app browser module for React Native.",
   "author": "Mathieu Acthernoene <mathieu.acthernoene@swan.io>",
@@ -68,11 +68,11 @@
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@types/react": "^18.2.60",
-    "prettier": "^3.2.5",
-    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.0.0",
     "react": "18.2.0",
-    "react-native": "0.74.0",
-    "react-native-builder-bob": "^0.23.2",
-    "typescript": "^5.4.5"
+    "react-native": "0.74.3",
+    "react-native-builder-bob": "^0.26.0",
+    "typescript": "^5.5.3"
   }
 }

src/NativeRNSwanBrowser.ts

@@ -2,6 +2,7 @@ import type { TurboModule } from "react-native";
 import { TurboModuleRegistry } from "react-native";
 
 type Options = {
+  animationType?: string;
   dismissButtonStyle?: string;
   barTintColor?: number;
   controlTintColor?: number;

src/index.ts

@@ -3,9 +3,11 @@ import NativeModule from "./NativeRNSwanBrowser";
 
 const emitter = new NativeEventEmitter(NativeModule);
 
+export type AnimationType = "fade" | "slide";
 export type DismissButtonStyle = "cancel" | "close" | "done";
 
 export type Options = {
+  animationType?: AnimationType;
   dismissButtonStyle?: DismissButtonStyle;
   barTintColor?: string;
   controlTintColor?: string;
@@ -24,11 +26,12 @@ const convertColorToNumber = (
 };
 
 export const openBrowser = (url: string, options: Options): Promise<void> => {
-  const { dismissButtonStyle, onOpen, onClose } = options;
+  const { animationType, dismissButtonStyle, onOpen, onClose } = options;
   const barTintColor = convertColorToNumber(options.barTintColor);
   const controlTintColor = convertColorToNumber(options.controlTintColor);
 
   return NativeModule.open(url, {
+    ...(animationType != null && { animationType }),
     ...(dismissButtonStyle != null && { dismissButtonStyle }),
     ...(barTintColor != null && { barTintColor }),
     ...(controlTintColor != null && { controlTintColor }),