React – Native – Day 8 – Basic stuff with view, text and safe area

I am using mac for creating react native project. You will learn some basic stuff on react native like basic user interface buttons, text inputs and view.

Launch Terminal and type:

react-native init BasicStuffs

Paste below code in index.js:

Here is the output:

Issue found:

hello world is hiding behind safe area.

Fix:

Use SafeAreaView – We will wrap our Text in SafeAreaView.

change

to

and change JSX as below:

Complete code:

Output:

Style

Let’s say I want the text color to be red:

Let’s Create Style like this:

Let’s use it as below code snippet:

Output:

Let’s play with views, buttons and input texts:

Output:

I am learning flex and will share you guys soon in next tutorials:)

Thanks & Regards,

Alok Upadhyay.

Skype : alok.upadhyay32

https://www.linkedin.com/in/k-alok-44656a15/

https://medium.com/@maddy.lucky4u

React – Native – Day 7 – Environment Set Up On Windows

To set up react native on windows, there are few steps:

Install JDK – To provide complete development environment

Install Node – To provide environment for java script run.

Install Python – React Native uses it for react native build process. Must install python 2.7.12.

Install Android Studio – Obviously you need complete android development environment so that you can create a development environment for android. Eventually you are creating a android app using react native.

Install React Native Command Line Tools – C:\Users\Alok>npm install -g react-native-cli

Done!

Let’s test by creating a sample project: Run below command-

C:\Users\Alok\Desktop\ReactNativeProjects>react-native init FirstProject

React – Native – Day 6 – Environment Set Up Using Home Brew And Creating A App

Install Atom

The Text Editor.

Install ESLint

The error checker.

Install Xcode

The native development environment, also make sure to install command line tools.

Install Homebrew

Used to install Node (Node is used to provide a runtime environment for javascript )

Install Node/NPM

Node is used to provide a runtime environment for javascript

Install Watchman

React Native uses watchman to detect when you’ve made code changes and then automatically build and push the update your device without you needing to manually refresh it. https://facebook.github.io/watchman/ is the home page for thewatchman used by React Native.

Install React Native CLI

React Native Command Line Interface. To generate new React Native Projects.

Let’s see in detail

Installing Atom Text Editor And Configuring it with ESLint

Atom is a free and open-source text and source code editor for macOSLinux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub. Atom is a desktop application built using web technologies.

Atom can be downloaded from here.

ESLint is a linter &  Linting is the process of running a program that will analyse code for potential errors. By setting up Linting with ESlist in Atom it will be very helpful to development and fix errors quickly.

Xcode can be Installed from here.

Homebrew can be installed from here.

After successful Homebrew install, install node using below command-

After successful node installation, install watchman using below command-

Finally install React Native Command Line Interface using below command-

That’s It our setup is done 😛

Let’s create a new project named “MyAlbums”, using below command-

After successful installation of project it should look like this:

Press command – R to run this project and see the output in simulator. Yeah we did it.

Metal

Some key points regarding MetalKit are:

  • Metal is a graphics application programming interface (API). What this means in plain English is that it’s a set of commands and tools that give program developers access to the graphics processing power of a device, primarily housed in the graphics processing unit (GPU). Communicating with computer hardware or other pieces of software is very complicated, and APIs make the process much simpler, giving developers more direct control over how their apps relate to pieces of hardware and other software.
  • So why is it called “Metal”? You can see from the graphic above that the app, in this way of visualising graphics processing, is closer to the chip. “Closer to the metal,” in developer parlance. Thus, Metal.
  • Metal allows much faster graphics processing from identical chips — according to Apple, up to ten times faster. This massive speed advantage is created by making the underlying base code and the interactions between an app, the CPU, and the GPU much more efficient. If you want the technical language, Metal includes precomputed shaders, up-front state validation, CPU/GPU synchronisation, shared CPU/GPU memory, and lower driver overhead.
  • Even if Metal doesn’t change the public perception of Macs, there’s no doubt that it will change the Mac gaming scene. There are plenty of great games out there for Macs, from first-person shooters to role-playing games, but many Mac owners just can’t play them because they require too much power. That could change very quickly when developers start re-releasing their games with Metal tech built in. We may even see more Mac-only games.
  • “Metal is a C++ based programming language that developers can use to write code that is executed on the GPU for graphics and general-purpose data-parallel computations. Since Metal is based on C++, developers will find it familiar and easy to use. With Metal, both graphics and compute programs can be written with a single, unified language, which allows tighter integration between the two.”
  • Metal 2 enables more efficient profiling and debugging in Xcode, accelerated machine learning.
  • Graphics processors (GPUs) are designed to quickly render graphics and perform data-parallel calculations. Use the Metal framework when you need to communicate directly with the GPUs available on a device. Apps that render complex scenes or that perform advanced scientific calculations can use this power to achieve maximum performance. Such apps include:
    Games that render sophisticated 3D environments
    Video processing apps, like Final Cut Pro
    Data-crunching apps, such as those used to perform scientific research.

