First React Native app - Deep Dive

Overview - First React Native app

What is it?

A React Native app is a mobile application built using JavaScript and React. It lets you create apps for both iOS and Android using the same code. The first React Native app is a simple program that shows how to display text and interact with the user. It helps beginners learn how mobile apps work with React Native.

Why it matters

React Native solves the problem of building separate apps for iOS and Android by letting developers write one codebase for both. Without it, developers would spend double the time and effort. This means faster app creation and easier updates, making mobile apps more accessible and affordable to build.

Where it fits

Before learning this, you should know basic JavaScript and React concepts like components and JSX. After this, you can learn about navigation, state management, and connecting apps to the internet. This first app is the foundation for all React Native development.

Mental Model

Core Idea

React Native lets you write mobile apps using React components that run natively on phones.

Think of it like...

Building a React Native app is like using LEGO blocks to build a model. Each block is a component, and you snap them together to create the whole app. The blocks work the same way whether you build a car or a house, just like components work on iOS and Android.

App (React Native)
├─ Component 1 (Text)
├─ Component 2 (Button)
└─ Component 3 (View container)

Each component renders native UI elements on the phone screen.

Build-Up - 7 Steps

1

Foundation

Setting up React Native environment

Concept: Learn how to prepare your computer to build React Native apps.

To start, install Node.js and npm, which manage JavaScript packages. Then install the React Native CLI tool. Set up Android Studio or Xcode for emulators to test your app on a phone simulator. This setup lets you write and run React Native code on your computer.

Result

You have a working environment where you can create and run React Native apps on simulators or real devices.

Understanding the setup process removes the biggest barrier to starting mobile development with React Native.

2

Foundation

Creating a new React Native project

Concept: Learn how to create a new app project using React Native CLI.

Run the command 'npx react-native init MyFirstApp' in your terminal. This creates a folder with all the files needed for your app. Inside, you find the main file 'App.js' where your app code lives. This command sets up a basic app ready to run.

Result

A new React Native project folder is created with starter code.

Knowing how to create a project is the first step to building any React Native app.

3

Intermediate

Understanding the App.js structure

🤔Before reading on: do you think App.js is a plain JavaScript file or a special React component? Commit to your answer.

Concept: Learn the role of App.js as the main React component of your app.

App.js exports a function that returns JSX, a syntax that looks like HTML but creates native UI elements. It uses components like to group elements and to show words. This file controls what the user sees on the screen.

Result

You understand that App.js is the heart of your app's UI and logic.

Recognizing App.js as a React component helps you grasp how React Native apps render UI.

4

Intermediate

Displaying text and styling

🤔Before reading on: do you think you can style text in React Native using CSS files? Commit to your answer.

Concept: Learn how to show text and add styles directly in React Native.

Use the component to display words. Styles are added using a JavaScript object with properties like color, fontSize, and margin. Styles are passed as a 'style' prop to components. This is different from web CSS but similar in concept.

Result

Your app shows styled text on the screen.

Knowing how to style components in React Native is key to making apps look good and user-friendly.

5

Intermediate

Running the app on a simulator

🤔Before reading on: do you think you need a physical phone to test your React Native app? Commit to your answer.

Concept: Learn how to run your app on a phone simulator on your computer.

Use 'npx react-native run-ios' to launch the app on an iPhone simulator or 'npx react-native run-android' for Android emulator. The app compiles and opens in the simulator, showing your UI. This lets you test without a real device.

Result

Your app runs on a simulator showing the UI you coded.

Using simulators speeds up development by letting you test changes instantly.

6

Advanced

Adding interactivity with state

🤔Before reading on: do you think React Native apps can change what they show without restarting? Commit to your answer.

Concept: Learn how to make your app respond to user actions using state.

Use React's useState hook to create a piece of data that changes. For example, a button press can update a counter shown on screen. This makes the app interactive and dynamic, not just static text.

Result

Your app updates the screen when the user interacts with it.

Understanding state is crucial for building real apps that respond to users.

7

Expert

How React Native bridges JavaScript and native code

🤔Before reading on: do you think React Native runs JavaScript directly as native code? Commit to your answer.

Concept: Learn the internal process that connects JavaScript code to native mobile UI.

React Native runs JavaScript in a separate thread using a JavaScript engine. It sends instructions to native UI components through a bridge. This allows JavaScript to control native elements without rewriting code for each platform.

Result

You understand the architecture that makes React Native cross-platform and performant.

