Getting Started with React Native

In a world where everyone has a mobile phone, it would be important for a developer to understand mobile development.

But it might be overwhelming to have to learn for both android and ios as each one has its own programming language and setup.

That’s where a framework like React Native comes in, It allows you to create apps for both ios and android with just one codespace.

If you are already familiar with React it is very easy to jump into it.

To make that easier for you I will provide you with a learning path to understand where to start.

Before we get started, here are a few prerequisites you need to know HTML and CSS Javascript React and any state management system

Now back to the learning path, I will break them down into points to help your journey be a bit easier to keep track of

1. How does React Native work?

React Native allows developers to build apps by spinning up JS threads that interpret JavaScript code, by making a native bridge between the app and the target platform. The bridge concept leverages the library and transfers the component’s hierarchy to the mobile device’s view.

For instance, if the user presses a button, this case is translated into an event that JavaScript can handle. After that, by relaying messages between native platforms and JS code, the React Native bridges translate native events into something that React components can understand and work with.

2. Expo vs react native CLI

When it comes to the developer environment, they are two ways to go ahead with it.

If you are new to mobile development it will be easier to get started with expo. Expo makes it easier to work with emulators and provides many inbuild packages.

If you have experience with mobile development, you can use react native CLI. It requires Xcode or Android Studio to get started. This dev environment gives you more freedom to get access and make changes to native code if required.

In my opinion, its code to get started with expo but once you are more familiar with react native or if your project becomes more complex, you can eject from expo and move to react native CLI.

3. Important Components in React Native

With React we can make use of HTML tags as it is being rendered as an HTML page at the end of the day, however, React Native has its own components to render render various elements in your app, these components will be parsed into native code behind the scenes.

Some frequently use ones are as follows

View - It works as a wrapper for your other components, it works like how a div tag does. TextInput - It creates a Text field where users can enter values. It will be helpful in creating submission forms. Image - It is used to insert an image in the app by supplying the image source which can either be an internal or external source. Button - A basic button component that handles touches and will render nicely on any platform ScrollView - Provides a scrolling container that can host multiple containers and views FlatList - A component for rendering performant scrollable list

4. FlatList vs ScrollView

In the previous point, the description for Flatlist and ScrollView seem very similar, so when to use what? The main difference is when components are wrapped in a ScrollView, all of it is rendered even if it is not currently visible in the app but with FlatList only what’s visible in the screen is rendered instead of all the components. FlatList is better to be used when large amounts of data are being rendered while as ScrollView is better for smaller amounts.

Code Snippet of FlatList

<FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedId}
      />

Code Snipped of ScrollView

     <ScrollView>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>

5. What is StyleSheets

When it comes to styling in React Native, they provide an inbuild component known as StyleSheets. If you understand styling in CSS it is very easy to jump into this as the syntax is very similar.

The main difference between them is here the styles are structured as javascript objects so camel casing needs to be used for the properties.

Eg: background-color will be backgroundColor

  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
  }
});

6. React Navigation

The most commonly used package for navigation in a react app is React Navigation, It is important you have an understanding of how it works.

React Navigation’s native stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state - your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens.

With React Navigation you can build authentication flows, tab navigations, drawer navigations, etc

7. Key-value storage framework

In apps, just having a global store may not be enough, there might be cases where data needs to be persisted. It could be done if your app needs to work offline if you want to reduce API calls by storing certain data or if you want your app to remember certain data like themes chosen by the user.

A package I recommend is React Native MMKV, it allows you synchronously store and retrieve data in a very simple manner.

8. Connecting react native app to firebase

Firebase provides a version for react native called React Native Firebase. Firebase provides a lot of different services such as authentication, analytics, crash reports, dynamic linking, cloud messaging, etc.

When building an app there is a high chance you will need some service from firebase and they provide and simple and clear way to integrate them.

So following these steps should help you get more confident with React Native. All The best in your journey and happy learning!

References

• React Native Docs
• Expo Docs
• React Navigation Docs
• React Native MMKV
• React Native Firebase Docs