Three Learning Pillars of React Native

Three Pillars of React Native

Expected concepts to understand as a React Native developer

Coming to the mobile world might be overwhelming even for an experienced web developer. The first interaction with Android Studio or Xcode feels like opening a whole new world of unknown.

In case you’re a mobile developer making the first steps in React Native, you’ll have similar challenges as myself: a new way of planning and architecting the app, a new way of data flow, Javascript, and all the React concepts you have never seen before.

I was already working for a couple of years as an Android developer when a manager called me with the news: “We’re starting a new project, and we’ll try React Native this time.” I didn’t’ know much about it, except it was a cross-platform framework build by Facebook.

I was euphoric to learn a new way of building apps, took the course on Udemy, and started my learning journey. In a team, I had another colleague who was an IOS developer before, and for both of us, this was something new and exciting.

After two weeks, euphoric feelings faded, and I hit the first roadblock. For every problem that came, I would think, “This doesn’t exist in native at all.” The plan was to make a medium-sized app, but I was stuck on the first week of learning.

This time I decided to plan my learning better. My focus was to find all the critical parts required to build a production-ready app.

This article aims not to give you a tutorial, but rather an overview of must-known topics and challenges you’ll face if you decide to go this road.

Before start, meet the Expo.

Shortly after you get into React Native, you’ll read about Expo. It’s essential to understand what it solves and all its constraints so you can decide whether to use it or not.

Expo is a set of tools and services for React Native that helps you build, develop and quickly deploy your app. It is a great tool when you’re new to the mobile world and don’t want to bother setting up Android Studio and Xcode.

PROS:

  • No required setup for Android Studio and Xcode
  • Good documentation and easy to use
  • Simple sharing, signing, and app release process
  • Notifications and Stripe integrated

CONS

  • Expo does the build (no control, sometimes laggy)
  • Native modules are not supported.
  • Big app size because Expo by default includes all libraries

I tried using Expo twice, and both times, I had to eject it from my project. The most significant disadvantage is that native modules are not supported. Almost every medium or big-sized app will need a written module in a native language (Swift, Java, Kotlin).

This doesn’t mean Expo will not work for you; the framework is continuously changing, improving, and adding new tools for developers. Before starting any project, go through all requirements and dependencies to see if it’s a good choice for you.

1. Environment

In case you worked as a web developer in the past, the first misstep you can make is not spending enough time to understand Xcode and Android Studio. React Native developers often spend years working without a fundamental understanding of how these IDEs work.

You’ll frequently encounter problems that will require you to know how to debug, configure, or run the app using one of these.

Expected from Junior React Native Developer:

  • Navigate in Android Studio and Xcode
  • Run the app using the real device
  • Manually link native modules
  • Be familiar with Google Play Console and Apple Developer Portal

Expected from Senior React Native Developer:

  • Understand info.plist for IOS, and Android manifest file
  • Know how CocoaPods (IOS) and Gradle (Android) works
  • Understand Provisioning Profile and Certificates for IOS
  • Understand Keys, Certificates, and Keystores for Android
  • Deploy the app to Test Flight, Google Play Console, and both stores
  • Set up CI/CD using one of the services: Bitrise, CircleCi, Jenkins

To get started, I highly recommend these courses:

2. Building Blocks

The basic building blocks are components used together to build complex user interfaces. The most basic building block is called View, an element on the screen that can display images, text, or respond to input from the user.

At runtime, React Native creates corresponding native views for its components. Because of this, apps look and feel like any other native apps build by Swift or Kotlin.

View is called ViewGroup in Android, and in IOS, it’s UIView.

It’s required for a senior React Native developer to understand how to implement specific mobile components with the best possible user experience. This is usually the job of a UI/UX developer, but there is a big chance you’ll have to implement this on your own in the future.

Most common UI/UX mistakes that some I’ve done myself and seen other developers doing:

Too many or not enough loaders

Not enough loaders (spinners), and your app look flickering, too many, and your app feels slow. It’s essential to find the right balance when using them. I’ve seen apps adding loaders when switching between tabs or after clicking a back button, which is a bad experience and gives a laggy feeling about the app.

Hard to click on the element

One of the most common mobile issues is that it’s hard to click on View, or even worse, it’s not clickable at all. React Native introduced the hitSlop prop, which sets additional distance outside of the element in which a press can be detected.

In simple words, it adds additional clickable space around the element.

hitSlop={{ top: 10, left: 10, bottom: 20, right: 20}}

Keyboard covering views

Problems with the keyboard started as early as the first smartphones with the touch keyboards. When it comes to forms and handling user input, there are few challenges developers have to overcome, and keyboard covering views is one of them.

React Native provides a core component called KeyboardAvoidingView to solve this. Another good 3rd party library is react-native-keyboard-aware-scroll-view, which works best when you have a large form that needs to be scrollable.

Expected from React Native developer to understand:

  • Understand core components such as View, Text, Image, Switch, ScrollView, Alert
  • Create forms by combining TextInput’s
  • Implement performance-optimized FlatList
  • Create appropriate UI/UX experience by combining ActivityIndicator, KeyboardAvoidingView, SafeAreaView, pull to refresh, etc.

3. Styling

If you ever worked with CSS before, this part should be straightforward for you. However, there are few things to consider when building UI for mobile apps.

React Native uses density pixels (DP) instead of regular pixels (PX) you’ve seen on the web. Density-independent pixels are abstract units based on the physical density of the screens. Screen pixel density varies depending on the platform, and that’s why it’s perfect for scaling font sizes on phones.

Pixel density is a calculation returning the number of physical pixels per inch on a device’s screen or display.

Another visual difference is that React Native styles are actual JavaScript files that we can use by invoking them inline or by calling StyleSheet.create()

StyleSheet.create() is a highly recommended way to create styles because underneath, it’s handling two crucial things:

  • Making possible to refer to each style by its ID instead of creating them each time
  • Sending style object only once to through the bridge

Inline-styles are not recommended unless your component is small, and there is a good reason for that. I’ve never experienced it myself, but I’ve seen developers complaining FPS drops when using inline styles.

When it comes to making responsive screens, React Native has its standards on how to approach this problem:

Reusing styles

Most often, you want to make your app look consistent and make base styles for its core components. React Native made it easy to add base styles by providing style as an array of styles.

<Text style={[ styles.baseText, styles.welcomeText ]}> Welcome </Text>

Styled components

After being released, Styled components created a lot of buzz in the React community. They are easy to use, and you can pass props to your styles to make them dynamic. Fast adoption was inevitable even in React Native world.

The main difference between styled-components and Stylesheets is that you have to use styles as you would use them in regular CSS, and you will have to use pixels instead of density pixels.

Stylesheet:

marginTop: 10

Styled Components:

margin-top: 10px

Using pixels instead of density pixels in the mobile world is like using a match to light a fire while you have a lighter for it. Styled components force you to use pixels that are not scaling well on mobile phones, and it adds additional abstraction to your JSX.

Styling skills expected from React Native developer:

  • Solid knowledge of CSS
  • Create responsive layouts with Flexbox
  • Create consistent styles
  • Optimize assets (images, videos) for best possible performance

In the end, none of these things are applicable if you don’t know JavaScript. Make sure you have a good foundation of JS before starting with React Native.

In the following article, I’ll talk about building foundations and JavaScript skills required for React Native developers at various stages of their careers.


Three Learning Pillars of React Native was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

Related Articles

Responses

Your email address will not be published. Required fields are marked *

Receive the latest news

Subscribe To Our Weekly Newsletter

Get notified about chronicles from TreatMyBrand (TMB.) directly in your inbox