Joseph Jude

Consult . Code . Coach

Saying Hello In React Native


code . nodejs . rn . react

I have been blogging about React.js for sometime. One of the reasons I started learning React.js is to learn React Native, so that I can create native mobile apps for multiple platforms.

React-native is still evolving — react.js is at v16.0, while react-native is only at v0.49. Still, a large ecosystem has already developed with tools, third-party plugins, and marketplace. One of the development tool is Expo.

Usually you would need a Mac to develop iOS apps. With Expo, you can develop iOS apps without Mac, though you would need an iOS device to test the app. Expo offers two products: a development tool with which you can develop react-native mobile apps, and a mobile app with which you can preview your app as you develop.

Getting started with Expo is easy. Go to the home page and download the tool for your platform — Mac, Linux, or Windows. Install react-native (which in turn will require node.js). With these two, you are ready for your first react-native mobile app.

Hello World in React Native with Expo

Click on Project->New Project, and enter a folder name for your new project. Expo will automatically create folders and files for the new project. After creating the necessary folders and files, Expo will open the project. Once opened, it will display:

Project opened! You can now use the "Share" or "Device" buttons to view your project.

Click on "Device" and then you can open on iOS simulator. You will see the app opened in the simulator.

If you don't have Mac machine but have iOS device, then you can use your iOS device to view your new app. Download the Expo app from App Store. Then click on "Share" button the IDE. It will show a QR code. Scan it from the Expo mobile app. It will open your new app. It will even refresh when you modify the code.

You can follow similar step to test the app on Android devices. If you have not installed the Android simulator but have an Android device, download the Android app from the Play Store. Follow the steps as like for iOS to view the app on Android phone.

Now that we have seen the app, let us modify it to display "Hello World".

Expo would've created the below directory structure.

.
├── App.js
├── app.json
├── assets
├── node_modules
└── package.json

We have to modify App.js. Open it in your favorite text editor. You'll see the following code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Go ahead and change the text inside <Text></Text> element to:

<Text>Hello World!</Text>

Now the default component should look like this.

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello World!</Text>
      </View>
    );
  }
}

When you save the file, Expo will automatically compile and refresh the simulator (and apps opened via Expo mobile app).

You should see Hello World!.

That is your first cross-platform mobile app. Aren't you happy?

Subscribe via below form to get notified whenever I write a new post.


Like the post? Retweet it. Got comments? Reply.

Saying Hello In React Native by @jjude https://t.co/6ZaD6D0zBy pic.twitter.com/rJh7VbT9Rl

— Joseph Jude (@jjude) October 14, 2017
Share this on: Twitter / /

Comments

comments powered by Disqus