I am learning flutter from JustAcademy, They provide very much great environment where people gather and work simultaneously. totally project based training institute.
Awesome Experience. I am a Front-end Web Designer working at Star India for 3 years now. I applied for Full-stack development and my experience has been phenomenal & they really do help with placements exceptionally. Thank you Roshan sir so much.
React Native is an open-source framework developed by Meta (Facebook) that allows developers to build mobile applications using JavaScript and React.
It helps developers create Android and iOS apps using a single codebase, which saves time and effort.
Unlike traditional mobile development where you write:
Java/Kotlin for Android
Swift/Objective-C for iOS
React Native lets you write code using JavaScript and React components.
Key Features
Cross-platform development
Reusable components
Hot Reloading
Large community support
Faster development
Example
import React from 'react';
import { Text, View } from 'react-native';
export default function App() {
return (
<View>
<Text>Hello React Native</Text>
</View>
);
}
In this example:
View works like a container
Text displays text on the screen
React Native provides many benefits for mobile app development.
1. Cross-Platform Development
One codebase can run on both Android and iOS.
2. Faster Development
Developers can reuse components and write less code.
3. Hot Reloading
Changes in code appear instantly without restarting the app.
4. Strong Community Support
Many developers and libraries are available.
5. Cost Effective
Companies can build apps for two platforms with one team.
Even though React Native is powerful, it has some limitations.
1. Performance Issues
For complex applications like heavy gaming, native development performs better.
2. Native Modules Needed
Sometimes developers must write native code (Java, Kotlin, Swift).
3. Third-Party Dependency
React Native relies heavily on external libraries.
4. Large App Size
Apps built with React Native can sometimes be larger in size.
Both technologies are developed by Meta, but they are used for different purposes.
| Feature | ReactJS | React Native |
| Platform | Web Applications | Mobile Applications |
| Components | HTML elements | Native components |
| Rendering | Uses DOM | Uses Native APIs |
| Styling | CSS | JavaScript styles |
Components are the building blocks of a React Native application.
They define how the UI should appear and behave.
Two Types of Components
1. Functional Components
Simpler and commonly used.
function Welcome() {
return <Text>Hello User</Text>;
}
2. Class Components
class Welcome extends React.Component {
render() {
return <Text>Hello User</Text>;
}
}
Most modern React Native apps use functional components with hooks.
JSX (JavaScript XML) is a syntax used to write UI code in React Native.
It allows developers to write HTML-like code inside JavaScript.
Example:
const App = () => {
return (
<View>
<Text>Welcome to React Native</Text>
</View>
);
};
Here:
JSX makes UI code more readable and easier to write.
View is the most basic component in React Native.
It works like a container or div element in HTML.
It is used to:
Example
import { View, Text } from 'react-native';
function App() {
return (
<View>
<Text>Hello World</Text>
</View>
);
}
View supports flexbox layout, styling, touch handling, and accessibility features.
The Text component is used to display text inside a mobile application.
Unlike HTML, React Native does not allow plain text outside the Text component.
Example
import { Text } from 'react-native';
export default function App() {
return (
<Text>Hello React Native Developer</Text>
);
}
Text component also supports:
React Native does not use CSS.
Instead, it uses JavaScript objects for styling.
The StyleSheet API helps organize styles efficiently.
Example
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello Developer</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'lightblue',
padding: 20
},
text: {
fontSize: 18
}
});
Benefits:
Flexbox is a layout system used to design responsive layouts.
React Native uses Flexbox by default.
| Property | Description |
|---|---|
| flex | Controls size of component |
| flexDirection | Row or column layout |
| justifyContent | Align items horizontally |
| alignItems | Align items vertically |
Example
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}>
<Text>Item 1</Text>
<Text>Item 2</Text>
</View>
This will align elements center horizontally and vertically.
Props (Properties) are used to pass data from a parent component to a child component.
Props are read-only, which means the child component cannot change them.
They help make components reusable and dynamic.
Example
import React from "react";
import { Text, View } from "react-native";
const Greeting = (props) => {
return <Text>Hello {props.name}</Text>;
};
export default function App() {
return (
<View>
<Greeting name="Rajan" />
<Greeting name="Developer" />
</View>
);
}
Explanation
Here:
The output will display different greetings.
State is used to store dynamic data inside a component.
When the state changes, the component automatically re-renders (updates the UI).
State is mainly used for:
Example
import React, { useState } from "react";
import { Text, Button, View } from "react-native";
export default function App() {
const [count, setCount] = useState(0);
return (
<View>
<Text>Count: {count}</Text>
<Button title="Increase" onPress={() => setCount(count + 1)} />
</View>
);
}
Explanation
When the button is clicked, the UI updates automatically.
Hooks are special functions that allow functional components to use state and lifecycle features.
Before hooks, these features were available only in class components.
Common Hooks
| Hook | Purpose |
|---|---|
| useState | Manage state |
| useEffect | Handle side effects |
| useContext | Manage global data |
| useRef | Access DOM elements |
Example
import React, { useState } from "react";
import { Text, Button, View } from "react-native";
export default function App() {
const [name, setName] = useState("Rajan");
return (
<View>
<Text>{name}</Text>
<Button title="Change Name" onPress={() => setName("Developer")} />
</View>
);
}
Hooks make components simpler and easier to manage.
useEffect is a React Hook used to perform side effects.
Side effects include:
Example
import React, { useEffect } from "react";
import { Text } from "react-native";
export default function App() {
useEffect(() => {
console.log("Component Mounted");
}, []);
return <Text>Hello React Native</Text>;
}
Explanation
useEffect() runs after the component renders.
[] means it runs only once when the component mounts.
React Navigation is a library used to move between screens in a React Native app.
For example:
React Navigation helps manage screen transitions.
Installation
npm install @react-navigation/native
Example
navigation.navigate("Profile");
Types of Navigation
Stack Navigation works like a stack of screens.
When a new screen opens, it is placed on top of the stack.
Example:
Home Screen
↓
Profile Screen
↓
Settings Screen
Users can go back to the previous screen.
Example
navigation.navigate("Profile");
This pushes the Profile screen on top of the stack.
AsyncStorage is used to store data locally on the user's device.
It works like localStorage in web applications.
It is useful for storing:
Example
import AsyncStorage from '@react-native-async-storage/async-storage';
await AsyncStorage.setItem('username', 'Rajan');
const value = await AsyncStorage.getItem('username');
Features
React Native can fetch data from APIs using:
Most developers use Axios because it is easier.
Example using Fetch
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => console.log(data));
}, []);
Example using Axios
import axios from "axios";
axios.get("https://jsonplaceholder.typicode.com/posts")
.then(res => console.log(res.data));
API calls are usually placed inside useEffect.
Redux is a state management library used to manage global state in large applications.
It helps different components share data easily.
Example:
Redux Flow
Component → Action → Reducer → Store → Component
Benefits
| Feature | State | Props |
|---|---|---|
| Definition | Local component data | Data passed from parent |
| Mutable | Yes | No |
| Controlled by | Component itself | Parent component |
| Purpose | Dynamic data | Component communication |
Example
<Profile name="Rajan" />
Here:
ScrollView is a component used to display a scrollable view of content.
If the content is larger than the screen size, the user can scroll vertically or horizontally.
Features
Example
import React from "react";
import { ScrollView, Text } from "react-native";
export default function App() {
return (
<ScrollView>
<Text>Item 1</Text>
<Text>Item 2</Text>
<Text>Item 3</Text>
<Text>Item 4</Text>
<Text>Item 5</Text>
</ScrollView>
);
}
Important
ScrollView renders all components at once, which can affect performance for large lists.
FlatList is used to display large lists of data efficiently.
Unlike ScrollView, it renders items lazily (only when needed).
Advantages
Example
import React from "react";
import { FlatList, Text, View } from "react-native";
export default function App() {
const data = [
{ id: "1", name: "Item 1" },
{ id: "2", name: "Item 2" },
{ id: "3", name: "Item 3" }
];
return (
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View>
<Text>{item.name}</Text>
</View>
)}
/>
);
}
FlatList is commonly used for:
| Feature | ScrollView | FlatList |
|---|---|---|
| Rendering | Renders all items | Renders only visible items |
| Performance | Poor for large lists | Optimized for large lists |
| Memory usage | High | Low |
| Use case | Small lists | Large lists |
Example
Use ScrollView when you have 10–20 items.
Use FlatList when you have 100+ items.
Expo is a tool that makes React Native development easier and faster.
It provides many pre-built APIs and tools.
Developers can build apps without writing native code.
Features of Expo
Create Expo Project
npx create-expo-app myApp
Expo is ideal for beginners and small projects.
| Feature | React Native CLI | Expo |
|---|---|---|
| Setup | Complex | Easy |
| Native code access | Full access | Limited |
| Performance | Better | Slightly lower |
| Learning curve | Harder | Easier |
Use Expo:
Use React Native CLI:
The Image component is used to display images in a React Native application.
Images can come from:
Example
import React from "react";
import { Image } from "react-native";
export default function App() {
return (
<Image
source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
style={{ width: 100, height: 100 }}
/>
);
}
Local Image Example
<Image source={require('./assets/logo.png')} />
Debugging means finding and fixing errors in the application.
React Native provides several debugging tools.
Debugging Tools
Example
console.log("User Data:", user);
Debugging helps developers identify issues quickly.
Sometimes React Native cannot access device-specific features directly.
In such cases, developers create Native Modules.
Native modules allow React Native to communicate with:
Example Use Cases
Native modules bridge JavaScript with native code.
The Bridge is a system that allows JavaScript code to communicate with native code.
React Native has three main parts:
Process
JavaScript → Bridge → Native Modules
Example:
When you press a button in React Native, the action may go through the bridge to native code.
Performance optimization is important for large applications.
Best Practices
1. Use FlatList instead of ScrollView for large data
2. Avoid unnecessary re-renders
Use React.memo().
3. Optimize images
Use compressed images.
4. Use lazy loading
Load components only when needed.
5. Remove console logs in production
Too many logs slow down the app.
useRef is a React Hook used to store a reference to a value or component without causing re-renders.
It is mainly used for:
Example
import React, { useRef } from "react";
import { TextInput, Button, View } from "react-native";
export default function App() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<View>
<TextInput ref={inputRef} placeholder="Enter text" />
<Button title="Focus Input" onPress={focusInput} />
</View>
);
}
Explanation
useContext is a React Hook used to share data globally across components without passing props manually.
This helps avoid prop drilling.
Example
import React, { createContext, useContext } from "react";
import { Text } from "react-native";
const UserContext = createContext("Guest");
function Profile() {
const user = useContext(UserContext);
return <Text>User: {user}</Text>;
}
export default function App() {
return (
<UserContext.Provider value="Rajan">
<Profile />
</UserContext.Provider>
);
}
Explanation
Linking is used to open external URLs or apps from a React Native application.
It can open:
Example
import { Linking, Button } from "react-native";
export default function App() {
return (
<Button
title="Open Website"
onPress={() => Linking.openURL("https://google.com")}
/>
);
}
Explanation
When the button is clicked, the device browser opens the website.
Deep Linking allows a user to open a specific screen inside an app using a URL.
Example:
myapp://profile
If a user clicks this link, it will open the Profile screen directly.
Uses
Deep linking improves user navigation and app engagement.
Touchable components are used to handle user touch interactions.
Common Touchable components:
| Component | Purpose |
|---|---|
| TouchableOpacity | Changes opacity when pressed |
| TouchableHighlight | Highlights when pressed |
| TouchableWithoutFeedback | No visual feedback |
| Pressable | Modern touch handling component |
Example
import { TouchableOpacity, Text } from "react-native";
export default function App() {
return (
<TouchableOpacity onPress={() => alert("Button Pressed")}>
<Text>Click Me</Text>
</TouchableOpacity>
);
}
Pressable is a modern component used to handle press interactions.
It provides more control over press behavior.
Example
import { Pressable, Text } from "react-native";
export default function App() {
return (
<Pressable onPress={() => alert("Pressed!")}>
<Text>Press Me</Text>
</Pressable>
);
}
Features
React Native provides the Platform API to detect whether the app is running on Android or iOS.
This helps developers write platform-specific code.
Example
import { Platform, Text } from "react-native";
export default function App() {
return (
<Text>
{Platform.OS === "android" ? "Android Device" : "iOS Device"}
</Text>
);
}
Explanation
Platform.OS returns "android" or "ios".
Layout animations allow developers to animate UI changes smoothly.
Example animations:
Example
import { LayoutAnimation } from "react-native";
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
This creates smooth UI transitions.
Push notifications are messages sent to users even when the app is not open.
Examples:
Common libraries used:
Push notifications help increase user engagement.
Code splitting means loading only the required code when needed.
This improves:
Example approach:
Lazy loading screens
Dynamic imports
Example
const ProfileScreen = React.lazy(() => import("./ProfileScreen"));
This loads the screen only when it is needed.
React Native architecture allows JavaScript code to communicate with native mobile code.
It mainly consists of three parts:
1. JavaScript Thread
Runs the React Native application logic.
2. Native Thread
Handles native UI components such as buttons, views, and animations.
3. Bridge
The bridge connects JavaScript with native modules.
Flow
JavaScript Code → Bridge → Native Components
This architecture allows developers to build native-like mobile apps using JavaScript.
Metro Bundler is the default JavaScript bundler used in React Native.
It takes all JavaScript files and combines them into a single bundle for the app.
Main Features
When you run:
npx react-native start
Metro Bundler starts and prepares the app code.
Hermes is a JavaScript engine optimized for React Native apps.
It improves:
Hermes is mainly used for Android apps.
Benefits
Error handling helps developers detect and manage application errors.
Common methods:
1. Try–Catch
try {
const data = JSON.parse("invalid json");
} catch (error) {
console.log("Error:", error);
}
2. Error Boundaries
Used to catch errors in React components.
3. Console Logs
console.error("Something went wrong");
Error handling improves app stability and debugging.
A memory leak happens when unused memory is not released properly.
This can cause:
Common Causes
Example Fix
useEffect(() => {
const timer = setInterval(() => {
console.log("Running");
}, 1000);
return () => clearInterval(timer);
}, []);
The cleanup function prevents memory leaks.
Controlled Components
React controls the component state.
Example:
const [text, setText] = useState("");
<TextInput value={text} onChangeText={setText} />
Uncontrolled Components
The component manages its own state.
Example:
<TextInput defaultValue="Hello" />
Controlled components provide better control over data.
OTA (Over-The-Air) updates allow developers to update app code without publishing a new version on the app store.
Tools used:
OTA updates are useful for small fixes and UI updates.
Testing ensures that the application works correctly and has fewer bugs.
Types of Testing
Popular Testing Tools
Example
test("sum function", () => {
expect(2 + 2).toBe(4);
});
Testing improves code quality and reliability.
| Feature | React Native | Flutter |
|---|---|---|
| Language | JavaScript | Dart |
| Developed by | Meta | |
| UI Rendering | Native components | Custom rendering engine |
| Learning curve | Easier for JS developers | Slightly harder |
React Native is popular among developers who already know React and JavaScript.
React Native is widely used because it offers fast development and cross-platform support.
Main Reasons
1. Single codebase for Android and iOS
2. Faster development
3. Large developer community
4. Reusable components
5. Strong ecosystem
Many companies use React Native such as:
This makes React Native a very valuable skill for mobile developers.
Selenium WebDriver Interview Questions and Answers for Freshers and Experienced Testers in 2026
UI UX Interview Questions and Answers for Freshers and Beginners Covering Design Thinking, Figma, Wireframing, and UX Research in 2026
Figma Interview Questions and Answers for UI UX Designers, Freshers, and Experienced Designers in 2026
SQL, ORM, and Database Interview Questions and Answers for Python Backend Developers and Freshers in
OOP Concepts, Python Classes Interview Questions and Answers for Beginners and Freshers in 2026
REST API, FastAPI, and Django REST Framework Interview Questions and Answers for Python Freshers and Developers in 2026
Flask API, Python Backend Interview Questions and Answers for Beginners and Freshers in 2026
Django Interview, Python Backend Questions and Answers for Freshers and Beginners in 2026
Python DSA, Coding Interview Questions and Answers for Freshers and Beginners in 2026
Version Control, GitHub Interview Questions and Answers for Python Developers and Freshers in 2026
