Tutorials React JS Getting Started with React-Native for iOS and Android

Getting Started with React-Native for iOS and Android

Hey folks, React-Native is happening Framework for Mobility in recent times due to it’s tremendous success which was developed by Facebook. Overall it’s a new way of developing native iOS and Android applications, primarily using a single codebase on React framework for web.

The idea is to write the core application in Javascript and React-Native will compile native iOS and Android applications. Companies like Facebook, Instagram, Netflix, Airbnb use React-Native.

Advantages of using React-Native

  • Building native mobile apps using JavaScript and React
  • No need to recompile every-time to check the changes
  • Use native code when you need
  • Maximum code reuse between platforms
  • Reduces cost of development
  • Better performance for mobile environment

The following tutorials will guide you through developing your first React-Native application for both iOS and Android, React-Native 0.44 is the version used.

Getting Started

For setting up the environment, install React-Native and required dependencies i.e home brew, node, watchman, Xcode and Android development environment refer installation link.

There are so many IDEs out there for development and it’s difficult for us to choose the right editor for a particular programming language. While working with React Native, I did some digging and found below IDEs which are suitable for mobile app development:

  • SubLime
  • Atom
  • Visual Studio Code

I use “Visual Studio Code” in my macOS as IDE of my choice.

Creating a new React Native app

Create a new folder in any specific location you wish using terminal with the following command

$ mkdir ReactProject
$ cd ReactProject
$ ReactProject~ react-native init HelloWorld

 

Running your React Native application

Let’s check if the application created works fine by compiling and building it on either iOS Simulator or Android emulator. There are two ways we can proceed as listed below:
By React CLI in Terminal using commands.

By React CLI in Terminal using commands.

$ cd HelloWorld

To run the iOS app, execute following command in your terminal.

$ HelloWorld~ react-native run-ios

Running React native iOS

To run the Android app, execute following command in your terminal.

$ HelloWorld~ react-native run-android

Using Visual Studio Code IDE

Let’s import code folder in VS code IDE and make sure you have installed React-Native plugins in Extension Window (⌘ + ⇧ + x) before building the app.

After importing go to Debug window (⌘ + ⇧ + d) and select the Environment as React-Native which will create configuration file named launch.json.

Finally, we are done with the configuration setup in VS code IDE. Now, select the required platform from the Debug drop-down and click on Run.

Modifying your app

Now that you have successfully run the app, let’s modify it.

Note: main root file for iOS will be index.ios.js and for Android index.android.js in the project structure.

That’s it! We’ve successfully built and modified the first React Native app.

Total
0
Shares
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
Creating Login Screen in React Native | StackTips
4 years ago

[…] IDE, and relevant Plugins for React-Naive. Refer our beginners guide for more information on the Visual Studio Code IDE plugin […]

trackback
Integrate Facebook Login into a React Native iOS App | StackTips
4 years ago

[…] prerequisites are already available in your development machine. If not, go back to our articles Getting Started with React-Native for iOS and Android and Creating Login Screen in React […]

trackback
Creating Login Screen in React Native | Programming Biters
4 years ago

[…] IDE, and relevant Plugins for React-Naive. Refer our beginners guide for more information on the Visual Studio Code IDE plugin […]

trackback
Integrate Facebook Login into a React Native iOS App | Programming Biters
4 years ago

[…] prerequisites are already available in your development machine. If not, go back to our articles Getting Started with React-Native for iOS and Android and Creating Login Screen in React […]

InnovationM
InnovationM
4 years ago

Innovationm, awarded as one of the Best Software Development Company in India, builds End to End Technology Solutions for its Customers on Android, iOS, iPad, Web, Middle-Ware, Server Back-End, UI/UX Design, AWS, DevOps & Cloud.For more visit http://www.innovationm.com

Previous Post

How to Generate Valid RSS Feed for your Laravel Application?

Next Post
Bootstrap4 Tutorials

Creating Bootstrap4 Fixed NavBar with Shadow on Scroll

By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
5
0
Would love your thoughts, please comment.x
()
x