feat: tap to dismiss (vonovak#64)

* feat: tap to dismiss

* feat: tapToDismiss option

* refactor: rename styles to options

* docs: tapToDismissEnabled example

* fix: race condition in setTapToDismissEnabled

* docs: minor tweaks

* refactor: undo breaking change

---------

Co-authored-by: Vojtech Novak <vonovak@gmail.com>

Author: mgefimov

README.md

@@ -49,22 +49,22 @@ then rebuild your project
 
 ## Usage
 
-the module exposes the following functions, same as `ToastAndroid`, with extra styling parameter for iOS only:
+the module exposes the following functions, same as `ToastAndroid`, with extra configuration parameter for iOS only:
 
 ```ts
 import Toast from 'react-native-simple-toast';
 
-Toast.show(message, duration, styles);
+Toast.show(message, duration, options);
 
-Toast.showWithGravity(message, duration, gravity, styles);
+Toast.showWithGravity(message, duration, gravity, options);
 
 Toast.showWithGravityAndOffset(
   message,
   duration,
   gravity,
   xOffset,
   yOffset,
-  styles,
+  options,
 );
 ```
 
@@ -82,12 +82,13 @@ Toast.CENTER;
 
 Please note that `yOffset` and `xOffset` are [ignored on Android 11 and above](<https://developer.android.com/reference/android/widget/Toast#setGravity(int,%20int,%20int)>).
 
-For styling on iOS, you can pass an object with the following properties:
+For customizing on iOS, you can pass an object with the following properties:
 
 ```ts
-type StylesIOS = {
+type OptionsIOS = {
   textColor?: ColorValue;
   backgroundColor?: ColorValue;
+  tapToDismissEnabled?: boolean;
 };
 ```
 
@@ -109,6 +110,10 @@ Toast.showWithGravity(
 Toast.show('This is a styled toast on iOS.', Toast.LONG, {
   backgroundColor: 'blue',
 });
+
+Toast.show('This is a toast that can be dismissed (iOS only).', Toast.LONG, {
+  tapToDismissEnabled: true,
+});
 ```
 
 ## License

example/src/App.tsx

@@ -54,6 +54,14 @@ export default function App() {
               Toast.show('This is a toast.', Toast.SHORT);
             }}
           />
+          <Button
+            title={'tap to dismiss toast'}
+            onPress={() => {
+              Toast.show('Tap to dismiss toast.', Toast.LONG, {
+                tapToDismissEnabled: true,
+              });
+            }}
+          />
           <Button
             onPress={() => {
               setModalVisible(true);
@@ -78,6 +86,18 @@ export default function App() {
               });
             }}
           />
+          <Button
+            title={'two toasts on top'}
+            onPress={() => {
+              Toast.show('_____ This is a bottom toast _____', 7, {
+                backgroundColor: 'rgb(255, 0, 255)',
+                textColor: 'black',
+              });
+              Toast.show('Tap to dismiss toast on iOS.', 7, {
+                tapToDismissEnabled: true,
+              });
+            }}
+          />
           <Button
             title={'toast with offset'}
             onPress={() => {

ios/RNSimpleToast.mm

@@ -3,6 +3,7 @@
 #import "UIView+Toast.h"
 #import "RNToastViewController.h"
 #import <React/RCTConvert.h>
+#import "RNToastView.h"
 
 static double defaultPositionId = 2.0;
 
@@ -26,7 +27,6 @@ @implementation RNSimpleToast {
 - (instancetype)init {
     if (self = [super init]) {
         _kbdHeight = 0;
-        [CSToastManager setTapToDismissEnabled:NO];
         [CSToastManager setQueueEnabled:YES];
         [[NSNotificationCenter defaultCenter] addObserver:self
                                                  selector:@selector(keyboardDidShow:)
@@ -78,29 +78,29 @@ - (NSDictionary*)constantsToExport {
 }
 #endif
 
-RCT_EXPORT_METHOD(show:(NSString *)message duration:(double)duration styles:(NSDictionary*)styles {
-    [self _show:message duration:duration position:defaultPositionId offset:CGPointZero styles:styles];
+RCT_EXPORT_METHOD(show:(NSString *)message duration:(double)duration options:(NSDictionary*)options {
+    [self _show:message duration:duration position:defaultPositionId offset:CGPointZero options:options];
 });
 
-RCT_EXPORT_METHOD(showWithGravity:(NSString *)message duration:(double)duration gravity:(double)gravity styles:(NSDictionary*)styles {
-    [self _show:message duration:duration position:gravity offset:CGPointZero styles:styles];
+RCT_EXPORT_METHOD(showWithGravity:(NSString *)message duration:(double)duration gravity:(double)gravity options:(NSDictionary*)options {
+    [self _show:message duration:duration position:gravity offset:CGPointZero options:options];
 });
 
-RCT_EXPORT_METHOD(showWithGravityAndOffset:(NSString *)message duration:(double)duration gravity:(double)gravity xOffset:(double)xOffset yOffset:(double)yOffset styles:(NSDictionary*)styles {
-    [self _show:message duration:duration position:gravity offset:CGPointMake(xOffset, yOffset) styles:styles];
+RCT_EXPORT_METHOD(showWithGravityAndOffset:(NSString *)message duration:(double)duration gravity:(double)gravity xOffset:(double)xOffset yOffset:(double)yOffset options:(NSDictionary*)options {
+    [self _show:message duration:duration position:gravity offset:CGPointMake(xOffset, yOffset) options:options];
 });
 
 - (void)_show:(NSString *)msg
      duration:(NSTimeInterval)duration
      position:(double)position
        offset:(CGPoint)offset
-       styles:(NSDictionary*)styles {
+       options:(NSDictionary*)options {
     CSToastStyle *style = [[CSToastStyle alloc] initWithDefaultStyle];
-    if (styles[@"backgroundColor"]) {
-        style.backgroundColor = [RCTConvert UIColor:styles[@"backgroundColor"]];
+    if (options[@"backgroundColor"]) {
+        style.backgroundColor = [RCTConvert UIColor:options[@"backgroundColor"]];
     }
-    if (styles[@"messageColor"]) {
-        style.messageColor = [RCTConvert UIColor:styles[@"messageColor"]];
+    if (options[@"messageColor"]) {
+        style.messageColor = [RCTConvert UIColor:options[@"messageColor"]];
     }
 
 
@@ -117,6 +117,10 @@ - (void)_show:(NSString *)msg
             [weakView removeFromSuperview];
             [controller hide];
         };
+        // CSToastManager state is shared among toasts, and is used when toast is shown
+        // so modifications to it should happen in the dispatch_get_main_queue block
+        [CSToastManager setTapToDismissEnabled:options[@"tapToDismissEnabled"]];
+
         if (!CGPointEqualToPoint(offset, CGPointZero)) {
             CGPoint centerWithOffset = [self getCenterWithOffset:offset view:view toast:toast position:positionString];
             [view showToast:toast duration:duration position:[NSValue valueWithCGPoint:centerWithOffset] completion:completion];
@@ -163,8 +167,7 @@ - (UIView *)getToastView:(RNToastViewController *)ctrl {
     CGRect bounds = rootView.bounds;
     bounds.size.height -= _kbdHeight;
 
-    UIView *view = [[UIView alloc] initWithFrame:bounds];
-    view.userInteractionEnabled = NO;
+    UIView *view = [[RNToastView alloc] initWithFrame:bounds];
     [rootView addSubview:view];
     return view;
 }

ios/RNToastView.h

@@ -0,0 +1,5 @@
+#import <UIKit/UIKit.h>
+
+@interface RNToastView : UIView
+
+@end

ios/RNToastView.m

@@ -0,0 +1,11 @@
+#import "RNToastView.h"
+
+@implementation RNToastView
+
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
+  id hitView = [super hitTest:point withEvent:event];
+  if (hitView == self) return nil;
+  else return hitView;
+}
+
+@end

ios/RNToastViewController.m

@@ -1,6 +1,7 @@
 
 #import "RNToastViewController.h"
 #import <React/RCTUtils.h>
+#import "RNToastWindow.h"
 
 @implementation RNToastViewController
 
@@ -12,17 +13,12 @@ - (UIWindow *)toastWindow
         if (_toastWindow == nil) {
             UIWindow *keyWindow = RCTSharedApplication().keyWindow;
             if (keyWindow) {
-                _toastWindow = [[UIWindow alloc] initWithFrame:keyWindow.bounds];
+                _toastWindow = [[RNToastWindow alloc] initWithFrame:keyWindow.bounds];
             } else {
                 // keyWindow is nil, so we cannot create and initialize _toastWindow
                 NSLog(@"Unable to create alert window: keyWindow is nil");
             }
         }
-        
-        if (_toastWindow) {
-            _toastWindow.windowLevel = UIWindowLevelAlert + 1;
-            _toastWindow.userInteractionEnabled = NO;
-        }
     }
 
     return _toastWindow;
@@ -48,7 +44,7 @@ - (UIWindow *)getUIWindowFromScene
         for (UIScene *scene in RCTSharedApplication().connectedScenes) {
             if (scene.activationState == UISceneActivationStateForegroundActive &&
                 [scene isKindOfClass:[UIWindowScene class]]) {
-                return [[UIWindow alloc] initWithWindowScene:(UIWindowScene *)scene];
+                return [[RNToastWindow alloc] initWithWindowScene:(UIWindowScene *)scene];
             }
         }
     }

ios/RNToastWindow.h

@@ -0,0 +1,5 @@
+#import <UIKit/UIKit.h>
+
+@interface RNToastWindow : UIWindow
+
+@end

ios/RNToastWindow.m

@@ -0,0 +1,25 @@
+#import "RNToastWindow.h"
+
+@implementation RNToastWindow
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        self.windowLevel = UIWindowLevelAlert + 1;
+    }
+    return self;
+}
+
+- (instancetype)initWithWindowScene:(UIWindowScene *)windowScene {
+    if (self = [super initWithWindowScene:windowScene]) {
+        self.windowLevel = UIWindowLevelAlert + 1;
+    }
+    return self;
+}
+
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
+  id hitView = [super hitTest:point withEvent:event];
+  if (hitView == self) return nil;
+  else return hitView;
+}
+
+@end

src/NativeSimpleToast.ts

@@ -1,16 +1,13 @@
 import type { TurboModule, ColorValue } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 
+// TODO rename to OptionsIOS
 export type StylesIOS = {
   textColor?: ColorValue;
   backgroundColor?: ColorValue;
+  tapToDismissEnabled?: boolean;
 };
 
-// type NativeStyles = {
-//   messageColor?: number;
-//   backgroundColor?: number;
-// };
-
 export interface Spec extends TurboModule {
   getConstants: () => {
     SHORT: number;
@@ -19,20 +16,20 @@ export interface Spec extends TurboModule {
     BOTTOM: number;
     CENTER: number;
   };
-  show: (message: string, duration: number, styles: Object) => void;
+  show: (message: string, duration: number, options: Object) => void;
   showWithGravity: (
     message: string,
     duration: number,
     gravity: number,
-    styles: Object,
+    options: Object,
   ) => void;
   showWithGravityAndOffset: (
     message: string,
     duration: number,
     gravity: number,
     xOffset: number,
     yOffset: number,
-    styles: Object,
+    options: Object,
   ) => void;
 }
 

src/index.ts

@@ -33,25 +33,25 @@ export default {
   BOTTOM: constantsSource.BOTTOM,
   CENTER: constantsSource.CENTER,
 
-  show(message: string, durationSeconds: number, styles: StylesIOS = {}) {
+  show(message: string, durationSeconds: number, options: StylesIOS = {}) {
     RCTToast.show(
       message,
       durationSeconds ?? constantsSource.SHORT,
-      processColors(styles),
+      processColors(options),
     );
   },
 
   showWithGravity(
     message: string,
     durationSeconds: number,
     gravity: number,
-    styles: StylesIOS = {},
+    options: StylesIOS = {},
   ) {
     RCTToast.showWithGravity(
       message,
       durationSeconds ?? constantsSource.SHORT,
       gravity,
-      processColors(styles),
+      processColors(options),
     );
   },
 
@@ -61,25 +61,26 @@ export default {
     gravity: number,
     xOffset: number,
     yOffset: number,
-    styles: StylesIOS = {},
+    options: StylesIOS = {},
   ) {
     RCTToast.showWithGravityAndOffset(
       message,
       duration,
       gravity,
       xOffset,
       yOffset,
-      processColors(styles),
+      processColors(options),
     );
   },
 };
 
-function processColors(styles: StylesIOS) {
+function processColors(options: StylesIOS) {
   if (Platform.OS === 'ios') {
     return {
       // the types are not 100% correct
-      messageColor: processColor(styles.textColor) as number | undefined,
-      backgroundColor: processColor(styles.backgroundColor) as
+      ...options,
+      messageColor: processColor(options.textColor) as number | undefined,
+      backgroundColor: processColor(options.backgroundColor) as
         | number
         | undefined,
     };