React Native Mobile App Quickstart Guide

April 2, 2023

Read on Medium
  • javascript
  • mobile
  • react-native
  • mobile-app-development
  • react

React Native and React are actually two different frameworks which confused me when I first started learning. React is primarily for web development, whereas React Native is meant for building mobile applications. By using the same JSX syntax, developers can easily create cross-platform mobile apps for iOS and Android.

The essential concepts of React are the same, however there are differences like how React Native uses built-in components like <View>, <Text>, <Image>, and how StyleSheet is used instead of CSS. I won’t be going into detail on the differences here, but just show you a quick guide how to start up your React Native app.

Assuming you have Node.js installed, next you want to install the Expo CLI which is a mobile development framework to create apps for iOS and Android.

npm install -g expo-cli

Now you can create a new React Native project with expo. Navigate to the folder that you want to create your project in and run:

expo init my-react-native-app

I recommend choosing the blank and TypeScript template but any work fine. Then navigate to the newly created project:

cd my-react-native-app

Now you can run the app by starting the development server. You’ll be shown a QR code where you can access the app on your phone, or you can press “w” if you want to view it on your desktop.

expo start
Press “w” to view your app on desktop

You should get this minimal default setup here, and now you can start developing your mobile app with React Native.

Thanks for reading! I’m a full-stack developer specializing in React, TypeScript, and Web3 technologies.

Check out more of my work at mrmendoza.dev
Find my open-source projects on GitHub
Connect with me on LinkedIn

Let me know if this article was helpful or anything you’d like to see next.

Related Posts

Streamline Your Imports in React in under a Minute

Alias paths are custom paths you can set up in your React projects to simplify your imports. I made the mistake of using relative paths like ../../../components/Button for too long when I could’ve simplified my code by using @/components/Button instead. Not only will it make your code more readable, but also more maintainable, consistent, and efficient, saving many headaches. Vite makes it simple to add this functionality and can be added with a few lines of code. First, in your vite.config.ts file you need to import path then just add a resolve object with the aliases needed for your

July 13, 2024

Read more

Offline Chatbots with Ollama

Generative AI tools like ChatGPT, Gemini, or Claude have been a game-changer for many use cases, but they don’t come without drawbacks. Privacy concerns, costs, and reliance on internet connectivity can be significant hurdles for some users. Ollama solves these issues by giving users more control, allowing them to self host open-source LLMs on their own machines. In just a few steps, you’ll have your own free, local LLM at your fingertips. Plus, with Ollama’s API and libraries, you can integrate this powerful AI into your own applications. Getting Started with Ollama 1. Download and Install: Head over to

September 10, 2024

Read more

Create a React App in Under 5 Minutes with Vite

My main reason for choosing to develop with Vite over create-react-app is how fast it is to install and start building your app. Installing with CRA feels like the GTA 5 loading screen. Vite is essentially a lightweight development environment that lets you quickly develop in React and I’ll go over the basics here to get your project started. Assuming you already have Node.js installed, if not install here, you’ll first need to install Vite: npm install -g vite Next you can create a new React project with Vite with: npm create vite@latest You will be asked to enter

April 1, 2023

Read more

Offline AI Vision with Ollama

Building on my previous guide about Ollama chatbots, let’s explore how to leverage AI vision capabilities offline. Using models like LLaVA (Large Language-and-Vision Assistant), you can analyze images locally without relying on cloud services or API costs. Setting Up AI Vision Models If you’ve already installed Ollama, you’re just one command away from using AI vision. If not check out my last post for a quick setup of Ollama. Here’s how to get started: Download LLaVA models: ollama run llava:7b Analyze Images: # Navigate to desired image directory and runollama run llava "describe this image: ./art.jpg"# Or if already

February 15, 2025

Read more

See More

Contact Me

Let’s make your idea a reality

Thank you for taking the time to visit my website! If you're looking for a skilled and innovative developer to work with, don't hesitate to reach out. Whether you have a job opportunity or a freelance project in mind, let's connect and see how we can work together.

You can send me a message below or email me at stevenmendoza.dev@gmail.com

Book on FiverrHire on Upwork