Knowing the bridge mechanism explains why React Native apps feel native and how to optimize them.

Under the Hood

React Native runs your JavaScript code inside a JavaScript engine (like Hermes or JavaScriptCore). This code describes UI using React components. The framework translates these descriptions into native UI elements on iOS and Android. Communication happens over a bridge that sends serialized commands between JavaScript and native threads asynchronously.

Why designed this way?

React Native was designed to let developers use familiar web technologies to build mobile apps without rewriting code for each platform. The bridge allows separation of concerns: JavaScript handles logic and UI description, while native code handles rendering and performance. This design balances developer speed and app quality.

┌───────────────┐       ┌───────────────┐
│ JavaScript    │       │ Native Modules│
│ Thread       │◄──────│ (iOS/Android) │
│ (React Code) │       │               │
└──────┬────────┘       └──────┬────────┘
       │ Bridge (async)           │
       └─────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think React Native apps are just web apps running inside a browser? Commit to yes or no.

Common Belief: React Native apps are just web apps running inside a mobile browser or WebView.

Reality: React Native apps run JavaScript code that controls native UI components, not web views. They are real native apps, not websites.

Why it matters: Believing this leads to wrong assumptions about performance and capabilities, causing frustration and poor app design.

Quick: Do you think you must write separate code for iOS and Android in React Native? Commit to yes or no.

Common Belief: You have to write different code for iOS and Android in React Native.

Reality: Most React Native code is shared across platforms. Only a few platform-specific parts need separate code.

Why it matters: Thinking you must write twice the code discourages learning React Native and wastes time.

Quick: Do you think styling in React Native uses regular CSS files? Commit to yes or no.

Common Belief: React Native uses CSS files just like web development.

Reality: React Native uses JavaScript objects for styling, not CSS files. Styles are passed as props.

Why it matters: Expecting CSS files causes confusion and errors when styling React Native apps.

Quick: Do you think React Native apps run JavaScript code directly as native machine code? Commit to yes or no.

Common Belief: React Native compiles JavaScript into native machine code for performance.

Reality: JavaScript runs in an engine at runtime and communicates with native code via a bridge; it is not compiled to native machine code.

Why it matters: Misunderstanding this can lead to wrong performance expectations and debugging challenges.

Expert Zone

1

React Native's bridge can become a bottleneck if too many messages pass between JavaScript and native code, so batching updates is important.

2

Using Hermes JavaScript engine improves startup time and memory usage on Android compared to older engines.

3

Platform-specific code can be organized using file extensions like .ios.js and .android.js to keep code clean.

When NOT to use

React Native is not ideal for apps requiring heavy native animations or very high performance graphics; native development or frameworks like Flutter may be better.

Production Patterns

In production, React Native apps use code-push for over-the-air updates, integrate native modules for device features, and use state management libraries like Redux or Recoil for complex state.

Connections

React for Web

React Native builds on React concepts but targets mobile native UI instead of web browsers.

Understanding React for Web helps grasp React Native's component model and state management.

Cross-platform Development

React Native is one approach to cross-platform mobile development alongside Flutter and Xamarin.

Knowing different cross-platform tools helps choose the best fit for project needs.

Event-driven Programming

React Native apps respond to user events like taps and gestures using event-driven programming.

Understanding event-driven models clarifies how apps update UI dynamically.

Common Pitfalls

#1 Trying to style React Native components using CSS files.

Wrong approach:

/* styles.css */
.text { color: 'red'; font-size: 20px; }

Hello

Correct approach:

const styles = StyleSheet.create({
text: { color: 'red', fontSize: 20 }
});

Hello

Root cause:

Confusing React Native styling with web CSS leads to errors and no styles applied.

#2 Running 'react-native run-android' without starting an emulator or connecting a device.

Wrong approach:

npx react-native run-android
// No emulator or device running

Correct approach:

Start Android emulator first or connect a physical device, then run:
npx react-native run-android

Root cause:

Not understanding that the app needs a target device or emulator to run.

#3 Modifying App.js without saving or reloading the app to see changes.

Wrong approach:

Edit App.js but do not reload app or save file.
Expect changes to appear automatically.

Correct approach:

Save changes and reload app in simulator or enable hot reload for instant updates.

Root cause:

Not knowing how React Native development workflow updates the app view.

Key Takeaways

React Native lets you build real mobile apps using JavaScript and React components that run natively on iOS and Android.

Setting up the environment and creating a new project are the first essential steps to start building apps.

