React Native Toast iOS

In this blog, I am implementing Toast Module functions for iOS and how to use those functions in our React Native Application?

In my previous blog, we know that how to create a React native Library and how to import in our Existing Application? Now, I am lighting my previous blog for What is the Module?

The module is a very important thing in our development, By using module we split our problems into many parts or we can generalize our problems into a specific form. In this blog, I will focus on how to create a module in the react-native project and how to implement it on our existing project manually.

How to create a Module?

-> Please click on the link to open my previous blog to create a module

https://mobikul.com/creating-module-for-react-native/

Now create the Toast Function for iOS in ToastModule.
In the internal native toast Function I have used native iOS Taost Library https://github.com/scalessec/Toast.

There are few steps to communicate from the Native method to React-Native in iOS.

Create a MobikulToast.h in you ios folder of the module

#import <React/RCTBridgeModule.h> @interface MobikulToast : NSObject <RCTBridgeModule> @end

1
2
3
4
5

#import <React/RCTBridgeModule.h>

@interface MobikulToast : NSObject <RCTBridgeModule>

@end

A native module is an Objective-C class that implements the RCTBridgeModule protocol. If you are wondering, RCT is an abbreviation of ReaCT.

In addition to implementing the RCTBridgeModule protocol, your class must also include the RCT_EXPORT_MODULE() macro. This takes an optional argument that specifies the name that the module will be accessible as in your JavaScript code (more on this later). If you do not specify a name, the JavaScript module name will match the Objective-C class name. If the Objective-C class name begins with RCT, the JavaScript module name will exclude the RCT prefix.
Now create the MobikulToast.m file that uses the RCTBridgeModuleand other methods for Toast.

#import "MobikulToast.h"
#import <UIKit/UIKit.h>
#import "UIView+Toast.h"

@implementation MobikulToast{
     CGFloat _keyOffset;
}

// To export a module named CalendarManager
RCT_EXPORT_MODULE();

// This would name the module AwesomeCalendarManager instead
// RCT_EXPORT_MODULE(AwesomeCalendarManager);

@end

#import "MobikulToast.h"

#import <UIKit/UIKit.h>

#import "UIView+Toast.h"

@implementation MobikulToast{

CGFloat _keyOffset;

}

// To export a module named CalendarManager

RCT_EXPORT_MODULE();

// This would name the module AwesomeCalendarManager instead

// RCT_EXPORT_MODULE(AwesomeCalendarManager);

@end

Now create method and expose on React Native code by using the RCT_EXPORT_METHOD

RCT_EXPORT_METHOD(sampleMethod:(NSString *)stringArgument numberParameter:(nonnull NSNumber *)numberArgument callback:(RCTResponseSenderBlock)callback)
{
    // TODO: Implement some actually useful functionality
	callback(@[[NSString stringWithFormat: @"numberArgument: %@ stringArgument: %@", numberArgument, stringArgument]]);
}

RCT_EXPORT_METHOD(sampleMethod:(NSString *)stringArgument numberParameter:(nonnull NSNumber *)numberArgument callback:(RCTResponseSenderBlock)callback)

{

// TODO: Implement some actually useful functionality

callback(@[[NSString stringWithFormat: @"numberArgument: %@ stringArgument: %@", numberArgument, stringArgument]]);

}

In the above snippet “sampleMethod” is the name of the Native method that will call from ReactNative and it’s arguments. Now bellow snippet is my Toast module method.

RCT_EXPORT_METHOD(show:(NSString *)msg duration:(double)duration {
    
    [self _show:msg duration:duration gravity:MobikulGravityBottom backgroundColor:nil];
});

RCT_EXPORT_METHOD(show:(NSString *)msg duration:(double)duration {

[self _show:msg duration:duration gravity:MobikulGravityBottom backgroundColor:nil];

});

Supported Argument of RCT_EXPORT_METHOD

string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) of any types from this list
object (NSDictionary) with string keys and values of any type from this list
function (RCTResponseSenderBlock)

Now Creating Constant for Module

 (NSDictionary *)constantsToExport {
    return @{
             @"SHORT": [NSNumber numberWithDouble:MobikulShortDuration],
             @"LONG": [NSNumber numberWithDouble:MobikulLongDuration],
             @"BOTTOM": [NSNumber numberWithInteger:MobikulGravityBottom],
             @"CENTER": [NSNumber numberWithInteger:MobikulGravityCenter],
             @"TOP": [NSNumber numberWithInteger:MobikulGravityTop]
             };
}

(NSDictionary *)constantsToExport {

return @{

@"SHORT": [NSNumber numberWithDouble:MobikulShortDuration],

@"LONG": [NSNumber numberWithDouble:MobikulLongDuration],

@"BOTTOM": [NSNumber numberWithInteger:MobikulGravityBottom],

@"CENTER": [NSNumber numberWithInteger:MobikulGravityCenter],

@"TOP": [NSNumber numberWithInteger:MobikulGravityTop]

};

}

Now Add this module in your Project by admin link our PodFile.

 pod 'react-native-mobikul-toast', :path => '../react-native-mobikul-toast'

1	pod 'react-native-mobikul-toast', :path => '../react-native-mobikul-toast'

Use MobikulToast in our project javascript class

import module

import MobikulToast from 'react-native-mobikul-toast

1

import MobikulToast from 'react-native-mobikul-toast
call methods

MobikulToast.success(msg, MobikulToast.SHORT)

1

MobikulToast.success(msg, MobikulToast.SHORT)