Kodeco Forums

React Native Tutorial: Building Apps with JavaScript

šŸŽ“ Courses & Articles
1

React Native by Facebook is an open-source framework allowing you to build fully native iOS apps in JavaScript. Learn how in this React Native tutorial.

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

Titanium isnā€™t HTML and JS ā€“ itā€™s not a web solution. Purely JS and cross-platform native UI.

Please correct and stop spreading misinformation.

3

The article doesnā€™t say that Titanium is using HTML5, it says itā€™s using Javascript (which is accurate). Although I can see why youā€™d read it that way as the sentence is bundled with PhoneGap. Iā€™ll tighten up the English :]

I also go on to say that React Native uses a functional approach to building UI and isnā€™t a write-once, use anywhere approach - which does differ it from Titanium.

I think itā€™s fair to compare them in this way.

4

Hi Tom,
I have recreated this UI using a WYSIWIG tool for React Native apps developed by me. The video is at :React Native Interface Builder demo 2.0 - YouTube. Would love your feedback.

5

Every time I see a post on this type of technology, I think an angel dies :frowning:

6

Thanks for your article. A few suggestions to make your article more accurate:

Over the years there have been many frameworks using JavaScript and HTML5 to create iOS applications (such as PhoneGap or Titanium), so what makes React Native special? With React Native your application logic is written and runs in JavaScript, whereas your application UI is fully native; therefore you have none of the compromises typically associated with HTML5 UI.

This doesnā€™t make React Native special. Titanium has been doing the exact same since 2009.

The article doesnā€™t say that Titanium is using HTML5, it says itā€™s using Javascript

Yes it does. See the quote above where it clearly says ā€œHTML5 and Javascriptā€ and again, suggests React Native is doing something different then Titanium when it comes to this, which it does not.

I also go on to say that React Native uses a functional approach to building UI and isnā€™t a write-once, use anywhere approach - which does differ it from Titanium.

Again, this does not set it apart from Titanium. Weā€™ve been doing and saying the same thing all time long:

And unlike some of our competitors, we donā€™t believe write-once-run-anywhere is the solution. We believe write-once-and-adapt is the way to achieve those common cross-platform capabilities we all want.

Iā€™m sure thereā€™s plenty of things that make React Native different. Confusing developers with misinformation is neither helpful nor necessary.

7

Hi Zandbergen, thanks for the feedback.

As I mentioned in my post to @jasonkneen Iā€™ve updated the language to better reflect what I meant - hopefully thatā€™s clearer now?

With regards to your ā€˜write once, use anywhereā€™ comment - I hadnā€™t seen that article before so thanks for pointing that out. Iā€™ll admit that Iā€™m not an expert in Titanium (Iā€™m here writing about RN after all!), but if you read the Appcelerator site today youā€™ll see quotes such as ā€œNative, cross-platform app development & testing.ā€, ā€œWrite in JavaScript, run native on any device and OSā€ and ā€œ60-90% code reuse across device platformsā€.

To me this very much reads like a platform that is trying to bridge between different native environments in a way that RN isnā€™t. So perhaps their mindset has shifted since 2012?

8

Hi @scmiyer - Iā€™ve not had a chance to watch the full video yet but from what Iā€™ve seen so far your tool is amazing :] Seriously cool stuff.

Do you have a version I can play with? Iā€™ll make sure to pass your video on to the RN team at Facebook as well.

9

Hi Tom,
Thanks for checking it out. There are several UI components I need to add before I will be able to release an alpha version, I will keep you posted.
FYI - I have posted it on the React Native Community FB Group as well.

Sarat

11

Great tutorial. Very easy to follow. Worked like a charm. Nice introduction to this topic.

12

Thanks for the improvements @tomelliott, much clearer!

Our mindset didnā€™t change from 2012.

What makes Titanium different from React is that we provide cross-platform APIs for simpel UI components like Buttons, Labels, Views etc. The API is the same on all platforms, but the result is the actual UIButton or Button widget, not some custom component. This allows you to reuse a lot of code indeed.

But for platform-specific UI components like Action Bar, Navigation Bar etc we deliberately choose not to imitate those on platform that donā€™t have these components. We think this is the ideal balance between code reuse and honouring platform specific UI.

13

hello,
I am trying to put your exemple in an existing project where I use Navigator instead of NavigatorIOS, when i click on the GO button I Have un error : ā€œundefined is not a object (evaluating ā€˜Object.keys(dataBlob[sectionID]ā€™)ā€
I think I need to change something in the push method, but I donā€™t know what, if you have an idea.
Thx for help.

14

Greetings,

Going through the tutorial. Looks like the nestoria API no longer returns a GUID? At least, not the query I am using (see below). Their online docs state thereā€™s a GUID for each listing, but Iā€™m not seeing it. Anyone else running into this?

http://api.nestoria.co.uk/api?country=uk&pretty=1&encoding=json&listing_type=buy&action=search_listings&page=1&place_name=london

Thanks!

15

Hi,
Thanks for the wonderful tutorial.
I followed along, and was getting the below error after adding the SearchResults.js page; and when I download your code and run it, I get the same error too.
Hoping someone might be able to point out the obvious to me?

Unhandled JS Exception: undefined is not an object (evaluating ā€˜dataSource.rowIdentitiesā€™)

Thanks,

16

Hi Iala, what do you get for the following commands please?

react-native --version

and

node --version

17

Usually developers are skeptical of solutions that try to transplant a language that is native on one platform to another one. But a few months ago, an iOS developer evaluated React Native and stated:

ā€œI may never write an iOS app in Objective-C or Swift again.ā€

This is remarkable if you consider that he had to learn both JavaScript and React before he could be productive with React Native.
Read more here: http://www.inp-software.com/blog/marina/exciting-web-technologies-2015

18

You can use the rowID to identify the data to return.

19

Great Article, i have been using Appc for a few years now and i am very happy with it building cross platform apps, so its nice to see a article on React Native to see what other good cross platform app development solutions there are out there.

One thing i would like to know is how does React Native integrate with Native Frameworks? for example cross platform development is great if the app does not require any advanced functionality. Appc does a good job of allowing modules and widgets to extend their framework and covers most device capabilities but it still falls short in some situations and you have no choice but to go native, or there will be a solution for one platform but not all.

Functionality like.
Live streaming
iBeacons
Slow motion camera
Video Editing
Audio manipulation
Visual Charts

Appc recently announced Hyperloop which i think may cover some of these hurdles in the future but not sure how long it will be before that is released, i am just curious how React Native deals with advanced Functionality?

20

Hi Tom,
Thank for this article.

Any support on WINDOWS Phone?

Clm

21

It seems that with the latest version of React and ReactNative, we have to separate the React logic (Component) from the ReactNative logic (views and style) ie do:

import React, {component} from 'react';
import ReactNative, {StyleSheet, TouchableHighlight, ...} from 'react-native';

Also there itā€™s be nice to replace var by const whenever possible to use this new es6 feature.

1 Like