A Beginner’s Journey: How I Built My First React Native App with Expo

---

---

INTRODUCTION

Picture this: you’ve decided to build an app. Not just any app, but one that displays account balances, tracks transactions, and allows users to send or request money. The idea is crystal clear in your head… until you open your editor. Suddenly, it’s like staring at a blank canvas, and you’re unsure where to start.

That was me when I decided to dive into React Native with Expo and create my first payments app. As a beginner, I wasn’t just learning how to build an app , I was learning everything: from setting up my environment to debugging on real devices. But by the end of this journey, I had a working app and a newfound appreciation for mobile development.

In this blog, I'll take you through my experience, focusing on the frontend aspects, including what I learned about React Native, why I chose Expo, and where you can start if you're a newbie like me. I'll also include snippets of my code and break down how each part of the app's UI works.

WHAT IS REACT NATIVE?

React Native is a framework for building mobile apps using JavaScript and React. It allows you to write a single codebase that runs on iOS, Android, and even the web. Think of it as a translator that converts JavaScript into native mobile code.

HOW IS REACT NATIVE DIFFERENT FROM FLUTTER?

Let’s clear the air on this age-old debate:

1. Programming Language: React Native uses JavaScript (or TypeScript), while Flutter uses Dart. If you’re already comfortable with JavaScript, React Native feels like home.

2. Community: React Native has been around longer, so the community is larger. You’ll find more tutorials, libraries, and Stack Overflow answers.

3. Flexibility: React Native is more flexible when integrating third-party libraries. Flutter’s ecosystem is tightly controlled, which can feel limiting.

   
   

Now, I know what you're thinking: "Why did you choose React Native over Flutter?" Well, let me tell you a little secret. I actually considered Flutter for a hot minute. Why? Because I wanted to Dart away from my comfort zone! (Get it? Dart? Flutter's programming language? No? Okay, I'll see myself out.) But in all seriousness, I stuck with React Native because of its JavaScript roots.

WHY USE EXPO?

• Faster Setup: No need to install Android Studio or Xcode right away. With Expo, you can get started in minutes.

• Expo Go: Test your app instantly on your phone by scanning a QR code.

• Cross-Platform Builds: Create iOS and Android builds without touching native code.

• File-Based Routing: Organize your app’s screens intuitively.

  
  

---

If you’re curious, peep the below YouTube video explaining Expo in 100 seconds. You can also check out Expo’s Getting Started Guide for more information.

---

---

STARTING AS A NEWBIE: WHERE TO BEGIN

Embarking on a new journey can be daunting, but remember, you're not alone in the React Native world! The community is brimming with resources, and learning from the experts is your best starting point. Here's a roadmap to guide your learning:

1. JavaScript Fundamentals: Master the basics like variables, functions, and ES6+ syntax if you haven't already.

2. React Basics: Dive into component building, state management, and props usage.

3. React Native Essentials: Get comfortable with core components such as View, Text, and ScrollView.

   
   

Pro tip: Begin with a simple "Hello World" app to build confidence before tackling more complex projects.

For a comprehensive learning experience, FreeCodeCamp's React Native Course stands out from the crowd. This free, in-depth guide covers everything from initial setup to creating your first fully functional app. Available on YouTube, it offers the perfect blend of practical coding and real-world examples, making it ideal for newcomers to development.

---

---

GETTING STARTED WITH REACT NATIVE & EXPO

For newcomers to mobile app development, React Native paired with Expo offers an ideal starting point. This powerful combination streamlines the development process, enabling you to concentrate on writing code rather than grappling with complex configuration issues.

Step 1: Install the Prerequisites

Before diving in, ensure you have these installed:

1. Node.js: Download and install the latest version from Node.js.

2. npm (comes with Node.js): Your package manager of choice for installing dependencies.

To verify your setup, run these commands in your terminal:

node -v
npm -v

Step 2: Create Your First Project

Expo makes it easy to spin up a new project with just one command:

npx create-expo-app@latest FintechPaymentsApp

This sets up a fully functional React Native app with everything you need to get started in a single command, so no need to install ‘React Native’ or ‘Expo’ via your CLI. You can replace FintechPaymentsApp with your desired project name.

