DEV Community

loading...
Cover image for Navigating Xcode for React Native Developers (with a web background)

Navigating Xcode for React Native Developers (with a web background)

Spencer Carli
Student. Teacher. Firefighter. Pizza fiend. I teach others while teaching myself, typically with React Native.
Originally published at reactnativeschool.com ・4 min read

If you're coming into React Native development from a web background you may be intimidated by using a full blown IDE like Xcode. Today I'd like to give you a run down of how to use this super powerful tool.

You won't need to use it often but, as they say, knowledge is power! Let's get to it.

First let's get a rundown of the main areas of Xcode.

Untitled

This images comes directly from Apple's Workspace Window Overview. For React Native development you'll spend most of your time in the Toolbar, Navigator area, and the Editor area.

Screen_Shot_2021-03-29_at_1.42.37_PM

Taking a look at the navigator area you'll see two folders - "Pods" and one that aligns with your project name.

"Pods" is referring to Cocoapods which is the dependency manager (like NPM) for Swift and Objective-C projects. Along those lines you dependencies are defined in the Podfile in this folder (like a package.json).

Screen_Shot_2021-03-29_at_1.43.47_PM

Next, taking a look at the Toolbar, is where you can select which device you want to run your app on. It will populate based on the various simulators you have installed on your system. Press the "play" button to start building the app and the "stop" button to stop the app.

Screen_Shot_2021-03-29_at_1.45.00_PM

Taking a dive into the directory that aligns with your project name you'll find another folder with the same name. This is where your native app lives. You may find yourself needing to go into AppDelegate.m from time to time. This is the entry point of your app.

Within that file you'll see a few things happening. The function you'll most often be working with is didFinishLaunchingWithOptions which will run when your app has finished launching (it's at this point that React Native will actually start).

Screen_Shot_2021-03-29_at_1.46.02_PM

Next is Images.xcassets. This folder is where any native images will go. The only thing you'll really use this for is images that need to be available before React Native is ready. This really just ends up being:

  • App icons (used on the user's screen, app store listing, etc.)
  • Images related to the splash screen (shown between app open and app ready)

Screen_Shot_2021-03-29_at_1.47.06_PM

Also in here is Info.plist this is the configuration home of your app. Whenever you need to request certain permissions this is where you'll put your permission request reason. It also manages a bunch of the configuration of your app (such as supported orientation, version, build number, etc.)

Screen_Shot_2021-03-29_at_1.48.18_PM

LaunchScreen.storyboard is the screen that is shown from when your app is first pressed to when it's ready (able to be used). Typically this is just a few milliseconds... this is where you would change it.

Screen_Shot_2021-03-29_at_1.50.22_PM

On the top row of the navigator area you'll find the issue navigator. This will automatically open if you ever have something wrong preventing a build or, as in the screenshot about, general warnings in your project.

Screen_Shot_2021-03-29_at_1.51.59_PM

Screen_Shot_2021-03-29_at_1.52.18_PM

If you want to build your app for production you'll want to go to the Toolbar and change your target device to "Any iOS Device". Then in the Apple menu select Product > Archive to build the app.

Screen_Shot_2021-03-29_at_1.54.05_PM

Jumping back over to the Navigator area if you select the directory that corresponds with your project name you'll get a new set of screens.

Within the Editor area select the [Project Name] within "Targets" and you'll see a set of options across the top of the editor area. We'll take a look at "General" for now.

This is essentially a GUI to edit your Info.plist. This screen specifically handles a lot of your configuration.

  • App display name (shown on the user's screen)
  • Bundle Identifier (used for setting certificates and permissions)
  • Version and build number
  • Target devices and OS versions
  • App icon and launch screen source files

Screen_Shot_2021-03-29_at_1.54.11_PM

In that same submenu is "Signing & Capabilities". This is used to associate the app with the developer account that will be used to sign your app before uploading it.


And that's a basic rundown of the main screens within Xcode that I use when building React Native apps! Have a question about one? Let me know!

Discussion (0)

Forem Open with the Forem app