App Install with React Native
Using module linking to integrate code
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:
- Your bridge module name: AppInstallDate
- Select Native Module from bridge type.
- Select default platform, iOS/Obj-C and Android/Java.
- 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.