Prerequisites

• •Node.js (version 16 or higher)
• •npm or yarn package manager
• •Java Development Kit (JDK) for Android
• •Android Studio for Android development
• •Xcode for iOS development (macOS only)

Installing React Native CLI

Install React Native CLI globally using npm: `npm install -g @react-native-community/cli`. This provides the command-line tools needed to create and manage React Native projects.

Android Setup

• •Install Android Studio
• •Set up Android SDK and emulator
• •Configure ANDROID_HOME environment variable
• •Add platform-tools to PATH
• •Create a virtual device (AVD)

iOS Setup (macOS only)

• •Install Xcode from Mac App Store
• •Install Xcode Command Line Tools
• •Install CocoaPods: `sudo gem install cocoapods`
• •Set up iOS Simulator

Verifying Installation

Run `npx react-native doctor` to check if your environment is properly configured. This command will identify any issues with your setup and provide guidance on how to fix them.

Creating a New Project

Create a new React Native project using: `npx react-native init MyApp`. This creates a new directory with all the necessary files and folders for a React Native application.

Project Directory Structure

• •android/ - Android-specific code and configuration
• •ios/ - iOS-specific code and configuration
• •src/ - Source code directory (custom)
• •App.js - Main application component
• •index.js - Entry point of the application
• •package.json - Dependencies and scripts
• •metro.config.js - Metro bundler configuration

Key Configuration Files

• •package.json - Project dependencies and scripts
• •android/app/build.gradle - Android build configuration
• •ios/MyApp/Info.plist - iOS app configuration
• •metro.config.js - JavaScript bundler settings
• •babel.config.js - Babel transpiler configuration

Understanding the Entry Point

The index.js file is the entry point that registers the main App component with the React Native framework. It uses AppRegistry to register the component and make it available to the native platform.

Core Components Overview

React Native provides a set of core components that map to native UI elements. These components are the building blocks of your mobile application interface.

View Component

The View component is the most fundamental component in React Native. It's similar to a div in web development and is used as a container for other components. It supports flexbox layout and styling.

Text Component

The Text component is used to display text in your React Native app. All text must be wrapped in a Text component, and it supports styling, nesting, and touch handling.

Image Component

The Image component is used to display images in your React Native app. It can load images from local assets, network URLs, or base64 data. It supports various styling options and loading states.

ScrollView Component

ScrollView is a generic scrolling container that can contain multiple components and views. It's useful when you have content that might not fit on the screen and needs to be scrollable.

Basic Component Example

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

const BasicComponents = () => {
  return (
    <ScrollView>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
          Welcome to React Native!
        </Text>
        <Image 
          source={{ uri: 'https://example.com/image.jpg' }}
          style={{ width: 200, height: 200 }}
        />
      </View>
    </ScrollView>
  );
};

export default BasicComponents;

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

const BasicComponents = () => {
  return (
    <ScrollView>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
          Welcome to React Native!
        </Text>
        <Image 
          source={{ uri: 'https://example.com/image.jpg' }}
          style={{ width: 200, height: 200 }}
        />
      </View>
    </ScrollView>
  );
};

export default BasicComponents;