Thanks 🙂

Please support us by comment, like and share our facebook page.

iOS AutoLayout Size Class

Size-Class-Example-1 – This example talking about increasing fonts and updating constraints for iPad, making sure iPhone specific font and constraint are not impacted.

Size-Class-Example-2 – One more example talking about increasing fonts and updating constraints for iPad, making sure iPhone specific font and constraint are not impacted.

IoT-2-Measure Temperature with LM 35 Sensor, “AT-09 BLE Module”, Arduino Uno & iPhone SE

Hello every one :). Hope you are doing good. In previous part IoT-1 we discuss about controlling LED ON and OFF. Now we will discuss about communication over BLE between iPhoneSE and Arduino. We will read temperature data from LM 35 temperature sensor over bluetooth and show it on iPhoneSE user interface.

Please support me by comment, like and share my face book page.

Attached is the video of final output:

Prerequisite

You should first read Bluetooth & Bluetooth fundamentalsdiscovering peripheralsconnecting peripherals for building strong fundamentals on BLE.

Software

  • Download and install latest Arduino IDE from here. At the time of writing this blog it’s version is 1.8.5.
  • You must have latest version of XCode. At the time of writing this blog it is 9.3.1

Hardware

  • I ordered AT-09 ble module (v4.0) from amazon.

    • iPhoneSE with iOS v11.3.
    • I ordered Arduino Uno kit from RoboIndia. Some other Arduino uno hardware which CAN work are:

and

Steps

After successful installation of Arduino IDE launch it.

In editor window copy paste below code:

All Set! Let’s upload code on Arduino Hardware.

Connect mac and Arduino with USB.

Make sure you have choose “Board:Arduino/Genuino Uno” and port “usbmodem1421Arduino/Genuino Uno”. Over all set up should look like this:

After uploading the code it’s time to setup circuit.

So the connections are as below:

Setting up Temperature Sensor

Connect one leg of temperature sensor -> GND of Arduino board.

Connect mid leg of temperature sensor -> Pin A0 of Arduino board.

Connect other leg of temperature sensor -> 3.3V of Arduino board

After setting above circuit, you should be able to see voltage, degree and farenhite outputs in “Serial Monitor”. See attached info for reference:

We will pass degreesF value to our iPhone device.

Setting up BLE module

Connect RXD of A-9 BLE module -> TX of Arduino board.

Connect TXD of A-9 BLE module -> RX of Arduino board.

Connect VCC of A-9 BLE module -> 5V of Arduino board.

Connect GND of A-9 BLE module -> GND of Arduino board.

Yeah we have successfully set up our circuit. We are almost done setup for Arduino software and  and hardware.

Please support me by comment, like and share my face book page.

We are done half part till now. Let’s understand basic concept from iOS point of view and write some code.

Connection between BLE devices

I have used XCode v9.3.1, swift v4.3.1, iPhone iOS v11.3.1. If you are from non iOS background, then it might be difficult to understand code, but approach and logic is easy to understand. Some technical points:

Central : Our iOS device is central. It discovers services (which includes characteristics).

Peripheral : AT-09 BLE module is peripheral. We will use characteristics “FFE1” to write data “ON” and “OFF”.

CoreBluetooth Framework : In iOS this framework provides required classes and delegate methods to handle events like:

Discovering peripherals

Connecting peripherals

Discovering services

Discovering characteristics etc.

