Merge pull request #3797 from sivaprasath2004/sivaprasath-closes-issue-3754

[Feature]: Add React Native Course

Author: ajay-dhangar

courses/React Native/Overview.md

@@ -0,0 +1,87 @@
+---
+title: Welcome to Learning Path
+sidebar_label: Course Overview
+sidebar_position: 1
+description: React Native Course Outline. 
+tags: [courses,React Native,Overview]  
+---
+  
+### React Native Course OVerview
+#### Beginner Level
+
+**1. Introduction to React Native**
+   - What is React Native? 
+   - Setting up the development environment 
+
+**2. Basic Components and Layout**
+   - Introduction to React Native components 
+   - Styling components using StyleSheet 
+
+**3. Handling User Input**
+   - Working with TextInput 
+   - Using TouchableOpacity and TouchableHighlight 
+
+**4. Navigation**
+   - Introduction to React Navigation  
+   - Passing parameters between screens
+
+**5. State Management**
+   - Introduction to state in React Native 
+   - Basic state management patterns
+
+**6. Networking and Data Fetching**
+   - Fetching data from APIs using fetch  
+   - Displaying data in lists (FlatList, SectionList) 
+
+**7. Platform-Specific Code**
+   - Using platform-specific code (iOS vs. Android) 
+   - Handling different screen sizes and orientations
+
+#### Intermediate Level
+
+**1. Advanced Components and Styling**
+   - Creating custom components 
+   - Using third-party libraries for styling 
+
+**2. Advanced Navigation**
+   - Implementing nested navigators
+   - Handling deep linking 
+
+**3. State Management Libraries**
+   - Introduction to Redux 
+   - Using Redux Thunk for asynchronous actions 
+
+**4. Native Modules and APIs**
+   - Introduction to native modules 
+   - Creating custom native modules 
+
+**5. Animation and Gestures**
+   - Introduction to React Native Animations 
+   - Gesture handling with React Native Gesture Handler 
+
+**6. Working with External Libraries**
+   - Integrating with third-party libraries (e.g., maps, charts) 
+   - Managing library dependencies and versions
+
+#### Advanced Level
+
+**1. Building and Deploying Apps**
+   - Building and configuring for iOS and Android
+   - Signing and publishing apps to App Store and Google Play
+   - Handling app updates and versioning
+   - Continuous Integration/Continuous Deployment (CI/CD) 
+
+**2. Advanced Native Integration**
+   - Creating complex native modules
+   - Interacting with platform-specific features (Bluetooth, NFC)
+   - Using native libraries and SDKs (e.g., Firebase, Stripe)
+
+**3. Offline Capabilities and Data Storage**
+   - Implementing offline storage (AsyncStorage, SQLite)
+   - Syncing data between offline and online modes
+   - Handling background tasks and push notifications 
+
+**4. Managing App State**
+   - Advanced state management with Redux or MobX 
+   - Handling app state changes (background/foreground)
+ 

courses/React Native/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "React Native",
+    "position": 12,
+    "link": {
+      "type": "generated-index",
+      "description": "Learn React Native."
+    }
+  }

courses/React Native/advanced-level/ Offline Capabilities and Data Storage/Handling-background.md

@@ -0,0 +1,80 @@
+---
+id: lesson-3
+title: "Handling Background Tasks and Push Notifications"
+sidebar_label: Background Tasks and Push Notifications 
+sidebar_position: 3
+description: "Learn Handling Background Tasks and Push Notifications"
+tags: [courses,Advance-level,Introduction]
+---  
+ 
+
+**1.1. Background Tasks**
+
+Background tasks enable you to perform operations like syncing data or fetching updates even when the app is not active.
+
+**Using `react-native-background-fetch`:**
+
+**Installation:**
+
+```bash
+npm install react-native-background-fetch
+```
+
+**Usage Example:**
+
+```javascript
+import BackgroundFetch from 'react-native-background-fetch';
+
+BackgroundFetch.configure(
+  {
+    minimumFetchInterval: 15, // Minutes
+    stopOnTerminate: false, // Continue running in background
+  },
+  async () => {
+    console.log('Background fetch event received');
+    // Perform background tasks such as syncing data
+    BackgroundFetch.finish();
+  },
+  error => {
+    console.log('Background fetch failed', error);
+  }
+);
+```
+
+**1.2. Push Notifications**
+
+Push notifications are used to alert users about important updates even when the app is not in the foreground.
+
+**Using `react-native-push-notification`:**
+
+**Installation:**
+
+```bash
+npm install react-native-push-notification
+```
+
+**Usage Example:**
+
+```javascript
+import PushNotification from 'react-native-push-notification';
+
+PushNotification.configure({
+  onNotification: function (notification) {
+    console.log('Notification:', notification);
+    // Process the notification
+  },
+  requestPermissions: true,
+});
+
+// Create a notification
+PushNotification.localNotification({
+  title: 'My Notification',
+  message: 'This is a test notification',
+});
+```
+ 
+:::tip
+- **Offline Storage:** Use `AsyncStorage` for simple key-value storage and `SQLite` for more complex data needs.
+- **Data Syncing:** Implement an offline-first strategy with local storage and sync when connectivity is restored. Use network status monitoring and background tasks for reliable data syncing.
+- **Background Tasks and Push Notifications:** Use libraries to handle background tasks and push notifications to keep users informed and manage app updates efficiently.
+:::

