Sunday, February 11, 2018

TIL: React Native and Android. Tutorial Edition

This week I have been working on React Native Android application for one of my courses, so I decided to write a tutorial with everything you need to know to get started with React Native.

You can find the full code from this tutorial on GitHub.

I am not planning to go through setup, you can check this blog (it's only for Windows, here is one for Linux and for Mac).

So what happens next after running your app?

Your main page is App.js, so let's take a look what's going on there.

Everything that is under render() function's return is your view, so that's the part you will modify the most, this structure reminds me a little bit of HTML.

On the next few lines we can see styles,

I prefer to keep structure and styles separated in different files.
So let's do that!

To include your stylesheet in App.js you need to export module from your styles file and don't forget to import all the dependencies in your styles file:

In your App.js you have to import this file and use it as a "library":

One of the hardest parts (at least for me) is configuring navigation from page to page.
To add navigation to the project, you have to modify index.js file:

First of all you need to import StackNavigator and create constant property to pass navigation property to it, later on we will use that property to move user from component to component:

Now you need to configure StackNavigator component and make it main/first screen by passing reactNavigation property we have just created. And we need to register StackNavigator component, now when you need to redirect user to the next screen you will use "App" title and your application will know what you are talking about.

Now let's create a few buttons and extra component, so we can play around with our navigation and don't forget to import Button component:

It is highly important to add ".bind(this)" when you call your function, otherwise this.props and this.state won't be available in your function.

So here is my Next.js page:

Now you need to add Next component to index.js file, so it can be accessible by App component. Don't forget to import the page first:

And add the page to StackNavigator:

So let's our app and see how it works:

As you can see Navigation has added a bar at the top of the screen, it's not pretty, so here is a solution on how to can get rid of it. You need to add a few lines in index.js file in you StackNavigator component:

And here is how the app looks now:

I prefer to work with Emulator to work on styling and components, because it's easy to reload and see the changes almost instantly. But sometimes it's important to know how your app would feel on the actual phone.

Here is how you can easily run your android app on your phone.

First of all you need to configure development mode on your mobile device. This configuration may vary for each model, so I am not including it here.
Next step is to connect your phone to your computer using USB cable.
Now to run your application you should bundle it using the following command first (you have to rerun this one every time you make changes in your code):

$ react-native bundle --platform android --dev false --entry-file index.js
--bundle-output android/app/src/main/assets/
--assets-dest android/app/src/main/res

Now you can run:

$ react-native run-android

And enjoy your awesome application on the phone!

You can find the full code from this tutorial on GitHub.

No comments:

Post a Comment

TIL: How to use DatePickerAndroid and TimePickerAndroid in React Native?

While working with React Native, I always tried to use built-in components instead of "reinventing" the bicycle. So today the d...