Day 9: Porting React Native App across platforms

Harini Janakiraman
May 16, 2016 · 2 min read

#100DaysOfCode

Mondays are super busy work days, so going to keep today’s coding task simple and easy but a critical step to completing this weekend’s (Day 7 & 8) project.

Project (1 Hour): Port the react-native app built over Day 7 & 8 from iOS to android. Run via Android emulator in Android Studio to complete the cross-platform support for the app.

All the code for this project can be found on my github

Step 1: Install Android Studio

Since all the required packages are already installed for iOS, we only need to install Android Studio. Follow instructions as per facebook react-native for Android as per your OS needs: https://facebook.github.io/react-native/docs/getting-started.html

Step 2: Run AVD Android Emulator

Once Android Studio is setup with it pointing to correct JDK and SDK locations, start up a Android emulator in Android Studio for your project.

Step 3: Update index.android.js

The android js setup looks exactly same as the iOS and we can reuse the same react components for UI as well. Only minor difference is that we need to update NavigatorIOS to Navigator, everything else looks the same as ios.js index component.

navigatorRenderScene(route, navigator) {
switch (route.id) {
case ‘Main’:
return (<Main navigator={navigator} route={route}/>);
}
}
render() {
return (
<Navigator
style={styles.container}
initialRoute={{id: ‘Main’}}
renderScene={this.navigatorRenderScene.bind(this)}
/>
);
}

Step 4: Run react native for Android

Finally run react-native from your project directory in terminal.

react-native run-android

This should build the project using gradle and install it on the emulator, so now you can play with the app on Android to test it out.

Image for post
Image for post

Note: In case gradle build is slow (which it tends to be!) consider using the Gradle Daemon: https://docs.gradle.org/2.10/userguide/gradle_daemon.html

Day 9 of #100DaysOfCode DONE

If you enjoyed this, please click 👏 so that others can enjoy it as well. Follow me on Twitter @HariniLabs to get the latest updates or just to say Hi :)

PS: I curate a bi-weekly #WomenInTech newsletter for a dose of inspiration from the world of tech and yes men can signup too! Get it here :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store