See below diagram how does BLE device connects to each other:

  • Bluetooth Central: This is the node that is trying to connect to a data source. Think of this as the client.
  • Bluetooth Peripheral: This is the node that is providing the primary data source. Think of this as the server.
  • Characteristic: A characteristic can be considered a variable. Characteristics are defined attribute types that contain a single logical value.
  • Service: A group of characteristics live under a “Service”. Services are collections of characteristics and relationships to other services that encapsulate the behavior of part of a device. Service are collection of data and associated behaviors describing a specific function or feature of a peripheral. For example, a heart rate sensor has a Heart Rate service. A peripheral can have more than one service.
  • Descriptors are defined attributes that describe a characteristic value.
  • Each service and characteristic is represented by a UUID which can be either a 16-bit or a 128-bit value.
  • Central’ Job
    • Scanning for peripherals
    • Connecting to a peripheral
    • Disconnecting from a peripheral
    • Discovering services
    • Discovering characteristics of a service
    • Subscribing to a characteristic
    • Receiving data from a characteristic
  • Peripheral’s Job
    • Advertising a service and characteristic
    • Adding service and characteristic to the PeripheralManager
    • Detecting of new subscribers to a characteristics
    • Detecting of unsubscribing
    • Handling of unready state of the device.

Note : Peripheral does not connect to peripheral. and central does not connect to central.

Framework

Core Bluetooth :

Overview

The Core Bluetooth framework provides the classes needed for your apps to communicate with devices that are equipped with Bluetooth low energy wireless technology.

Do not subclass any of the classes of the Core Bluetooth framework. Overriding these classes is unsupported and results in undefined behavior.

class CBCentral

The CBCentral class represents remote central devices that have connected to an app implementing the peripheral role on a local device. That is, when you are implementing the peripheral role using the CBPeripheralManager class, centrals that connect to your local peripheral are represented as CBCentral objects. Remote centrals are identified by universally unique identifiers (UUIDs), represented by NSUUID objects.

scan for other peripherals

Central devices scan for any advertising peripherals and displays it to the user

A central typically uses the information served up by peripherals to accomplish some particular task.

  • A central is kinda like the “boss”. It wants information from a bunch of its workers in order to accomplish a particular task.

It defines logic behind the Core bluetooth communication. It is able to scan, connect and disconnect peripherals and it also consumes information available at each peripheral. The central devices are usually mobile devices or tablets.

class CBPeripheral

The CBPeripheral class represents remote peripheral devices that your app—by means of a central manager (an instance of CBCentralManager)—has discovered advertising or is currently connected to. Peripherals are identified by universally unique identifiers (UUIDs), represented by NSUUID objects. Peripherals may contain one or more services or provide useful information about their connected signal strength.

advertise information as peripheral

  • A peripheral is kinda like the “worker”. It gathers and publishes data to that is consumed by other devices/means central.

The device that has information to share eg. Heart rate or temperature etc. The information can be pushed or advertise over the air.The peripheral devices are things like Heart rate monitor, BLE enables proximity tags, etc.

The following image defines the relationship between central and peripherals:

In the above scenario iOS devices (Central) communicate with the Heart rate Monitoring system (Peripheral) to get heart rate information and shows it on a device.

How Centrals Communicate with Peripherals?

Advertising is the primary way that peripherals make their presence known via Bluetooth LE.

In addition to advertising their existence, advertising packets can contain some data, such as the peripheral’s name. It can also include some extra data related to what the peripheral collects. For example, in the case of a heart rate monitor, the packet also provides heartbeats per minute (BPM) data.

The job of a central is to scan for these advertising packets, identify any peripherals it finds relevant, and connect to individual devices for more information.

class CBService

CBService and its subclass CBMutableService represent a peripheral’s service—a collection of data and associated behaviors for accomplishing a function or feature of a device (or portions of that device). CBService objects in particular represent services of a remote peripheral device (represented by a CBPeripheral object). Services are either primary or secondary and may contain a number of characteristics or included services (references to other services).

A CBPeripheral holds services (each defined as a CBService), and each CBService holds CBCharacteristics.

The following diagram shows the hierarchy of the CBPeripheral:

Let’s code now:

