No history yet

Mobile Architecture Setup

Building a Scalable Foundation

You already know React for the web. Now, let's translate that knowledge to mobile. We'll build our food donation app with React Native, but we'll use a tool called Expo to streamline the process. Expo handles the complex native configuration for iOS and Android, letting us focus on writing JavaScript.

When you start an Expo project, you choose between two paths: the Managed Workflow or the Bare Workflow. The Managed Workflow is like having a helpful assistant; it manages the native code for you, providing a clean, JavaScript-only development experience. The Bare Workflow gives you full native control, which is powerful but adds complexity. For our project, the Managed Workflow is the perfect choice, offering simplicity without sacrificing capabilities.

Expo simplifies the React Native development process by providing a managed workflow, handling many native configurations for you.

Let's create the project. We'll use a template that comes pre-configured with TypeScript. Open your terminal and run this command:

npx create-expo-app@latest FoodDonationApp --template blank-typescript

This creates a new directory named FoodDonationApp with all the necessary files. The inclusion of TypeScript from the start helps us catch errors early and write more predictable code, which is invaluable in a growing application.

Structuring Your App for Growth

A clean folder structure is the blueprint for a maintainable app. As our app grows with features like user authentication, donation listings, and maps, a good structure prevents chaos. We'll use a feature-based architecture, which organizes code by functionality rather than by file type.

First, create a src directory at the root of your project. This is where all our application code will live. Inside src, we’ll start with a few key folders:

Here's what each folder is for:

  • screens: Holds the main views of our app, like the HomeScreen, LoginScreen, or DonationDetailsScreen. Each file in here typically represents a full screen of content.
  • components: Contains reusable UI elements that are used across multiple screens. Think of buttons, input fields, or cards. We'll build a custom Button.tsx and use it everywhere.
  • navigation: This folder will manage how users move between screens. We'll set up our stack navigators and tab bars here later.
  • theme: For global styles. This is where we'll define our app's color palette, font sizes, and spacing rules to ensure a consistent look and feel.
  • assets: Static files like images, icons, and custom fonts go here.

Styling for Consistency

To keep our UI consistent, we'll create a global theme. This is just a simple TypeScript file that exports our design tokens: colors, font sizes, and spacing units. This way, if we ever need to change the primary color of the app, we only have to change it in one place.

Inside src/theme, create a file named colors.ts.

export const colors = {
  primary: '#4CAF50', // A nice green for our theme
  secondary: '#FFC107',
  background: '#FFFFFF',
  text: '#333333',
  error: '#F44336',
};

You can create similar files for typography.ts and spacing.ts. Now, let's see how to use this in a component with React Native's built-in StyleSheet API. When creating a component, you can import the theme values directly.

import { StyleSheet, Text, View } from 'react-native';
import { colors } from '../../theme/colors';

const WelcomeCard = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Welcome!</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.primary,
    padding: 16,
    borderRadius: 8,
  },
  title: {
    color: colors.background,
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Using StyleSheet.create is more than just organization. React Native optimizes these styles by sending them over the native bridge only once, which can improve performance.

Configuring Your Environment

Expo centralizes app configuration in a single file: app.json or app.config.js. This file controls everything from your app's name and icon to its splash screen and orientation lock. It’s also where you manage plugins and other deep-level settings.

For handling environment-specific variables, like API keys for development versus production, the standard is to use a .env file. You can install a library like react-native-dotenv to make these variables accessible within your app. This keeps your sensitive keys out of source control and allows you to switch configurations easily.

Quiz Questions 1/5

When starting a new Expo project, what is the primary advantage of choosing the Managed Workflow?

Quiz Questions 2/5

In the recommended feature-based folder structure, where should you place code that defines the app's color palette and font sizes?

With this structure in place, we have a solid, scalable foundation ready for building out the features of our food donation app.