Day 9: Porting React Native App across platforms

#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.

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 :)