React native tutorial Basic to Advance

 React native tutorial Basic to Advance 

Building mobile apps has never been easier, and with Expo, Tailwind CSS, and Expo Router, you can quickly build and style your app while taking advantage of powerful navigation features. In this guide, we'll walk through how to set up a basic React Native app with Expo, style it using Tailwind CSS, and set up dynamic routes using Expo Router. Along the way, we’ll cover how to add custom icons, environment variables, platform-specific behavior, and much more.

1. Setting Up Your Development Environment

Before diving into coding, we need to set up your development environment.

What is Expo?

Expo is a framework and platform for building universal React applications. It streamlines the development process, making it easy to test and deploy apps without worrying about setting up native build tools. Perfect for beginners and rapid development!

Install Node.js

Ensure that Node.js is installed on your machine. You can download it from here. npm (Node Package Manager) will also be installed alongside Node.js.

2. Creating Your New React Native Project with Expo

Once your environment is ready, let's create a new React Native project using Expo.

Run the following command in your terminal:

npx create-expo-app@latest my-new-app

This will:

  • Set up a new Expo project in a folder named my-new-app.
  • Automatically configure the latest Expo version for you.

Navigate into your project folder:

cd my-new-app

Now, start the app:

npx expo start

Expo will open a browser window with a QR code, which you can scan with the Expo Go app on your phone to run the app live.

Running the App on an Emulator (Optional)

To test on an emulator:

  • Android Emulator: Install Android Studio to create an Android Virtual Device (AVD), and run npm run android.
  • iOS Emulator: For macOS users, install Xcode and run the app using the iOS simulator.

3. Adding Tailwind CSS to Your Project

Tailwind CSS is a utility-first CSS framework that allows you to style your app directly within the JSX code. It’s simple, efficient, and extremely flexible.

Install Tailwind CSS and Dependencies

Run the following to add Tailwind CSS to your project:

npx expo add tailwindcss postcss autoprefixer --dev

This installs the required dependencies to integrate Tailwind CSS with Expo.

Initialize Tailwind Configuration

To set up Tailwind, run:

npx tailwindcss init -p

This creates two files:

  • tailwind.config.js: Used to customize your Tailwind setup.
  • postcss.config.js: Configures how PostCSS processes Tailwind's classes.

Add Tailwind to Your App

Create a global.css file and include the following to enable Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import this global.css file into your main app file (App.js or App.tsx):

import './global.css';

4. Building Your First React Native App

Now let's create a simple "Hello World" app.

Create the Index.js File

Inside the src/ folder (or wherever your components are stored), create a file Index.js with:

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

const Index = () => {
  return (
    <View>
      <Text>Hello world app</Text>
      <Text>Our First app</Text>
    </View>
  );
};

export default Index;

Styling with Tailwind CSS

Add Tailwind styling to center your content:

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

const Index = () => {
  return (
    <View className="flex-1 justify-center items-center bg-blue-100">
      <Text className="text-2xl font-bold text-gray-800">Hello world app</Text>
      <Text className="text-lg text-gray-600">Our First app</Text>
    </View>
  );
};

export default Index;

This applies Tailwind's flexbox utilities (flex-1, justify-center, items-center) to center the content, along with text and background color utilities.

Run Your App Again

Once you’ve updated your code, go back to the terminal and run:

npx expo start

Now you should see the styled "Hello World" app on your device or emulator.

5. Introduction to Expo Router for Dynamic Routes

Expo Router allows you to create dynamic routes easily. This is especially useful when building complex apps with multiple screens or pages.

Install Expo Router

Install the required dependencies:

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Create Pages with Expo Router

Your file structure will look like this:

/app
  _layout.tsx
  _layout.web.tsx
  index.tsx
  about.tsx
  about.web.tsx

Here’s how it works:

  • _layout.tsx: Layout for mobile platforms.
  • _layout.web.tsx: Layout for web platforms.
  • index.tsx: The home page.
  • about.tsx: About page for mobile platforms.
  • about.web.tsx: About page for the web.

Dynamic Routes with Expo Router

To create dynamic routes, you can use the following structure:

  • app/blog/[slug].tsx: Will map to URLs like /blog/123.
  • app/blog/[...rest].tsx: Will map to more complex URLs, such as /blog/123/settings.

Here’s an example of a dynamic blog page:

// app/blog/[slug].tsx
import { useLocalSearchParams } from 'expo-router';
import { Text } from 'react-native';

export default function Page() {
  const { slug } = useLocalSearchParams();
  return <Text>Blog post: {slug}</Text>;
}

This will render the blog post based on the slug parameter from the URL.

6. Using Platform-Specific Code

Sometimes, you need to handle different behavior based on the platform (iOS or Android). React Native provides the Platform module to manage platform-specific functionality.

Example: Platform-Specific Code

import { Platform, Text } from 'react-native';

const App = () => {
  if (Platform.OS === 'ios') {
    return <Text>Hello, iOS User!</Text>;
  }
  return <Text>Hello, Android User!</Text>;
};

7. Working with Environment Variables

You can use environment variables in your app by creating a .env file in the root folder. For example, to disable certain features:

Create a .env file:

EXPO_PUBLIC_DISABLE_FEATURE=true

Then, access it in your app:

import { Text } from 'react-native';

export default function App() {
  return (
    <Text>Feature Enabled: {process.env.EXPO_PUBLIC_DISABLE_FEATURE ? 'Yes' : 'No'}</Text>
  );
}

8. Using Custom Icons

You can add custom icons to your app by creating an icons folder and importing the icons like this:

import { ArrowUp } from './icons';

export default function Home() {
  return <ArrowUp />;
}

Ensure you place your custom icons in the appropriate file and import them wherever necessary.

9. Conclusion

Congratulations! You’ve just built a simple React Native app using Expo, Tailwind CSS, and Expo Router. You learned how to:

  • Set up a React Native project with Expo.
  • Style your app using Tailwind CSS.
  • Use dynamic routes with Expo Router.
  • Implement platform-specific behavior and environment variables.

Now you have a solid foundation for building powerful and efficient mobile apps. Keep exploring the powerful features Expo provides, and feel free to expand your app with more components, pages, and custom logic.

I hope this guide has been helpful! Feel free to ask any questions, and happy coding!

Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more