How to Create an App Install Date in React Native

3 minutes read

May 1, 2019

Ever wondered where the React Native app install date is located? I did, several weeks ago. I have worked on React Native for quite a while now and I love building apps with it. Even with all the benefits that React Native brings to the table, it sometimes can be difficult to do some trivial tasks. One such thing was to find the React Native app install date in both Android and iOS.

 

I searched a lot of libraries in React Native to find out when an app was installed on my phone, but every time, I failed. I couldn’t find the installation date, because presently there is no way to find that info on React Native.

 

Then, I heard about Native Module in React Native. Native Module helps us to integrate our native code to React Native. React Native is a 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.

Getting Started

First, create a React Native project using react native command line interface (CLI).

 

react-native init NativeModuleExample

 

Now, we need to create a bridge between Native and JavaScript code. There are two environments in React Native; JavaScript and Native. 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.

 

In order to create 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 the following:

 

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, iOS/Obj-C and Android/Java.
  4. Then select the directory where you would like your JS files. If the directory folder doesn’t exist, the platform will create it for you.

This will create a file AppInstallDateNativeModule.js in our project. Now, it’s time to introduce Native environment in our React Native project. 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 it’s time to write some native code to create the React Native app install date. Pen 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 getPackages() {
return Arrays.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 the code as follows:

 

// 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 the App.js file and update the 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 install 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 Native Module linking in a React Native app. Maybe you can be inspired by this to build something amazing. Please feel free to leave any feedback, I’m always looking for better solutions! Contact me through solutions@RubicoTech.com.

Recent blogs

...

Communicating with Prospects: The ultimate Guide

If you’ve spent time in sales, you know that there is an unlimited supply of content about best practices that focus on communicating with prospects. Within your own organization, you’ve probably spent countless hours and meetings going over strategy, process, and outbound approach. You likely have an abundance of metrics that track your outbound activity. […]

Read More
...

How Can I Take on More Projects Without Increasing Overhead?

As a marketing agency owner, you are likely asking yourself; “How can I take on more projects, without increasing overhead costs?” I talk to agencies that have enough work to keep someone busy for a few months, but not enough to justify hiring a new designer or developer full time.

Read More
...

Advanced Git Features

At Rubico, we use Git to manage our source code. This is one of the most important parts of our daily work. In general, we mostly use the basic Git commands.

Read More