Below is the user interface part:

I will discuss some critical code only here which is very important to understand:

In Below code snippet we are initializing CBCentralManager and telling that CBCentralManager object’s(which is manager)  delegate is self (means we will implement delegate methods in ViewController class). The discover peripheral method is called when we click on “Discover Devices Button”

After successfully discover below delegate method didDiscoverPeripheral will be called:

We check if peripheral name is “MLT-05”, We show this information on user interface: 

Next, we hold reference of discovered peripheral in global variable and this time set peripheral’s delegate to self:

And after discovering peripheral we stop scanning.

Overall above code looks like this:

Yeah successfully discovered 🙂 🙂 🙂

Let’s connect now:

The below method will be called when user clicks on Connect button.

The code:

will call

Let’s see it’s implementation:

isMyPeripheralConected – this is the global variable we are holding reference to.

We are setting instance of view controller (self) as delegate of peripheral.

and then let’s discover characteristics after discovered services:

peripheral.discoverCharacteristics will call delegate methoddidDiscoverCharacteristicsFor:

In above code we are holding discover characteristic “FFE1” in global variable myCharacteristic. We use setNotify to get updates from peripheral.

Read data and show in UILabel:

Putting all code together looks like :

Mistakes/Challenges I faced:

  • I ordered HC-05 module from Amazon which iPhone does not support.
  • While uploading code to Arduino hardware make sure there is no connection to LED and BLE Module. Upload Arduino code first then setup your circuit.
  • Finding peripheral characteristic value (FFE1) to read temperature data.

Happy coding, hope you enjoyed it :).
Please support me by comment, like and share my face book page.

IoT-1-Making LED light Switch ON and OFF Using “AT-09 BLE Module”, Arduino Uno & iPhone SE

Hello every one :). Hope you are doing good. We will discuss about communication over BLE between iPhoneSE and Arduino. We will control LED switch ON and OFF from iPhone over bluetooth.

Attached is the video of final output:

Prerequisite

You should first read Bluetooth & Bluetooth fundamentalsdiscovering peripheralsconnecting peripherals for building strong fundamentals on BLE.

Software

  • Download and install latest Arduino IDE from here. At the time of writing this blog it’s version is 1.8.5.
  • You must have latest version of XCode. At the time of writing this blog it is 9.3.1

Hardware

  • I ordered AT-09 ble module (v4.0) from amazon.

    • iPhoneSE with iOS v11.3.
    • I ordered Arduino Uno kit from RoboIndia. Some other Arduino uno hardware which CAN work are:

and

Please support me by comment, like and share my face book page.

Steps

After successful installation of Arduino IDE launch it.

In editor window copy paste below code:

Let’s see what this code is doing:

The setup() function is called when a sketch starts. Use it to initialize variables, pin modes, start using libraries, etc. The setup() function will only run once, after each powerup or reset of the Arduino board.

The serial.begin()function sets the data rate in bits per second (baud) for serial data transmission. For communicating with the computer, use one of these rates: 300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, or 115200. The rate specifies how fast data is sent over a serial line.

The pinMode(pinNumber, OUTPUT)function can be used to decide at what pin number you want the output.

After creating a setup() function, which initializes and sets the initial values, theloop() function does precisely what its name suggests, and loops consecutively, allowing your program to change and respond. Use it to actively control the Arduino board.

Get the number of bytes (characters) available for reading, that’s what Serial.available() for.  This function check if there is some data available:

serial.read() function reads data received (“a” or “d”) from iPhone device in our case.

We use switch case to determine if data is “a” or  “d”.

digitalWrite(pinNumber, HIGH/LOW)function make our LED light ON or OFF on pin number 13.

All Set! Let’s upload code on Arduino Hardware.

Connect mac and Arduino with USB.

Make sure you have choose “Board:Arduino/Genuino Uno” and port “usbmodem1421Arduino/Genuino Uno”. Over all set up should look like this:

After uploading the code it’s time to setup circuit.

So the connections are as below:

Setting up BLE module

Connect RXD of A-9 BLE module -> TX of Arduino board.

Connect TXD of A-9 BLE module -> RX of Arduino board.

Connect VCC of A-9 BLE module -> 5V of Arduino board.

