Basics of React Native?

Introduction

If you've ever built a website using HTML, CSS, and JavaScript, congratulations — you already have the mindset needed to build mobile apps too! 🚀

React Native is a framework created by Meta (Facebook) that lets you build mobile apps (Android 📱 + iOS 🍏) using JavaScript and React.

Instead of learning Java, Swift, or Kotlin separately, React Native allows you to write one codebase and run it everywhere.

Famous apps like Instagram, Facebook, Discord, and Shopify all use React Native under the hood.

🛠 What You Need to Start

Before we dive deeper:

• You should know basic JavaScript (variables, functions, etc.)

• Install Node.js on your system.

• Choose how to start:

  • Expo (easy setup, fast for beginners).

  • React Native CLI (more control, for later).

For beginners, Expo is highly recommended.

React Native Basics (Explained with HTML5 Reference)

1. Components — Like Your HTML Tags

In HTML, you write:

<h1>Hello World</h1>

In React Native, you write:

import { Text } from 'react-native';

<Text>Hello World</Text>

Text replaces h1, p, etc. in React Native.

2. Props — Like HTML Attributes

In HTML:

<img src="cat.png" alt="Cute Cat" />
//Here 'src' is attribute.

In React Native:

<Image source={require('./cat.png')} />
//Here, 'source' is a prop.
<Text style={{color: 'blue'}}>Hello!</Text>
//Here, 'style' is a prop.

3. State — Like Dynamic Data in JavaScript

In JavaScript:

let count = 0;
function increase() {
  count += 1;
}

In React Native (using a Hook):

import { useState } from 'react';

const [count, setCount] = useState(0);

setCount(count + 1);

State makes your app dynamic — it can re-render automatically when data changes!

4. Styling — Like CSS, but in JavaScript Objects.

In HTML:

<div style="color: white; background-color: black;">
  Hello
</div>

In React Native:

<View style={{backgroundColor: 'black'}}>
  <Text style={{color: 'white'}}>Hello</Text>
</View>

Notice the difference:

• We camelCase in React Native instead of kebab-case

• Styles are objects {} not strings "".

5. Flexbox Layout — Default in React Native.

In HTML, you use Flexbox like:

display: flex;
justify-content: center;
align-items: center;

In React Native:

<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Hello Centered!</Text>
</View>

Flexbox is the default layout in React Native. You don’t even need to write display: flex!

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#282c34',
  },
  text: {
    color: 'white',
    fontSize: 24,
  }
});

💡 Common Beginner Mistakes