React Native Tutorial: Building iOS and Android Apps with JavaScript

@rymercho, I’ve updated the tutorial based on RN 0.50 so it should now match the new file names and structure.

Thanks for updating this!

I am trying to follow along, but am having getting past this part:

My understanding, based on the open { is that I should do something like this:

class SearchPage extends Component<{}> {
  export default class App extends Component<{}> {
    render() {
      return (
        <NavigatorIOS
        styles={styles.container}
        initialRoute={{
          title: 'Property Finder',
          component: SearchPage,
        }}
      )
    }
  }
}

Though, when running it through simulator it is giving me an error. I have tried other permutations (such as having SearchPage on separately), and also have not had any luck getting it to run. Any help is much appreciated.

1 Like

What that instruction is telling you to do is replace the line:

export default class App extends Component<{}> {

with:

class SearchPage extends Component<{}> {

I hope that makes more sense. You’re basically renaming the class from App to SearchPage.

1 Like

hi my code isn’t producing anything on simulator just date no error i am stuck on search page component part here is my code

 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict';
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  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({
  description: {
    fontSize: 18,
    textAlign: 'center',
    color: '#656565',
    marginTop: 65,
  },
  container: {
  flex: 1,
}
});

The problem is here:

component: SearchPage,

It’s like you’re saying the component being shown by the navigator is itself - so in a weird way, it’s like a recursion. Take a look at the completed app (link at the end) if you get stuck.

React native shoots its self by create classes which are very different with iOS SDK core classes. Developer learns reactive should have lot of experience with iOS, If not, I can’t imagine how far react native lead them away.

i got fail when try install Node.js, my pc use windows 7 32 bit. is it failed cause my pc spec ?

What error do you get exactly?

install problem - Error 1603 @shogunkaramazov

Please check out this link when you get a chance:

Thank you! :]

ok thanks bro :slight_smile:

Still no update to cover both Android and iOS? Any idea when? Thank you

@dbnex14 Please check out the tutorial’s Android version when you get a chance:

https://www.raywenderlich.com/178012/react-native-tutorial-building-android-apps-javascript

Thank you! :]

1 Like

@shogunkaramazov Hey, thanks, I will definitely take a look but isn’t the whole point of RN that we dont have to write an app for iOS and one for Android?

I mean, it is supposed to be cross-platform, so why not one example that covers this very same application in both iOS and Android?
Hope that clarifies what I meant - instead of having one app, written in 2 different ways (one for iOS and one for Android which is exactly what these 2 articles did), why not have one article explaining one RN project creating this app that runs and behaves same on both iOS and Android to demonstrate that cross-platform functionality?

I am not sure how complex that is, it might be very simple but not if you are total beginner in RN :). And it would also clarify this very important aspect of RN being cross-platform.

Much appreciated

This topic was automatically closed after 166 days. New replies are no longer allowed.

Dear,

I have did that, but it still show an error. please help us with more detail.! Anyone please help…

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

1 Like

@davidleez I’m missing context. What is the question you have. Please provide detailed steps to reproduce. Is the issue that the simulator is showing blank?

I am also having same problem. After I followed the above tutorial and ran the code the blank simulator is showing up. No navigation bar noting but the source code attached is running fine on simulator. Took help from there but no luck. please help