| title | description |
|---|---|
How to Find Code For Some UI |
Given some UI in the app, how does one find the code that backs that UI? |
You need to have Xcode installed, running a version of Eigen (here are the docs). You don't need to have Eigen and Emission linked if you just want to find the code – linking is only required if you want to debug/modify any React Native components in Emission.
View controllers are the main unit of composition for iOS apps, and Artsy's app is no exception. Even our React Native components are represented by view controllers. Finding the code for some piece of user interface is really about finding its view controller. We'll use Xcode's visual debugger for that.
Build-and-run the app (the "play" button in Xcode, or ⌘R) and wait for it to launch in the simulator. In the simulator, navigate to the UI that you're trying to find the code for. Then open Xcode's visual debugger (it's the weird little icon near the bottom of the screen):
Xcode will show you a visual debugger. Click somewhere – anywhere, really – in the user interface that you're trying to locate code for. When you select the element (single-click!) then the jump bar at the top of the screen will show you the ancestors of the selected view. View controllers are in orange.
You're looking for the right-most controller. This is the "nearest ancestor" to the selected view. You can click on the jump bar item for the controller to focus it.
In this example, the controller is ARHomeComponentViewController. We can then use Xcode's "quick open" (⌘⇧O) to
navigate to the file quickly. If the code is in Eigen, we're done! If the code is in Emission (all React Native
controllers end with ComponentViewController) then we have to dig deeper. Let's continue the above example.
Open the implementation file for the component controller (ie: ARHomeComponentViewController.m) and look for the
call to the super's init method initWithEmission:moduleName:initialProperties. Note the second
parameter, moduleName.
To get from the Objective-C controller to the React Native component, open Emission's AppRegistry.tsx
file and look for the string literal that matches the moduleName ("Home", in this case, located
here). This will point you to the top-level React Native component that represents this controller
(here in our example), and you can drill down the component hierarchy from here.