Add fade animation option

Author: zoontek

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/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;

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 }),