Hi, I’m Abhijeet. As a full-stack developer, I’ve mostly worked with web apps, but I’ve always been curious about how mobile apps actually work under the hood and how the overall mobile ecosystem is different from the web.

That curiosity led me to start this series.

This is Day 1 of me learning Mobile Development, and I’ll be documenting my journey here - what I learn, what I build, the mistakes I make, and everything in between.

So if you’re someone who’s also curious about mobile development, feel free to follow along 🌻

I’m starting with React Native + Expo since I already have experience working with React.

Prerequisites

• Basic JavaScript knowledge

• React fundamentals

• Node.js installed

Day 1 Topics

• What is Mobile Development?

• Setting up React Native + Expo

• Overview of basic React Native components

• Building a simple Signup Page

---

What is Mobile Devlopment 👾

Mobile development is the process of building applications that run on mobile devices like smartphones and tablets.

These apps can be:

• Android apps

• iOS apps

• or apps that work on both platforms

There are mainly 3 types of mobile development:

1. Native Development

Apps are built specifically for one platform.

• Android → Kotlin / Java

• iOS → Swift

Best performance and full access to device features, but you usually maintain two separate codebases.

2. Cross-Platform Development

One codebase works on both Android and iOS.

Popular frameworks:

• React Native

• Flutter

This is what you’re learning with React Native + Expo.

3. Hybrid Apps

Basically web apps wrapped inside a mobile app container.

Examples:

• Ionic

• Cordova

Easier to build, but usually less performant compared to native or React Native apps.

In simple terms:

Web development = apps inside a browser, Mobile development = apps installed directly on a phone

---

Setting up React Native + Expo⚙️

First, go to the Play Store and install the Expo Go app on your phone 📱 This app helps you run and preview your React Native apps directly on your device.

Then open VS Code and create a new folder for your project 💻

Now run:

npx create-expo-app@latest

If you want to use a specific Expo SDK version, you can do something like:

npx create-expo-app@latest --template default@sdk55

Once the project is created, go inside the folder and start the development server 🚀

cd your-project-name
npx expo start

A QR code will appear in the terminal/browser 🧾

Now open the Expo Go app on your phone and scan the QR code 📷 Expo will automatically download the development bundle and run the app on your device ✨

Expo Official Website

And that’s it — your React Native + Expo setup is ready 🎉

---

Overview of basic React Native components🧩

Just like we have components in React for the web, React Native also comes with its own built-in components 📱

These components are specially made for mobile apps and help us build UI for Android and iOS.

Today we are going to learn some basic components that will help you get started with React Native 🚀

Components we are going to learn ✨

• <View />

• <Text />

• <TextInput />

• <Button />

• <Pressable />

• <Switch />

• <Image />

• <ScrollView />

• <FlatList />

• <KeyboardAvoidingView />

---

📦 <View />

<View /> is like a div in HTML. It is used to wrap and structure things on the screen.

<View>
  <Text>Hello World</Text>
</View>

Almost everything in React Native is usually placed inside a <View />

---

📝 <Text />

Used to display text on the screen.

<Text> Hi i'm text 👾</Text>

In React Native, you cannot directly write text like in HTML. You must wrap it inside <Text />

---

⌨️ <TextInput />

Used to take input from users.

<TextInput placeholder="Enter your name" />

👉 Similar to an input field in web apps.

---

🔘 <Button />

A simple button component.

<Button title="Signup" />

👉 Quick and easy for basic buttons.

---

<Pressable />

Used to create custom clickable areas.

<Pressable onPress={() => alert("Pressed!")}>
  <Text>Click Me</Text>
</Pressable>

👉 More flexible than <Button />

---

🌗 <Switch />

Used for ON/OFF toggles.

<Switch value={true} />

👉 Commonly used in settings pages.

---

🖼️ <Image />

Used to display images.

<Image
  source={{ uri: "https://example.com/image.png" }}
  style={{ width: 100, height: 100 }}
/>

👉 In React Native, images need width and height.

---

📜 <ScrollView />

Makes content scrollable.

<ScrollView>
  <Text>Lots of content here...</Text>
</ScrollView>

👉 Useful when content is bigger than the screen.

---

📋 <FlatList />

Used to efficiently render long lists.

<FlatList
  data={["Apple", "Banana", "Mango"]}
  renderItem={({ item }) => <Text>{item}</Text>}
/>

👉 Better than using .map() for large lists.

---

⌨️📱 <KeyboardAvoidingView />

Prevents the keyboard from covering input fields.

<KeyboardAvoidingView>
  <TextInput placeholder="Email" />
</KeyboardAvoidingView>

👉 Super useful for forms and signup/login pages.

---

These are some of the core components you’ll use almost every day while building mobile apps with React Native 🌀

---

🎨 Basic Styling in React Native

Just like CSS in web development, React Native also allows us to style our components ✨

For now, just know that we can use the style prop to add styling directly to components.

Example 👇

<View
  style={{
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 20,
  }}
>

Some important things to know for Day 1 🚀

• flexDirection: "row" → puts items side by side

• alignItems: "center" → aligns items vertically

• justifyContent: "center" → aligns items horizontally

• marginTop: 20 → adds space from the top

React Native mainly uses Flexbox for layouts 📦 And honestly, if you already know CSS Flexbox, styling in React Native will feel very familiar.

One important thing 👇

❌ No px, %, or rem like CSS ✅ Just use numbers

padding: 20
fontSize: 18

Also, styling names are written in camelCase

backgroundColor
marginTop
fontSize

We will properly learn styling, layouts, responsiveness, and Flexbox in Day 2 🎯

But for now, this is enough to start building simple UI like signup pages 📱

---

Time to Build Something 🚀

So now, to understand how all these things actually work together, you can simply build a static signup page - or any simple UI screen.

The goal is not to make a perfect app right now. The goal is just to implement whatever you learned today 💡

You can pick any design from:

• Dribbble 🎨

• Pinterest 📌

And try to recreate it in React Native 📱

For my Day 1, I built this simple signup page ✨

GitHub Repo : [ https://github.com/Abhijeet231/mobile-dev-chai-code ]

---

So this was all about what I learned in Day 1 of my Mobile Development journey 📱🚀

Tried to share almost everything I learned today in the simplest way possible.

Let’s see what Day 2 has for us ✨

This is going to be a full series where I’ll keep documenting my mobile development journey - what I learn, what I build, mistakes, experiments, UI clones, and everything in between 🛠️

So if you’re also learning mobile development, or planning to start someday, feel free to follow along 🤝

See you in Day 2 🚀