Step 3: Start the Development Server

Navigate into your project folder and start the development server:

cd FintechPaymentsApp
npx expo start

This will open the Expo DevTools in your browser, where you can manage and test your app.

Step 4: Test Your App

Download the Expo Go app on your mobile device (available on the App Store and Google Play). Scan the QR code displayed in your terminal or Expo DevTools to see your app running live on your phone!

MY APP: BREAKING DOWN THE UX AND UI

Here’s a screenshot of my app’s home screen. Let’s break it down into components:

---

Expo Simulator

---

1. Current Balance Card

This is the star of the show. Positioned at the top, the balance card displays the user’s total balance in a sleek, modern design. The chip icon adds a touch of fintech sophistication.

<ImageBackground
  source={require('../../assets/images/card-background.png')}
  style={styles.cardBackground}
  imageStyle={{ borderRadius: 15 }}
>
  <View style={styles.cardContent}>
    <MaterialCommunityIcons name="credit-card-chip" size={40} color="#fff" />
    <Text style={styles.balanceLabel}>Current Balance</Text>
    <Text style={styles.balanceAmount}>R 12,345.67</Text>
  </View>
</ImageBackground>

2. Action Buttons: Send Money and Request Money

These buttons make user actions intuitive and accessible. They’re bold, centered, and easy to find.

<View style={styles.buttonContainer}>
  <Button
    mode="contained"
    onPress={() => navigation.navigate('SendMoney')}
    style={styles.actionButton}
  >
    Send Money
  </Button>
  <Button
    mode="contained"
    onPress={() => navigation.navigate('RequestMoney')}
    style={styles.actionButton}
  >
    Request Money
  </Button>
</View>

3. Recent Transactions List

This scrollable list displays details like merchant names, dates, amounts, and payment statuses. Each transaction is clickable for more details.

{transactions.map((transaction) => (
  <TransactionRow
    key={transaction.id}
    transaction={transaction}
    onPress={() => navigation.navigate('TransactionReceipt', { transaction })}
  />
))}

TESTING WITH EXPO GO

Expo Go made testing a breeze. I simply ran npx expo start, scanned the QR code with my phone, and saw the app running live. It felt like magic.

Useful Testing Commands

• i: Opens the iOS simulator.

• a: Opens the Android emulator.

• r: Reloads the app.

  
  

ADDING A BACKEND

Currently, this app is front-end only. But the beauty of React Native is that it’s easy to integrate with any backend. I’m considering using Ruby on Rails or Node.js for features like:

• User authentication.

• Secure transaction storage.

• Real-time updates with WebSockets.

  
  

Speaking of backend integration, I couldn't resist sharing this joke I came across during my journey:

Why do front-end devs always want to work with a backend dev? They need someone to handle their POST-traumatic requests 😂

But jokes aside, integrating a backend is a crucial step in creating a fully functional app, and it ‘may be’ on my roadmap for future development.

WHAT I LEARNED

1. Start Small: Tackle one feature at a time.

2. Read the Docs: Don’t underestimate the power of good documentation.

3. Testing is Key: Testing on real devices gives you insights a simulator can’t.

   
   

RESOURCES FOR LEARNING REACT NATIVE

Here are some of the resources that helped me:

1. React Native Docs

2. Expo Docs

3. FreeCodeCamp React Native Course

4. React Native Tutorials on YouTube

5. The New Expo CLI

   
   

CONCLUSION

Building this app was more than just a project — it was a journey of growth. From understanding React Native to testing with Expo, every step was a learning experience. If you’re new to mobile development, React Native and Expo are the perfect tools to start your journey.

Remember, every great app starts with a single line of code. So grab your editor, open the docs, and start building - happy coding!

#ReactNative #ExpoGo #FintechApps #MobileDevelopment #BeginnerJourney #CodingAnywhere #StudentDeveloperPack #InstantSetup #RemoteWork #CodingLife #DevTools #LearnToCode #HappyCoding #freeCodeCamp #DeveloperTips #Programming #Node.js #TechBlog #Tech4All