How to get app install date in React Native?

I’ve been working on React native for quite a while now and I love building apps with it. With all the benefits that React native brings to the table, it can sometimes be difficult to do some trivial task that can be easily done in native. One such thing was to find out app installed date in both Android and iOS.

I searched a lot of libraries in React Native to find out when the app was installed on my mobile, but every time I failed because there is no way to find out the solution for this in React Native at the moment.

Then I heard about Native Module in React Native. Native Modules helps us to integrate our native code to React native. As we all know react native is new technology in the market and therefore does not provide all the native features that we need, so we need to build it ourselves. We’ll do this by using Native Modules for both Android and iOS.

Photo by Nicole Honeywill on Unsplash

Getting Started

First, create a react native project using react native cli.

react-native init NativeModuleExample

Now, We need to create a bridge between Native and JavaScript code. There are two environments in React Native, the JavaScript one and the Native one. Both of them communicate with each other and this communication is done by using a “bridge”. The bridge provides a way for bidirectional and asynchronous communications between these two environments.

So, for creating this bridge in our Example app we need to install the react-native-create-bridge package.

npm install --save react-native-create-bridge

Then, from the root of our project, run

react-native new-module

There will be a prompt asking you for:

1. Your bridge module name : AppInstallDate
2. Select Native Module from bridge type.
3. Select default platform i.e. iOS/Obj-C and Android/Java.
4. The directory where you would like your JS files. If it doesn’t exist, It’ll create it for you.

This will create a file AppInstallDateNativeModule.js in our project. Now, time to introduce Native environment in our react native project. So, for this, we must have Android studio and Xcode to write native code.

For iOS/Obj-C

Open Xcode, and right-click on your root project folder name and Add files to your NativeModuleExample . Select the files associated with your module and click Add

Now time to write some native code, so for this open AppInstallDate.m and update the method RCT_EXPORT_METHOD it should now look like this.

RCT_EXPORT_METHOD(exampleMethod)
{
NSURL* urlToDocumentsFolder = [[[NSFileManager defaultManager] URLsForDirectory:NSDocumentDirectory inDomains:NSUserDomainMask] lastObject];
__autoreleasing NSError *error;
NSDate *installDate = [[[NSFileManager defaultManager] attributesOfItemAtPath:urlToDocumentsFolder.path error:&error] objectForKey:NSFileCreationDate];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateFormat:@"dd/mm/yyyy hh:mm:ss"];
NSString *stringDate = [dateFormatter stringFromDate:installDate];
[self emitMessageToRN:@"EXAMPLE_EVENT" :@{ @"date":stringDate }];
}

For Android/Java

Open Android Studio, and look for MainApplication.java in android/app/src/main/java/com/NativeModuleExample then add your package to the getPackages function like this:

import com.nativemoduleexample.appinstalldate.AppInstallDatePackage;
@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new AppInstallDatePackage()
    );
  }

Open AppInstallDateModule the file inside java/yourapp and update exampleMethod function as given below.

@ReactMethod
    public void exampleMethod () {
        // An example native method that you will expose to React
        // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module
try{
            long installedTime = reactContext.getPackageManager().getPackageInfo(reactContext.getPackageName(),0).firstInstallTime;
// Format the date time
            String dateString = DateFormat.format("dd/mm/yyyy hh:mm:ss", new Date(installedTime)).toString();
final WritableMap event = Arguments.createMap();
            event.putString("date", dateString);
            emitDeviceEvent("EXAMPLE_EVENT", event);
}catch(PackageManager.NameNotFoundException e){
            e.printStackTrace();
        }
    }

Final Steps

Open file AppInstallDateNativeModule.js from your project i.e NativeModuleExample, and update code as:

//  Created by react-native-create-bridge
import { NativeModules, NativeEventEmitter } from "react-native";
const { AppInstallDate } = NativeModules;
const AppInstallDateEmitter = new NativeEventEmitter(AppInstallDate);
export default {
   exampleMethod() {
     return AppInstallDate.exampleMethod();
  },
emitter: AppInstallDateEmitter,
EXAMPLE_CONSTANT: AppInstallDate.EXAMPLE_CONSTANT
};

Now, open App.js file, and update code

import AppInstallDate from "./AppInstallDateNativeModule";
componentWillMount() {
  AppInstallDate.emitter.addListener("EXAMPLE_EVENT", ({ date }) =>   {
  alert(date);
  });
}
componentWillUnmount() {
  AppInstallDate.emitter.remove();
}
onPress = () => {
  AppInstallDate.exampleMethod();
};
render(){
 return(
         <TouchableOpacity onPress={this.onPress}>
           <Text>Click Me!!!</Text>
         </TouchableOpacity>
      );
}

Conclusion

We have successfully created a React Native app that gets the app installation date.

I’ve skipped some boilerplate code for this app but you can find that in the GitHub repo here.

I hope this repo will help you to understand the NativeModule linking in react native app. Maybe you can take inspiration from this to build something amazing. Please feel free to leave any feedback, I’m always looking for better solutions!