App.js is the main component file where you write JSX to describe your app's UI and behavior.

Styling in React Native uses JavaScript objects, not CSS files, and components like and create native UI elements.

React Native uses a bridge to connect JavaScript code with native mobile code, enabling cross-platform development with good performance.

Practice

1. What is the main purpose of the View component in a React Native app?

easy

A. To act as a container for other components and layout

B. To display text on the screen

C. To handle user input events

D. To fetch data from the internet

Solution

1. Step 1: Understand the role of View

   The View component is like a box that holds other components and helps arrange them on the screen.

2. Step 2: Compare with other components

   Text displays text, but View is for layout and grouping.

3. Final Answer:

   To act as a container for other components and layout -> Option A

4. Quick Check:

   View = container [OK]

Hint: Remember: View is like a box holding things [OK]

Common Mistakes:

• Confusing View with Text
• Thinking View handles user input
• Assuming View fetches data

2. Which of the following is the correct way to import React and React Native components in your first app?

easy

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

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

C. import React, { View, Text } from 'react';

D. import View, Text from 'react-native';

Solution

1. Step 1: Check React import

   React is imported as default from 'react', so import React from 'react'; is correct.

2. Step 2: Check React Native components import

   Components like View and Text are named exports from 'react-native', so import { View, Text } from 'react-native'; is correct.

3. Final Answer:

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

4. Quick Check:

   Default React + named components import [OK]

Hint: React default, components named import [OK]

Common Mistakes:

• Importing React components from 'react-native' incorrectly
• Using default import for View and Text
• Missing curly braces for named imports

3. What will the following React Native code display on the screen?

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

export default function App() {
  return (
    
      Hello, React Native!
    
  );
}

medium

A. An error because View is missing a style

B. A blank screen with no text

C. The text 'Hello, React Native!' displayed on the screen

D. The text 'Hello, React Native!' but inside a button

Solution

1. Step 1: Analyze the returned JSX

   The App function returns a View containing a Text component with the string 'Hello, React Native!'.

2. Step 2: Understand rendering behavior

   React Native will display the text inside the Text component on the screen inside the View.

3. Final Answer:

   The text 'Hello, React Native!' displayed on the screen -> Option C

4. Quick Check:

   Text inside View renders as visible text [OK]

Hint: Text inside View shows on screen [OK]

Common Mistakes:

• Thinking style is required to show text
• Confusing View with Button
• Expecting an error without styles

4. Identify the error in this React Native code snippet:

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

export default function App() {
  return (
    
      Hello World
    
  )
}

medium

A. Missing semicolon after return statement

B. No error; the code is correct and will run

C. The JSX is missing parentheses around the return value

D. The View component must have a style prop

Solution

1. Step 1: Check JSX syntax

   The JSX inside the return is wrapped in parentheses, which is optional but allowed. The code uses valid JSX syntax.

2. Step 2: Check React Native rules

   View does not require a style prop to work. Semicolons are optional in JavaScript.

3. Final Answer:

   No error; the code is correct and will run -> Option B

4. Quick Check:

   Valid JSX and React Native code [OK]

Hint: JSX parentheses optional; style not required [OK]

Common Mistakes:

• Thinking style prop is mandatory
• Expecting semicolons are required
• Assuming parentheses are always needed

5. You want to create a simple React Native app that shows the text 'Welcome!' centered both vertically and horizontally on the screen. Which style object should you apply to the View component to achieve this?

hard

A. { padding: 10, margin: 10 }

B. { flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }

C. { position: 'absolute', top: 0, left: 0 }

D. { flex: 1, justifyContent: 'center', alignItems: 'center' }

Solution

1. Step 1: Understand centering in React Native

   To center content vertically and horizontally, the container needs to fill the screen with flex: 1 and use justifyContent: 'center' for vertical centering and alignItems: 'center' for horizontal centering.

2. Step 2: Evaluate each style option

   { flex: 1, justifyContent: 'center', alignItems: 'center' } uses the correct flexbox properties for centering. Options A, B, and D do not center content both ways.

3. Final Answer:

   { flex: 1, justifyContent: 'center', alignItems: 'center' } -> Option D

4. Quick Check:

   Flexbox center with flex:1 [OK]

Hint: Use flex:1 with justifyContent and alignItems center [OK]

Common Mistakes:

• Using padding or margin to center content
• Forgetting flex:1 to fill screen
• Using wrong flexDirection or positioning