Features of React Native

React Native can be used to develop applications for multiple mobile platforms, including Android and iOS.

A project can share a significant amount of application code across platforms while allowing platform-specific code where necessary.

React Native allows developers to use JavaScript for mobile application development.

const message = "Hello React Native";

console.log(message);

Developers can also use TypeScript when they want static typing in their projects.

React Native follows the React programming model.

Developers can use components, props, state, Hooks and JSX to build application interfaces and logic.

React Native applications can be divided into reusable components.

function Welcome() {
    return (
        <View>
            <Text>Welcome</Text>
        </View>
    );
}

Reusable components make application code easier to organize and maintain.

React Native uses JSX to describe the structure of components.

function App() {
    return (
        <View>
            <Text>My Mobile App</Text>
        </View>
    );
}

JSX combines JavaScript logic with a readable component structure.

React Native provides components designed for mobile application interfaces.

• View
• Text
• Image
• TextInput
• ScrollView
• Pressable

React Native development provides tools that allow developers to quickly see changes while working on an application.

Modern React Native development workflows can provide fast refresh, allowing many code changes to appear quickly during development.

Fast Refresh helps developers see many code changes quickly without manually restarting the entire application.

This can make the development and testing process more efficient.

React Native provides Flexbox-based layout capabilities for arranging components on mobile screens.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

The StyleSheet API can be used to organize styles in a React Native application.

const styles = StyleSheet.create({
    title: {
        fontSize: 24,
        fontWeight: "bold"
    }
});

React Native applications can use React Hooks to manage component state and behavior.

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

The state can change in response to user interactions or other application events.

Props allow components to receive data from their parent components.

function Student({ name }) {
    return (
        <Text>Student: {name}</Text>
    );
}

React Native provides event handlers for responding to user actions.

<Pressable
    onPress={() => alert("Button Pressed")}
>
    <Text>Press Me</Text>
</Pressable>

Events can be used for buttons, forms, lists and other interactive components.

React Native provides components such as TextInput for collecting information from users.

<TextInput
    placeholder="Enter your name"
/>

Forms can be used for login, registration, search and other features.

FlatList is designed for displaying lists of data in React Native applications.

<FlatList
    data={students}
    renderItem={({ item }) => (
        <Text>{item.name}</Text>
    )}
    keyExtractor={item => item.id.toString()}
/>

The ScrollView component allows users to scroll through content that is larger than the available screen area.

<ScrollView>
    <Text>Long content goes here...</Text>
</ScrollView>

React Native provides the Image component for displaying images.

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

Images can be used for profiles, products, banners and other application content.

React Native applications commonly use navigation libraries to move between screens.

Applications can have screens such as Home, Login, Profile, Products and Settings.

Home
  ↓
Products
  ↓
Product Details

React Native applications can communicate with remote servers using HTTP APIs.

fetch("https://example.com/api/students")
    .then(response => response.json())
    .then(data => console.log(data));

This makes it possible to build applications that work with dynamic server-side data.

Axios can also be used for communicating with APIs from React Native applications.

axios.get("/api/students")
    .then(response => {
        console.log(response.data);
    });

Axios provides convenient methods for common HTTP requests.

Mobile applications often need to store some information locally.

React Native applications can use appropriate storage libraries for saving application data on the device.

Examples include user preferences, temporary application data and locally cached information.

React Native can be used to create login and authentication flows.

A mobile application can communicate with an authentication API and maintain the user's authenticated state.

Login Screen
     ↓
Authentication API
     ↓
Authenticated User
     ↓
Home Screen

React Native applications can access device capabilities through appropriate APIs and libraries.

Examples include:

• Camera
• Location
• Notifications
• Media
• Device information

Some device features require user permission.

For example, an application may need permission before accessing certain device resources such as location or camera.

Permission handling is an important part of responsible mobile application development.

Most application logic can be shared, but some features may require platform-specific behavior.

React Native provides APIs such as Platform to help developers handle platform differences.

import { Platform } from "react-native";

console.log(Platform.OS);

React Native provides development and debugging tools that help developers identify errors and inspect application behavior.

Developers can use logs, development menus, debugging tools and platform-specific tools during development.

React Native projects can be developed using TypeScript.

TypeScript adds static typing and can help developers catch certain mistakes during development.

type Student = {
    id: number;
    name: string;
};

const student: Student = {
    id: 1,
    name: "Rahul"
};

React Native applications can organize business logic into reusable functions, Hooks and components.

This can help developers maintain larger applications as the project grows.

Component
    ↓
Custom Hook
    ↓
API Service
    ↓
Backend API

React Native can be used to build many types of applications.

• Education Apps
• Student Management Apps
• E-Commerce Apps
• Booking Apps
• Business Apps
• Service Apps
• Social Applications

The exact architecture depends on the application's requirements.

The major React Native features covered in this course can be summarized as:

JavaScript / TypeScript
          ↓
       React
          ↓
     Components
          ↓
     JSX + Props
          ↓
     State + Hooks
          ↓
   Styling + Flexbox
          ↓
 Forms + Lists + Events
          ↓
      Navigation
          ↓
       REST APIs
          ↓
       Storage
          ↓
    Authentication
          ↓
    Device Features
          ↓
      Real Projects

These features provide the foundation needed to progress from basic React Native development to complete mobile applications.