Connect GND of A-9 BLE module -> GND of Arduino board.

Setting up LED

Connect small leg of RED LED -> GND of Arduino board.

Connect big leg of RED LED -> Pin 13 of Arduino board.

Have a look at below circuit diagram:

Circuit Diagram

Yeah we have successfully set up our circuit. We are almost done setup for Arduino software and  and hardware.

Please support me by comment, like and share my face book page.

We are done half part till now. Let’s understand basic concept from iOS point of view and write some code.

Connection between BLE devices

I have used XCode v9.3.1, swift v4.3.1, iPhone iOS v11.3.1. If you are from non iOS background, then it might be difficult to understand code, but approach and logic is easy to understand. Some technical points:

Central : Our iOS device is central. It discovers services (which includes characteristics).

Peripheral : AT-09 BLE module is peripheral. We will use characteristics “FFE1” to write data “ON” and “OFF”.

CoreBluetooth Framework : In iOS this framework provides required classes and delegate methods to handle events like:

Discovering peripherals

Connecting peripherals

Discovering services

Discovering characteristics etc.

See below diagram how does BLE device connects to each other:

  • Bluetooth Central: This is the node that is trying to connect to a data source. Think of this as the client.
  • Bluetooth Peripheral: This is the node that is providing the primary data source. Think of this as the server.
  • Characteristic: A characteristic can be considered a variable. Characteristics are defined attribute types that contain a single logical value.
  • Service: A group of characteristics live under a “Service”. Services are collections of characteristics and relationships to other services that encapsulate the behavior of part of a device. Service are collection of data and associated behaviors describing a specific function or feature of a peripheral. For example, a heart rate sensor has a Heart Rate service. A peripheral can have more than one service.
  • Descriptors are defined attributes that describe a characteristic value.
  • Each service and characteristic is represented by a UUID which can be either a 16-bit or a 128-bit value.
  • Central’ Job
    • Scanning for peripherals
    • Connecting to a peripheral
    • Disconnecting from a peripheral
    • Discovering services
    • Discovering characteristics of a service
    • Subscribing to a characteristic
    • Receiving data from a characteristic
  • Peripheral’s Job
    • Advertising a service and characteristic
    • Adding service and characteristic to the PeripheralManager
    • Detecting of new subscribers to a characteristics
    • Detecting of unsubscribing
    • Handling of unready state of the device.

Note : Peripheral does not connect to peripheral. and central does not connect to central.

Framework

Core Bluetooth :

Overview

The Core Bluetooth framework provides the classes needed for your apps to communicate with devices that are equipped with Bluetooth low energy wireless technology.

Do not subclass any of the classes of the Core Bluetooth framework. Overriding these classes is unsupported and results in undefined behavior.

class CBCentral

The CBCentral class represents remote central devices that have connected to an app implementing the peripheral role on a local device. That is, when you are implementing the peripheral role using the CBPeripheralManager class, centrals that connect to your local peripheral are represented as CBCentral objects. Remote centrals are identified by universally unique identifiers (UUIDs), represented by NSUUID objects.

scan for other peripherals

Central devices scan for any advertising peripherals and displays it to the user

A central typically uses the information served up by peripherals to accomplish some particular task.

  • A central is kinda like the “boss”. It wants information from a bunch of its workers in order to accomplish a particular task.

It defines logic behind the Core bluetooth communication. It is able to scan, connect and disconnect peripherals and it also consumes information available at each peripheral. The central devices are usually mobile devices or tablets.

class CBPeripheral

The CBPeripheral class represents remote peripheral devices that your app—by means of a central manager (an instance of CBCentralManager)—has discovered advertising or is currently connected to. Peripherals are identified by universally unique identifiers (UUIDs), represented by NSUUID objects. Peripherals may contain one or more services or provide useful information about their connected signal strength.

advertise information as peripheral

  • A peripheral is kinda like the “worker”. It gathers and publishes data to that is consumed by other devices/means central.

The device that has information to share eg. Heart rate or temperature etc. The information can be pushed or advertise over the air.The peripheral devices are things like Heart rate monitor, BLE enables proximity tags, etc.

The following image defines the relationship between central and peripherals:

