Kodeco Forums

React Native Tutorial: Building Android Apps with JavaScript

🎓 Courses & Articles
1

In this React Native tutorial you'll learn how to build native apps based on the hugely popular React JavaScript library, with a focus on Android.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/247-react-native-tutorial-building-android-apps-with-javascript
1 Like
2

Thanks again for another great article. The same one but for iOS was also great but why making same app in two (iOS and Android) ways if RN is cross-platform?
Wouldn’t it make more sense to demo that cross-platform ability by making this same app supporting both Android and iOS in one single project?
It would help a lot learn how to write cross-platform code in react-native to beginner like me.
Much appreciated

3

@dbnex14 Simple reason is the iOS tutorial was written first. This Android one is truly cross-platform. The iOS one has aspects that only work on that platform. You can decide which way you want to go. When writing the Android tutorial there was a thought to combine both, but it was decided to keep them separate.

1 Like
4

Thanks for the awesome tutorial for the react native application creation
 am waiting for the next tutorial once again thanks lot bro


5

Nice, I will take a look. Thank you

6

You said

with React Native your code may be written in JavaScript

However, JSX is not the same as JavaScript

7

JSX is JavaScript Extension, not exactly the same. Note that you don’t have to write React Native apps using JSX.

8

~“Most other UI frameworks put the onus on you to update the UI”. Actually, Architecture Components take care of all that for you on android. You can easily implement a uni-directional data flow with a ‘single source of truth’ on android


9

Thanks for the awesome article! I’m starting with React Native, and your article was the best start I’ve found. About this project being cross-platform, can you give me your thoughts about what is the best approach to start an app with this premise: using react-native (like you did on this article), or create-react-native-app and expo?

10

@edumelzer, if you’re starting off. Go with create-react-native-app and expo. It gets you up and running without needing Xcode or Android Studio which can be a pain if you’re new to those environments. Once you get the hang of how React Native works and you feel the need to branch out into using more native hooks, you can switch your project to all native.

11

Thanks fro the tutorial.
Unless because I am smoking something but I find the Adding Navigation section confusing, it doesn’t specify that you have to create a new Search Page on that section before you will be able to see the screen with the Title bar that says Property Finder. And you need the SearchPage in order for the StackNavigator home screen.

12

You may have missed the part that says “Next, replace the App class definition with the following:” and right after that the SearchPage class is defined. If I’m misunderstanding what you’re asking let me know.

14

I’m not sure if there is an error in the code or something I missed. I am getting the following error after adding the final styling and ListItem class. I have attached a screenshot of the error. I downloaded the source zip and replaced the App.js, SearchPage.js, and SearchResults.js with the source files and got the same result. Any ideas why this is happening?

react_error
react_error332×678 127 KB

15

@cabernathy Can you please help with this when you get a chance? Thank you - much appreciated! :]

16

Ok I figured it out, the problem is that one of the listings does not have a price, so item.price_formatted is indeed undefined for at least one item.

Simply replace

price = item.price_formatted.split(' ')[0];

by

var price = item.price_formatted
if (typeof price != 'undefined') {
  price = item.price_formatted.split(' ')[0];
} else {
  price = 'error'
}

Cheers!

1 Like
17

Thanks @cabernathy and @Joe Howard for the such useful article for beginners. I try with my self and it quite amazed the way you guys explain the things. I just mention the one thing related to fetch method.
I just follow the instruction as you guys mention, but i was getting one error that json.response undefined.
I get worried that where i get wrong. So read two or three times the article but i was unable to resolve the issue. After spend some time on google i will find the answer of my problem “javascript - React Native: Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'response.json') - Stack Overflow”.
If some one facing same problem that i go through please use the given fetch method.
" fetch(query)
.then(response => {
console.log(‘response:’,response.status)
return response.json().then(data =>{
this._handleResponse(data.response)
})
})
.catch(error =>
this.setState({
isLoading: false,
message: 'Something bad happened ’ + error
})); ".
Thanks once again @cabernathy and @Joe for such useful article.

18

Good catch. Also, based on this Fetch API page, I’d modify the code from:

fetch(query)
  .then(response => response.json()) // status may not be ok, but promise not rejected
  .then(json => this._handleResponse(json.response)) // json possibly undefined
  .catch(error =>
     this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
   }));

To:

fetch(query)
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(json => this._handleResponse(json.response))
  .catch(error =>
     this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
   }));
19

i can enter up to Result page after i selected any thing i can’t able to go property page

20

Would you be able to provide more detail, especially the code or detailed steps to recreate the issue. We can then further look into this.

21

Thanks again for another great article. also we are leaders in React Mobile app Development, can anyone contact us to any query regarding code, our developer can happy to assist you.