React Native is beginning to change the game in the mobile development world. Using the skills you already have, as a web developer, you can get a set of familiar methods to build user interfaces for mobile devices. In this book, we'll walk you through many React Natives features while developing a note-taking application, which we call React Notes. While building the essential features, such as creating notes, saving notes to the device, viewing a list of saved notes, and navigating between screens, you'll learn the fundamental skills you need to develop an app of your own. You'll also have the opportunity to go beyond the basics by adding the ability to store images and geolocation data with notes. Functionality is only a part of what makes a great app — it has to be great looking as well, so we've made sure to equip you with a thorough understanding of layout and styles. By the end of the book, you will have developed a fully featured application from start to finish and have all the skills you need to share your React Native applications with the world!
In this chapter, we'll introduce you to React Notes, the sample application that you'll learn how to build. We'll even point you in the right direction if you're anxious to start tinkering with the sample app to see what happens.
This chapter will focus on the following:
Installing Xcode on Mac OS X
Running the sample application in the iOS simulator
Taking a look at the sample application features
Modifying the sample application
Getting the tools to run the sample application is simple in OS X. The easiest way to install Xcode is through the App Store. In the top right-hand bar, search for the term Xcode, and from the list of results navigate to the Xcode store page, as shown in the following screenshot:
Install or update to the latest version of Xcode by clicking on the button.
You also require the command-line tools (CLT) for Xcode. A prompt will display when they need to be installed. You can also download the command-line tools directly from the Downloads for Apple developers at https://developer.apple.com/downloads/.
The source code contains the completed application that we will build throughout the book. We are going to start with running the application. The source code is already configured to run in the iOS simulator:
Open the
ReactNotes.xcodeprojin theios/ folderin Xcode or from the command line:ReactNotes$ open ios/ReactNotes.xcodeproj/
Tip
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
This book targets iPhone 6 for development; although it does work on other iOS versions, we recommend using this one. Make sure that the iPhone 6 is selected in the iOS simulator device drop-down menu. If you own an iPhone 6, you may select an iOS Device:
Press the Run button (F5) to launch the iOS simulator:
The goal of this book is to introduce you to how quickly React Native can get you up and running to create user interfaces. No matter what type of mobile application you build, there are certain features that you're very likely to have. Your UI will probably have multiple screens, so you'll need the ability to navigate between them. In Chapter 3, Beginning with the Example Application we will start laying the foundation for navigation and the note screen:
Not long after you have seen a bare-bones application, you'll want to start making it look good. Let us dive deep into styles and layout in Chapter 4, Working with Styles and Layout, and carry those lessons throughout the rest of the book.
It's hard to imagine an application that doesn't have lists of data, and React Notes is no exception. We'll cover working with lists in Chapter 5, Displaying and Saving Data:
One of the capabilities that sets mobile applications apart from web applications is the ability to access GPS data. We present capturing geolocation data using maps in Chapter 6, Working with Geolocation and Maps:
It is very common to capture photos on mobile devices. The camera screen will allow users to attach photos to their notes and save them for viewing later. You will learn how to add camera support to your applications in Chapter 7, Using Native Modules:
Note
Note that the camera screen will be black in the iOS simulator. This is also explained later in Chapter 7, Using Native Modules.
If you are the adventurous type, then feel free to start playing around and modifying the sample application code. There are two steps to switch the iOS application into development mode:
Open the
AppDelegate.mfile in Xcode and uncomment thejsCodeLocationassignment fromOPTION 1and comment out the statement inOPTION 2:NSURL *jsCodeLocation; /** * Loading JavaScript code - uncomment the one you want. * * OPTION 1 * Load from development server. Start the server from the repository root: * * $ npm start * * To run on device, change `localhost` to the IP address of your computer * (you can get this by typing `ifconfig` into the terminal and selecting the * `inet` value under `en0:`) and make sure your computer and iOS device are * on the same Wi-Fi network. */ jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; /** * OPTION 2 * Load from pre-bundled file on disk. To re-generate the static bundle * from the root of your project directory, run * * $ react-native bundle --minify * * see http://facebook.github.io/react-native/docs/runningondevice.html */ //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
Then, navigate to Product | Scheme | Edit Scheme…. Select Run, and under the Info tab change Build Configuration from Release to Debug, as shown:
Run (F5) from Xcode to start the application in development mode. Using the
Shakegesture from the iOS simulator (Hardware | Shake |Gesture) will show the development menu. It may be necessary to runreact-native startfrom the command line to load the JavaScript bundle.
That's it! From here you can freely modify any of the source code in index.ios.js or in the Components folder. Later we will explain how to quickly reload your code in the simulator without having to recompile from Xcode.
This chapter gave us a brief overview of the type of functionality and user interface we will introduce throughout the rest of the book. We will cover features such as navigation, lists, user inputs, and so on in depth. With Xcode already set up, you will be able to jump right in to iOS development, and for Android developers we begin the setup in Chapter 3, Beginning with the Example Application. Next, we will demonstrate the value that React Native offers in rapid mobile development using the skills you have learned as a web developer.
Let's get started!
