React Native is hot right now, and with good reason. Unlike Cordova or progressive web apps, React Native enables you to build fully native mobile apps in JavaScript. In other words, your React code controls the layout of the same native Android (or iOS, if that's your style) buttons and views. Furthermore, unlike NativeScript, React Native lets you define styles and layouts entirely in JSX, rather than relying on XML and a subset of CSS.

I recently set out to see what all the hype was about and built my first React Native app: openHIIT, a timer for Tabata-style interval training. It won't be available on the Play Store, but you can download the apk on GitHub. In my experience, React Native is far from a complete solution for abstracting away the underlying OS. Unlike my experiences with Ionic, I found myself digging into the Java code regularly with React Native. Right now, there is no way to do basic tasks like playing audio, setting Android's KEEP_SCREEN_ON flag, or even setting the app's name and icon, without diving into React Native's underlying Java code.

In this post, I'll quickly describe how to make sure Android never puts the phone to sleep while your app is running. This may seem like a simple task, but there's plenty of questions about this topic and corresponding bad advice on StackOverflow. I quickly realized during my first workout that this feature was necessary for the app, but ended up spending hours figuring out how to get this to work. Hopefully this quick post will save you some time.

React Native Android Project Layout

TLDR; diff on GitHub

Below is the basic layout of the Android project for openHIIT with React Native 0.19.0.

A lot of this code is just build logic automatically generated by React Native that you never have to touch. However, in my experience, just about every app will have to make modifications to the android/app/src/main directory. For instance, any fonts that you want to use in your app need to be included as ttf files in android/app/src/main/assets/fonts.

The most important file, however, is the MainActivity.java file highlighted above. In Android, an activity is the code organizational unit immediately underneath an app - all Android code starts in an activity. If you're not familiar with Android development, you can think of an activity as being roughly analogous to a component in React. By default, React Native projects have only one activity, whose responsibility is rendering whatever the output of your React components is. In order to keep Android awake while your app is up, you're going to modify MainActivity.java.

Tweaking MainActivity.java

Android activities have lifecycle hooks much like React components. Since MainActivity needs to run before any React Native components get rendered, the onCreate() method is the right place to tell Android to keep your app awake. So all you need to do is import a couple files and override the onCreate() method for your MainActivity to set the KEEP_SCREEN_ON flag correctly.

Moving On

React Native is powerful, but in order to use it in any meaningful way on Android, you need to be willing to get your hands dirty and dig into the Java. Some surprisingly basic tasks can't be done through JS, including forcing the screen to stay on. Writing React Native code is a lot easier than building a native android app from scratch, but you still need to be familiar with the basics of native android development before setting out to build a React Native app.

#native_company# #native_desc#
#native_cta#
Found a typo or error? Open up a pull request! This post is available as markdown on Github
comments powered by Disqus