DEV Community: JJ_Juarez

Navigating Expo 📲🫠

JJ_Juarez — Mon, 20 May 2024 04:37:37 +0000

Greetings...All

I'm back with yet another post covering different technologies I'm using on my quest to build my first mobile app!📱😀 Let's get right to it!

Using Expo

I covered Expo a little bit in my last post React Native: An introduction, but I wanted to talk about it more here and how it's being used in my project. First off, Expo is a powerful framework that has tons of capabilities and functionality for developing your project. It also has pretty decent documentation about how to use it.

I was introduced to it a few years ago when taking a LinkedIn Learning course over React Native called React Native Fundamentals with Eve Porcello (at least I think that's the title!😅). You can install the Expo Go app on your mobile device of choice to see your app being developed in real time. It auto-refreshes every time you save a file, and outputs info in the console. You can create an app in just a few commands like so:

create-expo-app my-app
cd my-app
npx expo start

That simple!

Building in Expo

Once you start using packages that require higher permissions for your device, you have to install/use the Expo Dev Client npm package. At a high level, in order to run these newly installed higher privilege packages, you have to install EAS and by running the following:
npm install -g eas-cli

eas login (Your Expo account login)

eas build:configure

then finally

eas build --platform platform.

This will create a build which you can monitor via conveniently output url in the console. Even if there are errors in your build, the logging is robust enough to pinpoint the root of the problem.

I still have a good bit to learn about Expo, as it is a really powerful tool and can at times be a lot to navigate. I was able to create a development build to run on the android simulator, but an iOS build has been a little tricky. I think I have to download the dev build to install onto my iPhone, but haven't quite gotten there yet.

Does any of this make sense? Is there anything specific you might have questions about? Y'all let me know in the comments! 👇🏽

Until next time 🤙🏽🤙🏽

Peace,

React Native: An introduction

JJ_Juarez — Wed, 15 May 2024 21:17:24 +0000

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 ✌🏽

My first tech blog😅

JJ_Juarez — Tue, 14 May 2024 22:55:05 +0000

Hello World!

I know, real original 🙄, but I had to as this is my inaugural post on Dev.to! I've been toying with the idea of writing a blog for some time now, and figured since I'm starting a new project, this is the best time for it. I've been somewhat familiar with React.js for a while now and wanted to make the jump over to React Native to capitalize on an idea I've had for a few years. I'll be blogging about the progress on my app and figured this is the best spot for it.

About me

I've been primarily a back-end dev for the past 6 years or so, and took a non-traditional route to get here. I have limited experience with the front end in prod and thus push myself to build in it when I can. I am by no means a designer, but I make do! You can check out my website here to see what I mean 😁.

React Native

React Native has definitely been fun to learn, and as always with technology, a pain in the a** sometimes. However, being familiar with React beforehand definitely helped A LOT! I really enjoy the Expo app that helps lay a solid foundation in seeing your idea come to life. I've recently gotten into dealing with the dev client side of Expo and that was initially a little challenging as it added a few extra steps to my development.

The app👀

While the idea for my app isn't necessarily groundbreaking, I'm holding off on revealing what it is until it is further along in development. Luckily, that shouldn't be too much longer.

I was able to repurpose a backend service I previously created to suit my needs, and have the most of the functionality completed.

I'm currently working on adding monetization(ads), and will be testing the end to end functionality soon (hopefully).

I'm a little unsure of how exactly I'm going to structure these blogs, so stay tuned. Maybe the structure will just be the friends we made along the way 😄.

Until next time ✌🏽