React Native: An introduction

Welcome back!

On my last post I talked about how I recently started learning react native to build an idea I've had for a mobile app, this time around I want to dive a little deeper into react native.

Creating the app📱

If you're familiar with React.js, you probably know about the create react app tool. It's a great scaffolding tool that helps spin up a new project in React.js by taking care of all the boiler plate code for you. Similarly, RN (React Native) has the Expo tool that you can use to spin up a new project. So instead of:

create-react-app my-app,

you would use the following command instead:

npx create-expo-app@latest

To run the app, you will need either an iOS or Android simulator,
or you can download the Expo client app onto your device. After filling out the relevant details, you can spin up the project by running npx expo start inside of the project directory. I highly recommend this React Native tutorial playlist by Codevolution especially if you're into bite-sized, "micro-learning". It was a great intro into RN.

Basic React Native Components & Libraries

As I mentioned, I'm learning this framework as I go, but with my previous experience with React, it's not bad at all! You're basic components include the <Text> and <View> components, and that's really all you need to get started. The Platform library is super useful when getting device details for either iOS or Android devices as each type has its own nuances. The best part of that is differentiating between the two is taken care of "under the hood", so you are able to implement the code you need and it will be used by both almost seamlessly. Other components like <SafeAreaView> come in super clutch so you don't have to worry about things going off-screen during development.

Putting it all together

  import React from 'react';
import {Text, View} from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};
export default HelloWorldApp;

This right here will get you the classic Hello World output on your device.

That's it!

I took these fundamentals and starting building my app. With the help of the Github Copilot and ChatGPT, the opportunities are endless.

I've already implemented the main screen, as well as a settings page that can take you to your actual device settings, importing certain data from your device, and adding data to the app. I'm testing implementing ads using AdMob by Google, which conveniently has an NPM package that includes a ton of useful functionality.

I've been using my own iPhone and an Android simulator to test out the design of the app, which even though I'm not a designer, is impressive if I do say so myself. Some of the major differences that I see are having to use the Styles api, versus traditional CSS. That has taken some getting used to, although very doable. I have a TODO: item to create a global Styles object to create my own CSS framework so to speak.

I wish there was a way to see how many hours I've put in so far, but it's around 20+ if I had to guess!😅

Gotchas!

As I mentioned, the Expo client is super useful in getting your idea out there to actually see it, but it doesn't give you the entire picture. As with any project, you will more than likely add various NPM packages you might need depending on your use cases. For some of the packages, especially the ones accessing certain functions on your device, you will need the Expo Dev Client package. This package gives the Expo client more permissions and functionality in terms of manipulating the device. It adds a few config files, as well as the process of building the project after certain changes are made. This is where I'm at currently, using the dev client to get pertinent device information to use for identification, as I'm not necessarily requiring users to login.

The next piece I'll be tackling is calling the backend from the front end on local. The last time I tried this I ran into some CORS issues that I eventually figured out, although it was a crazy headache to deal with at first.

Until next time,

-JJ ✌🏽