React Native Tutorial: Building iOS and Android Apps with JavaScript

🎓 Courses & Articles
82

@cabernathy Do you have any feedback regarding this? Thank you - much appreciated! :]

83

@parijat could you please attach the source code you’re referring to? Another question, are you able to successfully run the final project in your iOS simulator?

84

Index.js:-
import { AppRegistry } from ‘react-native’;
import App from ‘./App’;

AppRegistry.registerComponent(‘PropertyFinder’, () => App);

App.js:-
use strict’;

import React, { Component } from ‘react’;
import {
StyleSheet,
NavigatorIOS,
} from ‘react-native’;

export default class SearchPage extends Component<{}> {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: ‘Property Finder’,
component: SearchPage,
}}/>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},
});

I’ve followed till “Adding Navigation” heading in the article. I am running on iOS simulator. It seems that the app while running on simulator is looping in some sort of recursion because if I leave the app running for 3 mins my MacBook’s fan starts running very fast.

I was able to run the app till return I added Search for houses to buy!; but when I added NavigatorIOS while following the article nothing is showing up just a blank iOS simulator I haven’t tried Android yet. I guess same issue is coming to davidleez above.

If I ignore this issue and continue till Building out the Search Page and run the app the navigation bar is showing up.

85

A couple of things are missing from the code you’ve sent.

First, you didn’t export the App class. Replace


export default class SearchPage extends Component<{}> {

with

export default class App extends Component<{}> {

I’ve just taken the info from the Add Navigation part of the tutorial.

Secondly, there was some code there before (one class), you need to change the class definition to:

class SearchPage extends Component<{}> {

Again, this is from the code snippet in the tutorial. Try that and see what you get.

This isn’t an iOS or Android thing, you seem not to be missing or have improperly set up the classes, if I go by the code you’ve shared.

86

Here’s some updates to get rid of warnings:

package.json:
“dependencies”: {
“expo”: “^26.0.0”,
“react”: “16.3.0”,
“react-native”: “~0.54.1”
}
SearchResults.js:
_keyExtractor = (item, index) => String(index);

Explanation: react-native 0.54.0 had extraneous warnings that React fixed today. The warning about a number vs String was an easy fix.

As for the licensing, they recently agreed to go MIT. It seems like pretty solid software for being on version 0.54. In my opinion they only have to be half as good if they deploy on twice as many devices. It’s not on Xcode’s level by any means, but could be a valid way to save developer’s time. I think there will always be room for native, just look at how much power they give you to write enterprise apps, but for cookie-cutter small business solutions, React could be a great tool. Debugging seems more like Python than Swift, but you don’t always have to recompile, which is nice. Great tutorial, I’ve always been a fan of the site.

1 Like
87

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!