Learn how to build your first React Native app with important basic concepts and where to go from here! We live in the world of a variety of mobile devices majorly dominated by two platforms, iOS, and Android. It is a two-horse race and I am sure we can all agree on that. Building a mobile application is not an easy task though. For iOS, you write code using Objective-C or Swift and for Android, you will find yourself using Java. Apart from different programming languages used to create a mobile that can run on each of the two platforms, the toolchains are entirely different too for both of these mobile platforms. Many modern-day developers use a specific set of technology that is used to build web applications: HTML, CSS, and JavaScript. There are different frameworks that fall under the category commonly known as Hybrid applications. You can use almost one set of source code for developing the application for both iOS and Android platforms. In recent years, hybrid frameworks have evolved coming from web view to use native APIs. This cross-platform approach of developing a mobile application comes with its own pros and cons. Pros such as being less-time consuming and cost-effective and cons include performance issues. One great option that falls under the umbrella of cross-platform development is React Native. Developed and used by Facebook as well others such as Tesla, Walmart, Uber Eats, Instagram, Discord, Wix and so on. React Native is based on Facebook’s web library ReactJS. What are you going to learn? In this tutorial, you will learn the following things: What is React Native? Setting up the Development Environment Use React Native CLI Run a React Native App What is App.js? Hot Reloading AppRegistry Build your first React Native App Learn about different UI components Component View Object StyleSheet Component Text Create a list with FlatList Learning Path for React Native What is React Native? In a nutshell, React Native allows you to build mobile applications that look, feel and perform much more like native applications. It uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. Good thing for developers is that they can use almost the same concepts that are being used for building web applications. If you are familiar with Reactjs or come from front-end development background, React uses a virtual DOM which acts as a shadow to real DOM available. When an element changes, that change is reflected on the real DOM by Virtual DOM using a node that corresponds to each element. However, in React Native, there is no DOM rather than Native Components which are provided by platforms such as iOS and Android. There are no web views here. React Native has an instance of to execute JS code when an application starts. React Native uses RCTBridgeModule to make a connection between native code and JavaScript code. JavaScriptCore In simple words, React Native brings the React to mobile app development. Its goal isn’t to write the code once and run it on any platform. The main goal here is to learn once and write-anywhere. An important distinction to make. React Native is still relatively new, as at the time of writing this post, it is in its version . 0.57 Pre-requisites: Setting Up Development Environment To dive deeply in React Native’s ecosystem, we need to install a few things first to get started. Let us go through one of them. Nodejs & Watchman React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. If you do not already have Node.js installed, it’s time to get it from its official website . I recommend installing LTS ( ) version which is also I am using personally. here long-term support 10.x.x Watchman is a tool developed by Facebook for watching file changes. It is highly recommended you install it for better performance. For Mac users, You will need the macOS package to install : . homebrew watchman brew install watchman For Windows users, there is no so you can skip this step but you need to have Nodejs as well as as React Native's recent version requires it. watchman python2 Lastly, everyone (irrespective of the OS you are using) need to install theJava SE Development Kit (JDK) that can be found . Make sure the version you install is at least or more than . here >= 8 Native SDKs For macOS developers, you can install Xcode which is free to develop iOS applications. If you want to develop for Android, setting up its development environment can be a bit tedious if you are new to this. You will be installing which is a completely free tool to develop Android apps in its native language. You will be installing a list of utilities for this process and then setting path variables for the first time, so I am recommending to go through the exact link which are official setup instructions provided by Facebook. Android Studio here React Native CLI Once you are done with the development environment setup process and necessary tools, you can take a deep breath right now. We are going to start building our first REACT NATIVE APP. In order to start, we need one more tool. Using (a package manager, ) you are now going to install . Open your terminal and run the following command. npm which you installed using Node.js react-native-cli This CLI tool is used to scaffold a starter project containing everything you need to build and run a React Native app. installs this CLI tool as a . npm global module To verify that the installation process was a success, you can run the command below and it will output you the current version of the CLI tool. Running a React Native App To get started we need to create a project directory using the CLI tool just installed. Open up your terminal and run the following. You can name it whatever you want. Once the process is done, traverse inside the project directory. You will be welcomed by a set of files like below. From above let us now take a brief look at the files or directories that are essential for us to understand: the first file in any React Native app that is the entry point of the app development process. Whatever you write inside this file, it will get displayed on the mobile device. App.js is a folder which contains all the dependencies ( ) that are used to develop and run this application. node_modules/ or packages is the entry point to trigger the app on a device or simulator index.js is the folder containing an Xcode project and the code required to bootstrap this app for iOS devices ios is the folder containing android related code to bootstrap this app for Android devices android where every dependency installed gets listed package.json You can ignore the other files as of now. Running the Application The tool comes with some default snippets of code. To see it in action, you will have to run the application using a terminal. I am going to use an iOS simulator and an Android emulator for this purpose. Windows developers can ignore the iOS part. react-native-cli Do note that, we have not made any changes in the source code of the application. To run the app, we need to trigger the below command first. This will start the metro bundler to watch for any file changes in a file in your project. Make sure this command is running in a separate terminal window or a tab when you are building your project for or . .js iOS Android Running on iOS To run the app with whatever current content it has on an iOS simulator, you can run the following command below in the second terminal window. This command builds your app and starts it on iOS simulator. This process consumes some good amount of time when building the necessary iOS files for the first time for any React Native app. It will also open up a simulator device for you like below when the process is done. This iOS simulator is the default one with current Xcode version you have. However, you can run any sim device by adding a flag. By running the command: you can check out which devices you have available as simulators. xcrun simctl list devices The last or against each listed device in above image tells you which devices are currently running. To build and run for another device, you can run the following command. Booted Shutdown where is the value that you can look up through the last command I mentioned. "iPhone 8 Plus" Running on Android You will need an Android device to run your React Native Android app. This can be either a physical Android device or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. If you wish to run it on a real device, you can follow the complete set of instructions For running on an Android emulator, open the Android Studio, and choose the option to ‘open an existing project/folder’. Once the project gets opened and is indexed, you will see an icon looking exactly like below image in the right corner. here . This is an option for enabling an Android Virtual Device ( ). If you have just installed Android Studio, you will likely need to create a new AVD. After the virtual device is running, you can run the command from your terminal window to open up the application. AVD react-native run-android How to Modify App.js? To see the app in action on both the devices, let us modify with the code below. App.js The result of the following modification can be seen if you press on iOS and double on Android. Cmd + R R Enable Hot Reloading Hot Reloading feature in react native application helps to display any updates occur in UI, whenever you save anything in react native app-code. On enabling this feature, you do not have to press on iOS and double on Android again for seeing the changes on the UI you just made. Cmd + R R To enable this feature, all you have to do is press depending on your OS, and select from the popup menu that appears as shown above. Ctrl + M/Cmd + M Enable Hot Reloading What is AppRegistry? The file that renders this App component is in the root directory which has the following code. index.js is the entry point to run a React Native application. App component or any other root component in the app should register by using such that the native system can load the bundle of the app and run the app by starting . AppRegistry AppRegistry.registerComponent AppRegistry.runApplication You can read more about in-detail . AppRegistry here Baby Steps: First React Native App In this section, you are going to build your first React Native app. To get started, we have already generated a React Native project using the cli tool. The only thing now you have to understand is what are components? are the visual elements that you see on the screen in a React Native app. There are several components made available for you to use by the React Native core. To understand this better, we can categorize these components in six broad categories: Components Basic or Core components such as , , , , , View Text Image ScrollView TextInput StyleSheet List components such as and FlatList SectionList User Interface or Form Control components such as , , , Picker Slider Button Switch iOS Specific components such as , , , ActionSheetIOS SegmentedControlIOS AlertIOS PushNotificationsIOS Android Specific components such as , , , , DatePickerAndroid TimePickerAndroid ViewPagerAndroid ToastAndroid PermissionsAndroid Other/Miscellaneous components such as , , , , , , , , , , and Alert Animated CameraRoll Dimensions Clipboard StatusBar Linking Keyboard ActivityIndicator WebView Modal Getting in detail about each of them is out of the scope of this article and will be a tedious way to learn things initially. Instead, we are going to use a project-based approach to learn your way through them. There are many more components and APIs available in React Native core that you can look at the and from time to time you will need to. official documentation What are we building? You are going to build a small application to just familiarize yourself with basic components. The app is shown in the image below is going to be the end result. The above is nothing but a list of text coming directly from the component’s state. Create a new directory in the root of the project and inside create a new file called with the following snippet of code. src/components components/ EmojiDict.js Accordingly, we have to modify file in order to display the result of this component. App.js Now if you take a look at the simulator screen you will see the following result. Take a look at the file first. We are importing basic components from React Native. We start by declaring a component, which is the basic building block in React Native file. It maps to fundamental native iOS ( ) and Android ( ) components, hence the name. You can think this component as mere element from HTML where all other elements are placed inside. Hence, a component can contain nested components. What is going on? EmojiDict View UIView View div View component puts a container element that supports layout styling with and other styles through CSS. We are providing styles to View via . Hence, you can say that components are primarily used for styling and layout of children elements. View flexbox StyleSheet View in React Native provides an API to create styles inside the component file. It takes a JavaScript object as it does above, and returns a new object from it. There are no or in React Native like in web development. To create a new style object you use method. StyleSheet Stylesheet classes ids StyleSheet.create() The way we have defined styles by creating an object is the preferred way. Not only it helps you organize styles and keep them separate, but these styles when defined in this manner are also sent through the native render bridge only once. The component is in many ways just like the component, except that it is specifically available to display text. Also, like the component, it supports styling. Right now we are using to style and center the anything inside the component. is an algorithm to specify the layout for a component for its children to follow the same pattern. Suppose if we modify it as below: Text View View flexbox View Flexbox You will get the following result on refreshing the simulator. The way we are creating a list of emojis isn’t a pragmatic approach to handle data whether it comes from a third party API or manage by the component’s state and render it as a list as we do above. Let us convert our simple view into . FlatList is cross-platform, by default vertical way to display a list of data items. It requires two props: and . is the source of information for the list. takes one item from the source and returns a formatted component to render. Styles that can be applied to a component is done by the prop that accepts the value of object. What we have above is the simplest version of flatlist. Moreover, FlatList in React Native has support to pull to refresh interaction and horizontal display mode. FlatList data renderItem data renderItem FlatList contentContainerStyle Stylesheet This completes our first React Native App. I am sure, you might have learned a thing or two. It is a just a basic component that renders a list of items. More on Learning React Native With lack of up to date resources or not many resources you will find on React Native concretely, I urge to stick with you learn by doing process and get as much as hands on experience in this field as you can. I did struggle when I started learning React Native, coming from a Web Development background. Here is what I think you can do to advance with React Native development. Start with basics This article just provides you with an overview of what inside the React Native app development process and how things work behind the scenes, briefly. I often come across (especially through campaign) developers who struggle to learn a new framework with little no background in specific the programming language. My advice, before you leap to make gigantic projects, start with the basics. Learn the concepts as each specific component to the curve, make sure to apply them as much as you can and build small things. #100DaysOfCode For example, today learned about using component in this article. Try creating a list with your own dataset or find a mock/fake data set on the internet and try to build a small app out of it. Always remember the feeling you got from creating your first program. Do you remember that sense of accomplishment? FlatList Hello World Take small steps, build small things at first before dip your toes deep in the complexity of state management libraries such as Redux and Mobx, or persisting data, using third party APIs, using TypeScript or Flow, and so on. These are just tools, you do not need to know them on day one ( ). If you are new to JavaScript, make sure you are clear with the basic ES6 features such as classes, arrow functions etc. Then, you must go through the basic ReactJS concepts such as props, state, and stateless components in general. but I am not saying you have to never learn about them. The keyword here is that they are TOOLS In summary, take a look at: ES6 Features ReactJS Components API Setting up a development environment for React Native Flexbox Advance your way Once you have basic concepts clear in your mind and have played around a bit to get some amount of hands-on experience, it is time to advance further. Start building bigger apps that work or behave like a real application and interact with real-time data. Here is a list of things you can learn to advance in your journey. Offline data storage with AsyncStorage Working with third-party APIs Maps Splash Screens Navigation Redux (for state management) Redux Saga and Persist Tests and TDD Push notifications UI Animations Build and publish your app Continuous Delivery or CI Do note that, these are just broad topics to get you started. There are many other things you will learn along the way. Don’t get overwhelmed by that. Personal Challenges: What do you want out of it? Maybe you to become professional a React Native developer and work in an organization that uses this tech framework or maybe you want to build apps for your clients/customers. Setting your own personal challenges in the way is a great way to learn. Make a commitment to yourself and work on it. Find apps on your phone or on stores that you want to clone or add an extra feature as a functionality, or learn about the user interface. Do not get overwhelmed by the number of mistakes you do or the errors you get. Getting frustrated and ranting/complaining about it over the internet all day is easy but understand this is that, it will not solve your problems or make you a better developer. All of this is a part of your journey. Keep reminding yourself that. Conclusion If you are getting started in React Native development, let us do this together. I am available on Twitter ( ) 👇 where you can DM me _The latest Tweets from Aman Mittal ⚛️☕ (@amanhimself). 👨‍💻#Developer #Fullstack #Nodejs #ReactNative | 📖 #Blogger…_twitter.com Aman Mittal ⚛️☕ (@amanhimself) | Twitter I often write on web technologies, but these my main concern is to provide content on React Native. You can either follow me on Medium or you can below to receive 📧 subscribe to my weekly newsletter all my tutorials straight in your inbox The complete code for this tutorial is available here👇. _⚛️ + 📱 React Native Things. Contribute to amandeepmittal/react-native-workspace development by creating an account on…_github.com amandeepmittal/react-native-workspace

Flow

Facebook

Instagram

Oracle

Tesla

Twitter

Uber

Styling The React Native Way

My Top Tutorials in Web Development and React Native in 2018

Newsletter

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - Most Authentic Developer Advocate of the Year

Too Long; Didn't Read

Getting Started with React Native in 2019: Build Your First App

Getting Started with React Native in 2019: Build Your First App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps