React Native Banner View (Android & iOS native module)

Banner.h

//
//  Banner.h
//
//  Created by Mohammad Julfikar on 08/09/2019.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface Banner : UIView{
  void (^_completionHandler)(int done);
}
- (void) show:(NSString*)messageTxt type:(NSString*)messageType onComplete:(void(^)(int)) handler;
@end

NS_ASSUME_NONNULL_END

Banner.m

//
//  Banner.m
//
//  Created by Mohammad Julfikar on 08/09/2019.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import "Banner.h"

@implementation Banner

- (void) show:(NSString*) messageTxt type:(NSString*)messageType onComplete:(void(^)(int))handler{
  BOOL isIphoneX = [self checkIPHONE];
  CGFloat width = [[UIScreen mainScreen]bounds].size.width;
  CGFloat height = isIphoneX ? 90 : 70;
  
  UIView * banner = [[UIView alloc] initWithFrame:CGRectMake(0, -height, width, height)];
  banner.userInteractionEnabled = NO;
  
  [banner setBackgroundColor:[UIColor colorWithRed:1.0f/255.0f green:189.0f/255.0f blue:213.0f/255.0f alpha:1.0]];
  
  if([messageType isEqualToString:@"warning"]){
    [banner setBackgroundColor:[UIColor colorWithRed:255.0f/255.0f green:174.0f/255.0f blue:67.0f/255.0f alpha:1.0]];
  }
  if([messageType isEqualToString:@"success"]){
    [banner setBackgroundColor:[UIColor colorWithRed:87.0f/255.0f green:187.0f/255.0f blue:87.0f/255.0f alpha:1.0]];
  }
  if([messageType isEqualToString:@"danger"]){
    [banner setBackgroundColor:[UIColor colorWithRed:255.0f/255.0f green:85.0f/255.0f blue:45.0f/255.0f alpha:1.0]];
  }
  
  UIImageView *logo = [[UIImageView alloc] init];
  [logo setImage:[UIImage imageNamed:@"bannerView.png"]];
  
  [logo.heightAnchor constraintEqualToConstant:40].active = true;
  [logo.widthAnchor constraintEqualToConstant:40].active = true;
  
  CABasicAnimation *theAnimation;
  theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.scale"];
  theAnimation.duration=0.4;
  theAnimation.repeatCount=HUGE_VALF;
  theAnimation.autoreverses=YES;
  theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
  theAnimation.toValue=[NSNumber numberWithFloat:0.7];
  theAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
  [logo.layer addAnimation:theAnimation forKey:@"animateOpacity"];
  
  
  UILabel *message = [[UILabel alloc] init];
  [message setBackgroundColor:[UIColor clearColor]];
  [message setText:messageTxt];
  [message adjustsFontSizeToFitWidth];
  [message setFont:[UIFont systemFontOfSize:15]];
  [message setTextColor:[UIColor whiteColor]];
  message.numberOfLines = 2;
  message.lineBreakMode = NSLineBreakByTruncatingTail;

  [message.heightAnchor constraintEqualToConstant:height].active = true;
  [message.widthAnchor constraintEqualToConstant:width-60].active = true;
  
  UIStackView *stackView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 0, width, height-30)];
  
  stackView.axis = UILayoutConstraintAxisHorizontal;
  stackView.alignment = UIStackViewAlignmentCenter;
  
  [stackView addArrangedSubview:logo];
  [stackView addArrangedSubview:message];
  
  stackView.translatesAutoresizingMaskIntoConstraints = false;
  
  [banner addSubview:stackView];
  [stackView.centerYAnchor constraintEqualToAnchor:banner.centerYAnchor].active = true;
  stackView.bounds = CGRectInset(stackView.frame, 0, isIphoneX ? -20 : -15);
  
  UIWindow* mainWindow = [[UIApplication sharedApplication] keyWindow];
  UIView* view = mainWindow.subviews[0]; 
  [view addSubview:banner]; 
  
  
  banner.layer.shadowRadius  = 1.5f;
  banner.layer.shadowColor   = [UIColor colorWithRed:0.f/255.f green:0.f/255.f blue:0.f/255.f alpha:1.f].CGColor;
  banner.layer.shadowOffset  = CGSizeMake(0.0f, 0.0f);
  banner.layer.shadowOpacity = 0.5f;
  banner.layer.masksToBounds = NO;
  
  UIEdgeInsets shadowInsets     = UIEdgeInsetsMake(0, 0, -1.5f, 0);
  UIBezierPath *shadowPath      = [UIBezierPath bezierPathWithRect:UIEdgeInsetsInsetRect(banner.bounds, shadowInsets)];
  banner.layer.shadowPath       = shadowPath.CGPath;
  
  _completionHandler = [handler copy];
  
  [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut  animations:^{
    CGRect oldPosition = [banner frame];
    oldPosition.origin.y = 0;
    [banner setFrame:oldPosition];
  } completion:^(BOOL finished) {
    [UIView animateWithDuration:0.3 delay:1.5f options:UIViewAnimationOptionCurveEaseInOut  animations:^{
      CGRect oldPosition = [banner frame];
      oldPosition.origin.y = -height;
      [banner setFrame:oldPosition];
    } completion:^(BOOL finished) {
      [banner removeFromSuperview];
      _completionHandler(1);
      _completionHandler = nil;
    }];
  }];
}
- (BOOL) checkIPHONE{
  BOOL isIphoneX = NO;
  if([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
    switch ((int)[[UIScreen mainScreen] nativeBounds].size.height) {
      case 2436:
        isIphoneX = YES;
        break;
        
      case 2688:
        isIphoneX = YES;
        break;
        
      case 1792:
        isIphoneX = YES;
        break;
        
      default:
        isIphoneX = NO;
        break;
    }
  }
  return isIphoneX;
}
@end

in_res_anim_folder_create_file_pulse.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="400"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:toXScale="0.75"
        android:toYScale="0.75"
        android:interpolator="@android:interpolator/bounce" />
    <scale
        android:duration="200"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:toXScale="1.25"
        android:toYScale="1.25"
        android:interpolator="@android:interpolator/bounce" />
</set>

in_res_drawable_folder_create_file_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

in_res_layout_folder_create_file_toast_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/shadow">

    <RelativeLayout
        android:padding="10dp"
        android:id="@+id/toast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/logo"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:id="@+id/tv_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="0dp"
            android:textSize="15sp"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/logo"
            android:textColor="#fff"
            android:text="Hello World"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="0dp"
            android:layout_toRightOf="@+id/logo" />
    </RelativeLayout>

</RelativeLayout>

MessageBox.h

//
//  MessageBox.h
//
//  Created by Mohammad Julfikar on 08/09/2019.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <React/RCTBridgeModule.h>
#import "Banner.h"
NS_ASSUME_NONNULL_BEGIN

@interface MessageBox : NSObject<RCTBridgeModule>

@end

NS_ASSUME_NONNULL_END

MessageBox.java

public class MessageBox extends ReactContextBaseJavaModule {

    private Context context;
    private LayoutInflater inflater;

    public MessageBox(@Nonnull ReactApplicationContext reactContext, LayoutInflater inflater) {
        super(reactContext);
        this.context = reactContext;
        this.inflater = inflater;
    }
    @ReactMethod
    public void  show(String message, String messageType, final Callback callback){

        final View toastView = inflater.inflate(R.layout.toast_view, null);

        int color = R.color.toastPrimary;

        if(messageType.equals("warning")){
            color = R.color.toastWarning;
        }

        if(messageType.equals("success")){
            color = R.color.toastSuccess;
        }

        if(messageType.equals("danger")){
            color = R.color.toastDanger;
        }

        RelativeLayout background = toastView.findViewById(R.id.toast);
        background.setBackgroundResource(color);

        ImageView imageView = toastView.findViewById(R.id.logo);
        imageView.startAnimation(AnimationUtils.loadAnimation(context, R.anim.pulse));

        TextView textView = toastView.findViewById(R.id.tv_message);
        textView.setText(message);

        final Toast toast = new Toast(getCurrentActivity());
        toast.setView(toastView);
        toast.setDuration(Toast.LENGTH_SHORT);
        toast.setGravity(Gravity.TOP | Gravity.FILL_HORIZONTAL, 0,0);
        toast.show();

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                callback.invoke(1);
            }
        }, 2000);
    }
    @Nonnull
    @Override
    public String getName() {
        return "MessageBox";
    }
}

MessageBox.js

import {NativeModules} from 'react-native';
module.exports = NativeModules.MessageBox;



/*
Usage ----

import MessageBox from './MessageBox';

MessageBox.show("Your message","danger",()=>{ 
  // triggers when message box is dismissed
});
*/

MessageBox.m

//
//  MessageBox.m
//
//  Created by Mohammad Julfikar on 08/09/2019.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import "MessageBox.h"

@implementation MessageBox

- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(show:(NSString *)messageTxt type:(NSString *)messageType onClose:(RCTResponseSenderBlock)callback)
{
  Banner *banner = [[Banner alloc]init];
  [banner show:messageTxt type:messageType onComplete:^(int done){
    callback(@[]);
  }];
  NSLog(@"From Native View %@",messageTxt);
}

@end

RNMessageBox.java

public class RNMessageBox implements ReactPackage {
    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

        List<NativeModule> modules = new ArrayList<>();

        modules.add(new MessageBox(reactContext, LayoutInflater.from(reactContext)));

        return modules;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}