In the above scenario iOS devices (Central) communicate with the Heart rate Monitoring system (Peripheral) to get heart rate information and shows it on a device.

How Centrals Communicate with Peripherals?

Advertising is the primary way that peripherals make their presence known via Bluetooth LE.

In addition to advertising their existence, advertising packets can contain some data, such as the peripheral’s name. It can also include some extra data related to what the peripheral collects. For example, in the case of a heart rate monitor, the packet also provides heartbeats per minute (BPM) data.

The job of a central is to scan for these advertising packets, identify any peripherals it finds relevant, and connect to individual devices for more information.

class CBService

CBService and its subclass CBMutableService represent a peripheral’s service—a collection of data and associated behaviors for accomplishing a function or feature of a device (or portions of that device). CBService objects in particular represent services of a remote peripheral device (represented by a CBPeripheral object). Services are either primary or secondary and may contain a number of characteristics or included services (references to other services).

A CBPeripheral holds services (each defined as a CBService), and each CBService holds CBCharacteristics.

The following diagram shows the hierarchy of the CBPeripheral:

Let’s code now:

Below is the user interface part:

I will discuss some critical code only here which is very important to understand:

In Below code snippet we are initializing CBCentralManager and telling that CBCentralManager object’s(which is manager)  delegate is self (means we will implement delegate methods in ViewController class). The discover peripheral method is called when we click on “Discover Devices Button”

After successfully discover below delegate method didDiscoverPeripheral will be called:

We check if peripheral name is “MLT-05”, We show this information on user interface: 

Next, we hold reference of discovered peripheral in global variable and this time set peripheral’s delegate to self:

And after discovering peripheral we stop scanning.

Overall above code looks like this:

Yeah successfully discovered 🙂 🙂 🙂

Let’s connect now:

The below method will be called when user clicks on Connect button.

The code:

will call

Let’s see it’s implementation:

isMyPeripheralConected – this is the global variable we are holding reference to.

We are setting instance of view controller (self) as delegate of peripheral.

and then let’s discover characteristics after discovered services:

peripheral.discoverCharacteristics will call delegate methoddidDiscoverCharacteristicsFor:

In above code we are holding discover characteristic “FFE1” in global variable myCharacteristic. At this stage we can write  “a” and “d” for “ON” and “OFF” respectively.

Above methods are called when we click on ON and OFF buttons on iOS app.

The below method is responsible to send “a” (click on ON) and “d” (click on OFF) as bytes to our Arduino.

Putting all code together looks like :

Done!

Mistakes/Challenges I faced:

  • I ordered HC-05 module from Amazon which iPhone does not support.
  • While uploading code to Arduino hardware make sure there is no connection to LED and BLE Module. Upload Arduino code first then setup your circuit.
  • Finding peripheral characteristic value (FFE1) to write value (“a” for “ON” & “d” for “OFF”).

Happy coding, hope you enjoyed it :).

Please support me by comment, like and share my face book page.

 

.

 

 

 

React Native, Day 5, Understanding Props

Hello guys, hope you are doing good. Before starting with props, It is suggested to have a look at previous tutorials listed below:

React Native Day 1, Understanding Technology, Fundamentals and React

React Native Day 2, Creating first React Native App

React Native, Day 3, Running app on iOS simulator and exploring some cool stuffs

React Native, Day 4, Breaking down code structure

In this tutorial we are going to talk about properties. I will use the fancy term props  😎

Please support us by comment, like and share our facebook page.

Props

  • Conceptually, components are like JavaScript functions and property/props are parameters to these functions.
  • we can customize components bases on parameters/props/properties.
  • We can assign different properties to different instances of a component. Basically we can use different instances of a component with different props.

Simplest layman examples can be like:

  • Water is a component then color is property/props.
  • Your home is a component and wall paint is property.
  • Access properties value using
  • You can set property value this way:

  • Lets look at below app.js file’s code:

Output:

Let’s closely look at the code:

Parent component is App

Child component is HelloApp

We are passing property from parent component “App” to child component “HelloApp”

Here we have a component called HelloApp and we wanted to render it and pass user’s name to it as name prop/property.

To do so we would need to use JSX notation <HelloApp name="Alok" />, where name is a prop name and Alok wrapped in single quotes is a value.

