Kotlin vs React Native - Notification Alert using Native Modules

Notifications are one important thing to add to your application when building or working on it. We all know that with the help of react native we can build apps in minutes and even hours with less stress. But how about adding a notification system where a user can be able to see notifications for each tasks.                

There are many options when it comes to adding notifications to react native. We can install 3rd Party libraries, but this limits us to just few basic things we know about react native. We're going to add a notification alert using Kotlin vs React Native.


Kotlin is a cross-platform, statically typed, general-purpose programming language with type inference. Kotlin is designed to interoperate fully with Java, and the JVM version of Kotlin's standard library depends on the Java Class Library, but type inference allows its syntax to be more concise.

The interoperate feature of kotlin makes if cool to work with react native. Right now let's get started.

Create a react native application

  • Add a kotlin version to android/build.gradle
     buildscript
         ext.kotlin_version = "1.3.31"
        ext {           }
     }
  • Add this line of code to dependicies
 classpath"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
  • Go over to android/app folder
  • Add the kotlin extensions at the top
 apply plugin: "com.android.application"
 apply plugin: "kotlin-android"
 apply plugin: "kotlin-android-extensions"
  • Add this line to depedencies
 implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
So with the above steps once we run npm install && npm run android, our app will grab all the neccessary dependencies needed to bridge kotlin and react native. Let's move on to create Kotlin files needed for the complete bridging.

Go over to r_notification/android/app/src/main/java/com/ folder, your application has a relative folder like this. Inside the com folder create another folder called KotlinNotification. This folder will contain all the neccessary modules needed for our application to work.

r_notification/android/app/src/main/java/com/KotlinNotifications/
​Create 2 files 

Main.kt
NotificationPop.kt

Inside Main.kt

classMain : ReactPackage { 

 overridefuncreateViewManagers( reactContext: ReactApplicationContext )
    List> { 
     return emptyList>() 
    } 

 overridefuncreateNativeModules(reactContext: ReactApplicationContext)
    List {
     val modules = ArrayList()
            //NotificationPop Module 
            modules.add(NotificationPop(reactContext)) return modules 
     }
}

inside NotificationPop.kt

class NotificationPop : ReactContextBaseJavaModule {    var loading: Boolean = false
 // declaring variables 
 lateinit var notificationManager: NotificationManager 
 lateinit var notificationChannel: NotificationChannel 
 lateinit var builder: Notification.Builder 
 val channelId: String = "boltskills-notification"
 lateinit var myContext: ReactApplicationContext; 
 constructor(context: ReactApplicationContext) : super(context) { 
 this.loading = true this.myContext = context 
 } 

 //Module name 
 override fun getName(): String { return"Pop" }

 @ReactMethod 
 fun trigger() {
// Use relevant versions only if 
(Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { 
 val notificationChannel = NotificationChannel(channelId, "My Notifications", NotificationManager.IMPORTANCE_MAX); 
 // Configure the notification channel. notificationChannel.setDescription("Channel description"); 
notificationChannel.enableLights(true); notificationChannel.setLightColor(Color.RED); 
notificationChannel.enableVibration(true); 
 // Register the channel with the system 
 notificationManager = myContext.getSystemService(NotificationManager::class.java) 
 notificationManager.createNotificationChannel(notificationChannel) } 
         if (this.loading) { 
            val notificationBuilder: NotificationCompat.Builder = 
            NotificationCompat.Builder(myContext, channelId) 
            notificationBuilder.setAutoCancel(true
            .setWhen(System.currentTimeMillis())
            .setSmallIcon(R.drawable.bolt) 
            .setTicker("Hearty365"
            .setContentTitle("Notification Title")
            .setContentText("Notification Body"
            .setContentInfo("Info"); 
            notificationManager.notify(1234, notificationBuilder.build()); 
         } 
     }
}