courses/React Native/advanced-level/ Offline Capabilities and Data Storage/Implement.md

@@ -0,0 +1,97 @@
+---
+id: lesson-1
+title: "Offline Capabilities and Data Storage in React Native"
+sidebar_label: Implementing Offline Storage
+sidebar_position: 1
+description: "Learn Offline Capabilities and Data Storage in React Native"
+tags: [courses,Advance-level,Introduction]
+---  
+  
+
+Implementing offline capabilities and managing data storage are crucial for ensuring a seamless user experience in mobile applications. React Native provides several tools and libraries for handling offline storage, synchronizing data, and managing background tasks.
+ 
+
+#### 1. Implementing Offline Storage
+
+**1.1. AsyncStorage**
+
+`AsyncStorage` is a simple, key-value storage system that is often used for persisting small amounts of data.
+
+**Installation:**
+
+For React Native CLI:
+```bash
+npm install @react-native-async-storage/async-storage
+```
+
+**Usage Example:**
+
+```javascript
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Save data
+const saveData = async () => {
+  try {
+    await AsyncStorage.setItem('@storage_Key', 'stored_value');
+  } catch (e) {
+    // saving error
+  }
+};
+
+// Retrieve data
+const getData = async () => {
+  try {
+    const value = await AsyncStorage.getItem('@storage_Key');
+    if (value !== null) {
+      console.log(value); // Display retrieved value
+    }
+  } catch (e) {
+    // error reading value
+  }
+};
+```
+
+**1.2. SQLite**
+
+SQLite is useful for more complex data storage needs and supports SQL queries.
+
+**Installation:**
+
+For React Native CLI:
+```bash
+npm install react-native-sqlite-storage
+```
+
+**Usage Example:**
+
+```javascript
+import SQLite from 'react-native-sqlite-storage';
+
+// Open database
+const db = SQLite.openDatabase(
+  { name: 'my.db', location: 'default' },
+  () => console.log('Database opened'),
+  error => console.log('Error opening database: ', error)
+);
+
+// Create a table
+db.transaction(tx => {
+  tx.executeSql(
+    'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER)',
+    [],
+    () => console.log('Table created'),
+    error => console.log('Error creating table: ', error)
+  );
+});
+
+// Insert data
+db.transaction(tx => {
+  tx.executeSql(
+    'INSERT INTO users (name, age) VALUES (?, ?)',
+    ['John Doe', 30],
+    () => console.log('Data inserted'),
+    error => console.log('Error inserting data: ', error)
+  );
+});
+```
+ 

courses/React Native/advanced-level/ Offline Capabilities and Data Storage/Syncing-data.md

@@ -0,0 +1,67 @@
+---
+id: lesson-2
+title: "Syncing Data Between Offline and Online Modes"
+sidebar_label: Syncing Data
+sidebar_position: 2
+description: "Learn Syncing Data Between Offline and Online Modes"
+tags: [courses,Advance-level,Introduction]
+---  
+  
+ 
+
+**1.1. Offline-First Approach**
+
+Design your application to work offline by default, and sync data when connectivity is restored.
+
+**Example Workflow:**
+
+1. **Store Changes Locally:** Save user actions and data changes in local storage.
+2. **Check Network Status:** Use libraries like `@react-native-community/netinfo` to detect network status.
+
+   ```bash
+   npm install @react-native-community/netinfo
+   ```
+
+   ```javascript
+   import NetInfo from '@react-native-community/netinfo';
+
+   NetInfo.addEventListener(state => {
+     console.log('Connection type', state.type);
+     console.log('Is connected?', state.isConnected);
+   });
+   ```
+
+3. **Sync Data:** When the app detects a network connection, send local changes to the server and update local storage with the server’s response.
+
+   ```javascript
+   const syncData = async () => {
+     const isConnected = await NetInfo.fetch().then(state => state.isConnected);
+     if (isConnected) {
+       // Sync data with server
+       // Example: POST local data to server
+     }
+   };
+   ```
+
+**1.2. Background Sync**
+
+Use libraries and services to handle background tasks for data synchronization.
+
+**Example:**
+
+**React Native Background Task:**
+
+```bash
+npm install react-native-background-task
+```
+
+```javascript
+import BackgroundTask from 'react-native-background-task';
+
+BackgroundTask.define(() => {
+  // Perform background task
+  BackgroundTask.finish();
+});
+
+BackgroundTask.schedule();
+```

courses/React Native/advanced-level/ Offline Capabilities and Data Storage/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Offline Capabilities and Data Storage",
+    "position": 3,
+    "link": {
+      "type": "generated-index",
+      "description": "Learn Offline Capabilities and Data Storage."
+    }
+  }

courses/React Native/advanced-level/Advanced Native/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Advanced Native Integration",
+    "position": 2,
+    "link": {
+      "type": "generated-index",
+      "description": "Learn Advanced Native Integration."
+    }
+  }