Let’s build a React Native application

Same tools we are using for the Web with native-feel and well performance.

Gif below is the DEMO of my first React Native application in 8 hours(Github repo):

Why React Native?

Here is a talk from Jani Eväkallio(a web developer without any mobile development experience). I think this video is much stronger than any word I can type.

How to start?

Just follow this tutorial: after running the emulator, enable live reload. Now, edit whatever you want!

Same experience as we develop web-based React application.

Can I use DOM in React Native application?

Sorry, we can’t, because of the target “fell native and perform well”, React native is not using WebView internally. But except API differences, components in React Native work the same way.

// Example of using components provided by React Native
import React, { Component } from 'react'
import {
  Image,
  Text,
  View,
} from 'react-native'
export default class Comic extends Component {
  render() {
    const { title, img, fromSearch } = this.props
return (
      <View>
        <Text>
          {title}
        </Text>
        { fromSearch && <Text>Came from search</Text> }
        <View>
          <Image
            resizeMode='contain'
            source={{ uri: img }}
          />
        </View>
      </View>
    )
  }
}

Why I can’t get response from network in ios application

If you are using latest react-native-cli, maybe you will find that you can’t display images from the internet, or your AJAX request failed for no reason.
That’s caused by apple’s security rule, http protocol is restricted.

If you need communication in HTTP protocol, there are two solutions(all related to info.plist):

1: Just like what the quick start project does, add the domain name of server:

2: Add a new rule: “Allow Arbitrary Loads”. don’t forget set the value to “YES”.

What’s the next?

Now we have a working React Native development environment, let’s get our hands dirty, build some projects! That’s how we learn to program.

If you are interested in how I build the first React Native application, here is the video:

Thanks for your time!