Intro to React-Native Concepts for iOS Developers
Written by: Tripti Kumar, Agile Software Engineer, TribalScale
📫 Subscribe to receive our content here.
💬 Have any questions about our development capabilities? Click here to chat with one of our experts!
Being an iOS developer my whole life, I didn’t have enough motivation to learn React-Native. Also I was comfortable with all the native features and the ease of developing any complex features in a legit (Apple approved) way. One day I was introduced to React-Native by Daniel Friyia. Being on a high drive for self-motivated pursuit of knowledge, we both made a pact to mentor each other. I made it a high priority to make iOS sound much cooler than what it is and he was just being truthful about the super cool features of React-Native (RN).😎
As an iOS developer, my brain took some time to get around the incredible concepts of RN. Together we both came up with an idea of making it easier for all intrigued learners. Let’s get started!!
The following components will definitely add more to your understanding.
UI Development — From UIKit using Storyboards to JSX
Storyboards are a visual representation of the core elements of UIKit Framework. It is extremely useful to work with for both designers as well as developers. We can create a prototype of the app, even before starting the development. We can update the interface quite easily and completely avoid rummaging through the code.
Storyboards and JSX differ greatly in how they work, which is often a barrier to entry for Native iOS devs. This is because storyboarding was created with object-oriented principles in mind. Storyboards came from a time period when most languages were compiled and hot reloading seemed impossible.
JSX, however, was created as part of React which has more modern ways of handling UI. It uses functional programming as its base which allows for less side effects. Additionally, the fact JavaScript is a scripting language allows us to hot reload our apps to see changes in real-time.
When using JSX, we write out code in a markup that resembles HTML and use hooks like useState so that the UI isn’t managing global variables, but updating itself in response to state changes. React-Native JSX Components are also able to accommodate global state changes using libraries like redux.
Navigation — Segues vs Stack Pattern
As we were talking about storyboards earlier, this points us to a way of navigating between different views using segues. Inside the storyboard interface, we can use segues to pre-define the navigation flow. The segue can be initiated from a button click, table view cell selection, a gesture recognizer touch/tap, etc. It leads to the display of another screen. Segues can also be used to unwind the views, which means dismissing views to display any previous screen in the navigation flow. Not to ruin the surprise, UIKit manages the segue transition at runtime by itself. It saves us tons of effort by not using a programmatic implementation.
React-Native differs from iOS in how navigation works. The main library for navigation in React-Native is React-Navigation. In Swift, we are used to having the Navigation View Controller and associating different views with it. The Navigation VC is replaced with the concept of a Navigation Stack. In the Navigation Stack you declare all the views in your stack ahead of time so you can navigate to them later in the app.
In code it looks something like this:
Then to navigate you can do so by calling simple functions like:
This makes navigation declarative in the sense that you need to list all screens, but imperative in the sense that to navigate you need to call a function explicitly.
Architecture — MVVM vs Redux
If you’re a swift developer, MVVM (Model-View-View Model) would definitely ring a bell. The Model layer takes care of business logic. The View layer presents data to users and handles user interactions. The View Controller acts as a glue between the Model and the View. The View Model translates data from Model to the values the View(s) can display.
For people that are familiar with MVVM, they will find state management to be really different in React-Native. Although there are many options for state management, by far the most popular one is Redux.
With Redux, there is a managed, unidirectional flow of data to and from a screen. Screens dispatch actions, actions mutate the store, the store notifies selectors they need to update, and they access the data and display them back on the screen. The mental model looks something like this:
This type of state management is easy to test and debug because you can debug every individual part of the cycle as you go.
Networking — Networking Layer vs Redux Saga
In iOS the networking layer is a core part of any app. It is an abstraction that the developer creates in order to isolate API logic from your Swift business logic. In earlier versions of Swift before 5.5, we can use Combine. After Swift 5.5, we have access to a powerful Async Stream along with async/await.
In React-Native a lot of that is taken care of for you through various middlewares for state management libraries.
In this article we’ll use the example of Redux-Saga because it’s the most popular. Redux-Saga listens for Redux events and calls a method based on them. Your code ends up looking something like this:
As you can see from the diagram above, Saga is added as a new piece to the cycle. It handles any side effects like web requests that Redux cannot handle directly. This information is then sent back from an action to the store, store to selector, and selector to screen.
Conclusion
Through this article, we are trying to minimize the strong distinction between a native developer and a react native developer. If this article motivated you to expand your horizons, please feel free to follow us on medium: dfriyia , tripti-kumar to see some more cool stuff! 😎
Tripti is a curious techie and a philomath, working at TribalScale as an Agile Software Engineer. A big fan of “How I can” rather than an “If I can” mindset. She spends her time caring for plants and pets, doing yoga and meditation, and volunteering for Isha Foundation.
TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!