You can also use any JavaScript expression wrapped in curly brackets {}. For instance, <HelloApp name={'Amit'} />.

Or you can use single quotes like <HelloApp name='Rahul' />.

we will use this.props.name to access name prop value passed from the parent component in render function.

Multiple props

Yes it’s very easy. Look at the below code:

In the above code i have used hobby as property, so simple isn’t it.

Output:

 

 

Happy coding!!! 🙂

Please support us by comment, like and share our facebook page.

React Native, Day 3, Running app on iOS simulator and exploring some cool stuffs

Hello guys. I will suggest you to go through my previous tutorials for better understanding of this tutorial:

Till now we understand basic stuff about react, react native and running on android device. In this tutorial we will learn about running react native app on iOS simulator and playing around with some other command line options like restarting package manager, sending link to mail & phone number, printing barcode and toggling between development and production mode. I have used the same code base from previous tutorial.

Please support us by comment, like and share our facebook page.

Open terminal and follow below steps:

Change directory to your project – In my case I have my project (AwesomeProject) at below path:

Now we need to start npm

This command will start package manager and will prompt with some options. See logs from my terminal:

If you notice there are some options to run our app and this time I have choose to run it on iOS simulator. From below options, I just pressed “i” and it started loading iOS simulator.

It installs Expo client on iOS simulator.

 

This is how expo client looks like:
This is how expo client looks like, Just click on got it icon and you will see live running iOS app on simulator.

 

 

That's it. We have successfully run react native app on iOS simulator :).
That’s it. We have successfully run react native app on iOS simulator :).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Let’s see some other options as well –

Press “s”:

I have played around with other options (a, s, q, r, d) as well and they do the same as expected.

Awesome man isn’t.

Happy Coding!!

Please support us by comment, like and share our facebook page.

React Native Day 2, Creating first React Native App

Hello everyone. Let’s continue our journey with react native. I will suggest you guys to go through day one talk.

Please support us by comment, like and share our facebook page.

I have attached source code along with log files at the end of this tutorial..

What is Native ?

In context of react native, it relates to the native look and feel of iOS and android controls. React Native uses the same UI building blocks as native iOS and Android apps. We just put those building blocks together using JavaScript and React.

Have a ☕ and start stuff –

Environment set up

React Native uses Node.js, a JavaScript runtime to build our JavaScript code. It is open source.

Node.js – A run time environment/simulation for executing javascript code outside our browser.
Facebook’s React Native uses Node.js to build javascript code.

Lets install Node from here.

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

In the above screen shot if you notice there is npm, so what is npm ?

NPM (Node Package Manager)

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

NPM is a package manager, a online repository from where we can download some packages (reusable code/library) as well as we can share our packages (reusable code/library) also. If you are coming from mobile apps development experience then you can think of it (npm) as Cocoapods, Carthrage or Gradle. With the help of npm we can download some command line tools.

Let’s create our first react native app.

install the create-react-native-app command line utility. On terminal type it:

After pressing enter this is what i get in my terminal:

As per the above suggestion in command prompt for update i then run update command as follows:

Create-react-native tools makes it easy for us to create a react native project.

We do not need to use Xcode or Android Studio to create a react native app.

At my end I created a folder named “LearningReactNative” in desktop.

Lets change directory using cd command in terminal and hitting enter:

After switching directory successfully, lets name our project “AwesomeProject”, type below command in terminal and hit enter:

This is what i got in my terminal, and thanks god, at the bottom i get success message:

Please support us by comment, like and share our facebook page.

I was just excited to see actually what happened in my folder structure and below is the screen shot:

 

Great!

Now lets run below commands:

npm start will start a development server for you, and print a QR code.

I get some thing like this:

 

 

 

 

Running app

Now we need to install Expo client app on iOS or Android device. Connect your device to the same wireless network as your computer. Now use Expo app to scan QR code and it will run your app.

These are the screen shot of app running on device:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I made some changes in app.js file, look at (Shake your phone to open the developer menu test test).:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Congratulations you have created your first app :).

Happy Coding 🙂 ☕

Please support us by comment, like and share our facebook page.

All the resources can be find here.