diff --git a/src/data/roadmaps/react-native/content/core-components/activity-indicator.md b/src/data/roadmaps/react-native/content/core-components/activity-indicator.md
index ccafbe951..e03d42da8 100644
--- a/src/data/roadmaps/react-native/content/core-components/activity-indicator.md
+++ b/src/data/roadmaps/react-native/content/core-components/activity-indicator.md
@@ -2,22 +2,6 @@
 
 The `ActivityIndicator` is a core component in React Native that provides a simple visual indication of some ongoing activity or loading state within your application. It shows a spinning animation, which gives the user feedback that something is happening in the background. This component is particularly useful when fetching data from an external source, like a server, or while performing time-consuming operations.
 
-To use the `ActivityIndicator` component, simply import it from 'react-native', and add it to your component tree. You can customize the appearance and behavior of the `ActivityIndicator` by providing various optional props, such as `animating`, `color`, and `size`.
+Visit the following resources to learn more:
 
-Below is an example of how to use the `ActivityIndicator` component within a functional React component:
-
-```javascript
-import React from 'react';
-import { ActivityIndicator, View, Text } from 'react-native';
-
-const LoadingScreen = () => (
-  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Text>Loading, please wait...</Text>
-    <ActivityIndicator size="large" color="#0000ff" />
-  </View>
-);
-
-export default LoadingScreen;
-```
-
-In this example, the `ActivityIndicator` is placed within a `View` component alongside a `Text` component. The `ActivityIndicator` has its `size` set to 'large' and `color` set to blue. By default, the component will be animating. If you want to control the animation, you can use the `animating` prop and set it to `true` or `false`.
\ No newline at end of file
+- [@official@Activity Indicator](https://reactnative.dev/docs/activityindicator)
diff --git a/src/data/roadmaps/react-native/content/core-components/button.md b/src/data/roadmaps/react-native/content/core-components/button.md
index 4e1774405..261d9c73b 100644
--- a/src/data/roadmaps/react-native/content/core-components/button.md
+++ b/src/data/roadmaps/react-native/content/core-components/button.md
@@ -2,33 +2,6 @@
 
 A `Button` is a built-in React Native component used to create clickable buttons. It is a simple, customizable and easy-to-use component that captures touches and triggers an `onPress` event when pressed.
 
-Here's a simple example of how to create a Button in React Native:
+Visit the following resources to learn more:
 
-```javascript
-import React from 'react';
-import { Button } from 'react-native';
-
-const MyButton = () => {
-  const onPressHandler = () => {
-    alert('Button Pressed');
-  };
-
-  return (
-    <Button
-      title="Click me"
-      color="#841584"
-      onPress={onPressHandler}
-    />
-  );
-};
-
-export default MyButton;
-```
-
-In this example, we import the Button component from 'react-native', create a functional component `MyButton`, and define an `onPressHandler` function that will be called when the button is pressed. We then use the `Button` component and pass in the following props:
-
-- `title`: The text to display on the button.
-- `color`: The background color of the button.
-- `onPress`: The function to call when the button is pressed.
-
-When the button is pressed, the `onPressHandler` function will be called, and an alert will pop up saying "Button Pressed".
\ No newline at end of file
+- [@official@Button](https://reactnative.dev/docs/button)
diff --git a/src/data/roadmaps/react-native/content/core-components/image-background.md b/src/data/roadmaps/react-native/content/core-components/image-background.md
index ba2d4b69a..fdaf1e27b 100644
--- a/src/data/roadmaps/react-native/content/core-components/image-background.md
+++ b/src/data/roadmaps/react-native/content/core-components/image-background.md
@@ -2,41 +2,6 @@
 
 `ImageBackground` is a React Native core component that allows you to display an image as a background while still being able to place content inside the component. This helps in creating beautiful layouts with images and text or other content on top.
 
-To use `ImageBackground`, you need to import it from the `react-native` package and then include it in your JSX.
+Visit the following resources to learn more:
 
-```javascript
-import React from 'react';
-import { View, Text, ImageBackground, StyleSheet } from 'react-native';
-
-const App = () => (
-  <ImageBackground
-    source={{ uri: 'https://some-image-url.com/background.jpg' }}
-    style={styles.background}
-    resizeMode="cover"
-  >
-    <Text style={styles.text}>Hello, World!</Text>
-  </ImageBackground>
-);
-
-const styles = StyleSheet.create({
-  background: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    color: 'white',
-    fontSize: 42,
-    lineHeight: 84,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-In the above example, `source` prop is used to add the image URL, `style` prop for adding some custom styling, and `resizeMode` to define how the image should stretch to fill the available space. The `Text` component inside the `ImageBackground` is then rendered on top of the image.
-
-For more information and details, you can refer to the React Native docs:
-
-- [@article@Image Background - React Native](https://reactnative.dev/docs/imagebackground)
+- [@official@Image Background](https://reactnative.dev/docs/imagebackground)
diff --git a/src/data/roadmaps/react-native/content/core-components/image.md b/src/data/roadmaps/react-native/content/core-components/image.md
index 80fc62685..ccfbff112 100644
--- a/src/data/roadmaps/react-native/content/core-components/image.md
+++ b/src/data/roadmaps/react-native/content/core-components/image.md
@@ -2,50 +2,6 @@
 
 The `Image` component is used to display images in a React Native application. It allows you to load and display local as well as remote images, providing essential props and methods for better image handling and customization.
 
-To use the `Image` component, you need to import it from 'react-native':
+Visit the following resources to learn more:
 
-```javascript
-import { Image } from 'react-native';
-```
-
-To display a local image in the application, you have to require it in the `source` prop of the `Image` component. Place the image file in your project directory and use the following syntax:
-
-```javascript
-<Image source={require('./path/to/your/image.png')} />
-```
-
-To display a remote image from a URL, you need to set the `source` prop with a `uri` object:
-
-```javascript
-<Image source={{ uri: 'https://path/to/your/remote/image.png' }} />
-```
-
-Keep in mind that you need to define the dimensions (width and height) when using remote images:
-
-```javascript
-<Image source={{ uri: 'https://path/to/remote/image.png' }} style={{ width: 200, height: 200 }} />
-```
-
-You can set image scaling and positioning with the `resizeMode` prop. It accepts the following values: `cover`, `contain`, `stretch`, `repeat`, and `center`. Default value is `cover`.
-
-```javascript
-<Image source={require('./path/to/your/image.png')} resizeMode="contain" />
-```
-
-There are additional props which you can use to further modify the image behavior.
-
-- `blurRadius`: Adds a blur effect to the image.
-- `defaultSource`: Displays a placeholder image while the target image is loading (only for Android).
-- `loadingIndicatorSource`: Similar to `defaultSource`, but works on both Android and iOS.
-- `onLoad`: A callback function that gets called when the image finishes loading.
-
-Here's an example combining some of these props:
-
-```javascript
-<Image style={{ width: 300, height: 200 }}
-       source={{ uri: 'https://path/to/remote/image.png' }}
-       resizeMode="contain"
-       onLoad={() => console.log('Image loaded')}>
-```
-
-For more information and details, you can refer to the React Native docs: [Image - React Native](https://reactnative.dev/docs/image)
\ No newline at end of file
+- [@official@Image](https://reactnative.dev/docs/image)
diff --git a/src/data/roadmaps/react-native/content/core-components/index.md b/src/data/roadmaps/react-native/content/core-components/index.md
index 9d212e3fc..fb65faded 100644
--- a/src/data/roadmaps/react-native/content/core-components/index.md
+++ b/src/data/roadmaps/react-native/content/core-components/index.md
@@ -3,63 +3,13 @@
 Core components are the essential building blocks provided by React Native to create a user interface for mobile applications. They are platform-agnostic, meaning they work across both iOS and Android devices. Some of the common core components include:
 
 - `View` is a fundamental component for constructing the user interface. It is equivalent to a `div` in HTML and can be used as a container for other components.
-
-```javascript
-<View style={styles.container}>
-  <Text>Hello World!</Text>
-</View>
-```
-
 - `Text` is used to display text content in your app. It is similar to the `p` or `span` elements in HTML.
-
-```javascript
-<Text style={styles.title}>Welcome to my App</Text>
-```
-
-- `Image` is used to display images in your application. It can load images from local sources or remote URLs.
-
-```javascript
-<Image source={require('./assets/logo.png')} />
-
-<Image source={{ uri: 'https://example.com/image.png' }} />
-```
-
 - `TextInput` is a basic input field that allows users to type text into your app. It is similar to the `input` element in HTML.
-
-```javascript
-<TextInput
-  value={this.state.text}
-  onChangeText={text => this.setState({ text })}
-  style={styles.input}
-/>
-```
-
 - `TouchableOpacity` is a wrapper for making elements like `View` and `Text` respond properly to touch events. It provides feedback by reducing the opacity of the wrapped component when pressed.
-
-```javascript
-<TouchableOpacity onPress={this.onButtonPress}>
-  <Text style={styles.buttonText}>Press me!</Text>
-</TouchableOpacity>
-```
-
 - `ScrollView` is a scrollable container that allows users to scroll through its content. It is useful when you have content that exceeds the available screen size.
-
-```javascript
-<ScrollView style={styles.scrollContainer}>
-  <Text>Content 1</Text>
-  <Text>Content 2</Text>
-  {/* ... */}
-</ScrollView>
-```
-
 - `FlatList` is used to render a list of items using a performant approach. It only renders items that are currently visible on the screen and removes others to save memory.
 
-```javascript
-<FlatList
-  data={this.state.data}
-  renderItem={({ item }) => <Text>{item.name}</Text>}
-  keyExtractor={item => item.id}
-/>
-```
+Visit the following resources to learn more:
 
-These core components are foundational to creating functional and attractive interfaces for your React Native applications.
\ No newline at end of file
+- [@official@Core Components and APIs](https://reactnative.dev/docs/components-and-apis)
+- [@official@Core Components and Native Components](https://reactnative.dev/docs/intro-react-native-components)
diff --git a/src/data/roadmaps/react-native/content/core-components/listings/index.md b/src/data/roadmaps/react-native/content/core-components/listings/index.md
index ff6b5c95d..fe6d3e1fd 100644
--- a/src/data/roadmaps/react-native/content/core-components/listings/index.md
+++ b/src/data/roadmaps/react-native/content/core-components/listings/index.md
@@ -1,82 +1,9 @@
 # Listings
 
-When working with listings in React Native, the commonly used components include:
+When working with listings in React Native, commonly used components include **FlatList**, **SectionList**, and **VirtualizedList**. **FlatList** is a high-performance, scrollable list component that efficiently renders a large number of items. It is ideal for displaying simple lists of data. **SectionList** is similar but is used for displaying data in separate sections with headers, making it suitable for grouped data presentations.
 
-- **FlatList** - It is a high-performance, scrollable list component that renders a large number of items efficiently.
-   
-   Example:
-   ```jsx
-   import { FlatList, Text } from 'react-native';
+**VirtualizedList** is a lower-level component that provides more fine-grained control over list rendering performance, making it useful for complex lists or when custom behavior is needed. These components are essential for managing dynamic data and displaying large lists effectively in React Native applications.
 
-   const data = [
-     { id: 1, text: 'Item 1' },
-     { id: 2, text: 'Item 2' },
-     { id: 3, text: 'Item 3' },
-   ];
+Visit the following resources to learn more:
 
-   const renderItem = ({ item }) => <Text>{item.text}</Text>;
-
-   const MyFlatList = () => (
-     <FlatList
-       data={data}
-       renderItem={renderItem}
-       keyExtractor={item => item.id.toString()}
-     />
-   );
-   ```
-
-- **SectionList** - Similar to FlatList, but it is used when you want to display data in separate sections with section headers.
-
-   Example:
-   ```jsx
-   import { SectionList, Text } from 'react-native';
-
-   const sections = [
-     { title: 'Section 1', data: ['Item 1', 'Item 2', 'Item 3'] },
-     { title: 'Section 2', data: ['Item 4', 'Item 5', 'Item 6'] },
-   ];
-
-   const Item = ({ text }) => <Text>{text}</Text>;
-   const SectionHeader = ({ title }) => <Text>{title}</Text>;
-
-   const MySectionList = () => (
-     <SectionList
-       sections={sections}
-       renderItem={({ item }) => <Item text={item} />}
-       renderSectionHeader={({ section: { title } }) => (
-         <SectionHeader title={title} />
-       )}
-       keyExtractor={(item, index) => item + index}
-     />
-   );
-   ```
-
-- **VirtualizedList** - A lower-level component for rendering large lists and for more fine-grained control over list rendering performance.
-
-   Example:
-   ```jsx
-   import { VirtualizedList, Text } from 'react-native';
-
-   const data = [
-     { id: 1, text: 'Item 1' },
-     { id: 2, text: 'Item 2' },
-     { id: 3, text: 'Item 3' },
-   ];
-
-   const getItemCount = data => data.length;
-   const getItem = (data, index) => data[index];
-
-   const renderItem = ({ item }) => <Text>{item.text}</Text>;
-
-   const MyVirtualizedList = () => (
-     <VirtualizedList
-       data={data}
-       renderItem={renderItem}
-       keyExtractor={item => item.id.toString()}
-       getItemCount={getItemCount}
-       getItem={getItem}
-     />
-   );
-   ```
-
-These components are essential when dealing with dynamic data and displaying large lists in React Native applications.
\ No newline at end of file
+- [@official@Using List Views](https://reactnative.dev/docs/using-a-listview)
diff --git a/src/data/roadmaps/react-native/content/core-components/listings/list-views/flat-list.md b/src/data/roadmaps/react-native/content/core-components/listings/list-views/flat-list.md
index a868eefe2..469a11acc 100644
--- a/src/data/roadmaps/react-native/content/core-components/listings/list-views/flat-list.md
+++ b/src/data/roadmaps/react-native/content/core-components/listings/list-views/flat-list.md
@@ -2,39 +2,6 @@
 
 `FlatList` is a `React Native` core component that displays a scrolling list of changing, but similarly structured, data. It is an efficient list component that makes use of a limited scrolling `renderWindow`, reducing the memory footprint and creating smooth scrolling. Additionally, `FlatList` supports-Headers, Footers, Pull-to-refresh, and Horizontal scrolling, among other things.
 
-Here is a basic example demonstrating how to use the `FlatList` component:
+Visit the following resources to learn more:
 
-```javascript
-import React from 'react';
-import { FlatList, View, Text } from 'react-native';
-
-const data = [
-  { id: '1', content: 'Item 1' },
-  { id: '2', content: 'Item 2' },
-  { id: '3', content: 'Item 3' },
-  // ...
-];
-
-const renderItem = ({ item }) => (
-  <View>
-    <Text>{item.content}</Text>
-  </View>
-);
-
-const MyFlatList = () => (
-  <FlatList
-    data={data}
-    renderItem={renderItem}
-    keyExtractor={item => item.id}
-  />
-);
-
-export default MyFlatList;
-```
-
-In the example above:
-
-- We import the `FlatList` along with `View` and `Text` components.
-- We have an array of data containing objects with a unique ID and content.
-- `renderItem` is a function that takes an item and returns the components to render for that item.
-- In the `MyFlatList` component, we use the `FlatList` and pass the data, the `renderItem` function, and a `keyExtractor` to extract a key from the item.
\ No newline at end of file
+- [@official@FlatList](https://reactnative.dev/docs/flatlist)
diff --git a/src/data/roadmaps/react-native/content/core-components/listings/list-views/index.md b/src/data/roadmaps/react-native/content/core-components/listings/list-views/index.md
index 07eb8a9f8..ee9b73f6c 100644
--- a/src/data/roadmaps/react-native/content/core-components/listings/list-views/index.md
+++ b/src/data/roadmaps/react-native/content/core-components/listings/list-views/index.md
@@ -2,102 +2,6 @@
 
 List views are an essential component in mobile applications when you need to display a list of items in an organized and efficient way. In React Native, there are two primary components to display a list - `FlatList` and `SectionList`. Let's dive into each one with some examples.
 
-## FlatList
+Visit the following resources to learn more:
 
-A `FlatList` is a simple list view component that renders a list of items in a user-friendly scrolling format. FlatList is great for large lists of data that only render a small number of items on the screen at a time. It supports both horizontal and vertical scrolling, allows you to customize the appearance of items, and provides built-in performance optimizations.
-
-Here's a basic example using FlatList:
-
-```jsx
-import React from 'react';
-import { View, FlatList, Text, StyleSheet } from 'react-native';
-
-const data = [
-  { id: '1', title: 'Item 1' },
-  { id: '2', title: 'Item 2' },
-  { id: '3', title: 'Item 3' },
-];
-
-const renderItem = ({ item }) => (
-  <View style={styles.item}>
-    <Text>{item.title}</Text>
-  </View>
-);
-
-const App = () => (
-  <FlatList
-    data={data}
-    renderItem={renderItem}
-    keyExtractor={item => item.id}
-  />
-);
-
-const styles = StyleSheet.create({
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-## SectionList
-
-A `SectionList` is a more complex list view component that presents items in multiple sections with optional section headers. It is suitable for use cases where you need to categorize data into separate sections and display a header for each section.
-
-Here's a basic example using SectionList:
-
-```jsx
-import React from 'react';
-import { View, SectionList, Text, StyleSheet } from 'react-native';
-
-const data = [
-  {
-    title: 'Section 1',
-    data: ['Item 1.1', 'Item 1.2', 'Item 1.3'],
-  },
-  {
-    title: 'Section 2',
-    data: ['Item 2.1', 'Item 2.2', 'Item 2.3'],
-  },
-];
-
-const renderItem = ({ item }) => (
-  <View style={styles.item}>
-    <Text>{item}</Text>
-  </View>
-);
-
-const renderSectionHeader = ({ section: { title } }) => (
-  <View style={styles.header}>
-    <Text>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SectionList
-    sections={data}
-    keyExtractor={(item, index) => item + index}
-    renderItem={renderItem}
-    renderSectionHeader={renderSectionHeader}
-  />
-);
-
-const styles = StyleSheet.create({
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-  },
-  header: {
-    backgroundColor: 'skyblue',
-    padding: 20,
-  },
-});
-
-export default App;
-```
-
-In summary, `FlatList` and `SectionList` are the primary list view components in React Native. Use `FlatList` for simple lists and when performance is a priority, and use `SectionList` when you need to organize data into multiple sections.
\ No newline at end of file
+- [@official@Using List Views](https://reactnative.dev/docs/using-a-listview)
diff --git a/src/data/roadmaps/react-native/content/core-components/listings/list-views/section-list.md b/src/data/roadmaps/react-native/content/core-components/listings/list-views/section-list.md
index 1cc6a6cb4..ce3a8d913 100644
--- a/src/data/roadmaps/react-native/content/core-components/listings/list-views/section-list.md
+++ b/src/data/roadmaps/react-native/content/core-components/listings/list-views/section-list.md
@@ -2,63 +2,6 @@
 
 `SectionList` is a component used to render sections and headers in a scroll view. It helps to manage and optimize a large list of items divided into categories. It is one of the List View components provided by React Native along with FlatList.
 
-The key difference between SectionList and FlatList is that SectionList separates data items into sections, with headers.
+Visit the following resources to learn more:
 
-Here's an example of how to use a SectionList in your app:
-
-```javascript
-import React, {Component} from 'react';
-import {SectionList, StyleSheet, Text, View, SafeAreaView} from 'react-native';
-
-export default class App extends Component {
-  render() {
-    return (
-      <SafeAreaView style={styles.container}>
-        <SectionList
-          sections={[
-            {
-              title: 'Section 1',
-              data: ['Item 1.1', 'Item 1.2', 'Item 1.3'],
-            },
-            {
-              title: 'Section 2',
-              data: ['Item 2.1', 'Item 2.2', 'Item 2.3'],
-            },
-          ]}
-          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
-          renderSectionHeader={({section}) => (
-            <Text style={styles.sectionHeader}>{section.title}</Text>
-          )}
-          keyExtractor={(item, index) => String(index)}
-        />
-      </SafeAreaView>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingRight: 10,
-    paddingLeft: 10,
-  },
-  sectionHeader: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    backgroundColor: 'lightgrey',
-    padding: 5,
-  },
-  item: {
-    fontSize: 16,
-    padding: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: 'black',
-  },
-});
-```
-
-In this example, we have two sections: 'Section 1' and 'Section 2'. Each section has its own data items.
-
-`renderItem` is a function that takes an object containing an item property and returns a Text component with the item value.
-
-`renderSectionHeader` is a function that takes an object containing a section property and returns a text component with the section's title.
\ No newline at end of file
+- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
diff --git a/src/data/roadmaps/react-native/content/core-components/listings/refresh-control.md b/src/data/roadmaps/react-native/content/core-components/listings/refresh-control.md
index 5df217ebd..acafe8676 100644
--- a/src/data/roadmaps/react-native/content/core-components/listings/refresh-control.md
+++ b/src/data/roadmaps/react-native/content/core-components/listings/refresh-control.md
@@ -1,45 +1,9 @@
 # Refresh Control
 
-`RefreshControl` is a component in React Native that is used to provide pull-to-refresh functionality for scrollable components like `ScrollView`, `ListView`, and `FlatList`. 
+`RefreshControl` is a component in React Native that is used to provide pull-to-refresh functionality for scrollable components like `ScrollView`, `ListView`, and `FlatList`.
 
-## How to use RefreshControl:
+Visit the following resources to learn more:
 
-- Import `RefreshControl` from 'react-native':
-   ```
-   import { RefreshControl } from 'react-native';
-   ```
-- Add `RefreshControl` to a scrollable component (`ScrollView`, `ListView`, or `FlatList`). Here is an example with `FlatList`:
-
-   ```javascript
-   import React, { useState } from 'react';
-   import { FlatList, RefreshControl, Text } from 'react-native';
-
-   const App = () => {
-       const [refreshing, setRefreshing] = useState(false);
-
-       const fetchData = () => {
-           // Fetch the data and update your state accordingly
-       };
-
-       const onRefresh = () => {
-           setRefreshing(true);
-           fetchData().then(() => {
-               setRefreshing(false);
-           });
-       };
-
-       return (
-           <FlatList
-               data={['Item 1', 'Item 2', 'Item 3']}
-               renderItem={({ item }) => <Text>{item}</Text>}
-               refreshControl={
-                   <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-               }
-           />
-       );
-   };
-
-   export default App;
-   ```
-
-In the example above, we have a `FlatList` that renders a list of items. When the user pulls down the list, the `onRefresh` function is triggered and fetches new data. The `refreshing` state is used to control the visibility of the refresh indicator. When `refreshing` is set to `true`, the refresh indicator is shown. It is hidden when `refreshing` is set to `false`.
\ No newline at end of file
+- [@official@Refresh Control](https://reactnative.dev/docs/refreshcontrol)
+- [@official@ScrollView](https://reactnative.dev/docs/ScrollView)
+- [@official@FlatList](https://reactnative.dev/docs/FlatList)
diff --git a/src/data/roadmaps/react-native/content/core-components/listings/scroll-view.md b/src/data/roadmaps/react-native/content/core-components/listings/scroll-view.md
index fe1111ca7..a30852080 100644
--- a/src/data/roadmaps/react-native/content/core-components/listings/scroll-view.md
+++ b/src/data/roadmaps/react-native/content/core-components/listings/scroll-view.md
@@ -2,28 +2,6 @@
 
 In React Native, the `ScrollView` is a generic scrolling container used to provide a scrollable view to its child components. It is useful when you need to display scrollable content larger than the screen, such as lists, images, or text. A `ScrollView` must have a bounded height in order to properly work.
 
-Here's a simple example of how to use the `ScrollView` component in your React Native app:
+Visit the following resources to learn more:
 
-```javascript
-import React from 'react';
-import { ScrollView, Text } from 'react-native';
-
-const MyScrollView = () => {
-  return (
-    <ScrollView>
-      <Text>Item 1</Text>
-      <Text>Item 2</Text>
-      <Text>Item 3</Text>
-      <Text>Item 4</Text>
-      <Text>Item 5</Text>
-      <Text>Item 6</Text>
-    </ScrollView>
-  );
-}
-
-export default MyScrollView;
-```
-
-In this example, the `ScrollView` component is imported from the `react-native` package, and it's used as a container for several `Text` components that represent items in a list. Users can scroll through the items if they don't fit on the screen.
-
-Keep in mind that `ScrollView` is not optimized for long lists of items, and you should use the `FlatList` or `SectionList` components for better performance in those cases. However, it's still useful for smaller content where you need a scrollable area, such as forms or when the content size is unknown.
\ No newline at end of file
+- [@official@ScrollView](https://reactnative.dev/docs/ScrollView)
diff --git a/src/data/roadmaps/react-native/content/core-components/modal.md b/src/data/roadmaps/react-native/content/core-components/modal.md
index 19d04d5de..a2de4ca8d 100644
--- a/src/data/roadmaps/react-native/content/core-components/modal.md
+++ b/src/data/roadmaps/react-native/content/core-components/modal.md
@@ -2,57 +2,6 @@
 
 A `Modal` is a component that displays content on top of the current view, creating an overlay that can be used for various purposes, such as displaying additional information, confirmation messages, or a selection menu.
 
-```jsx
-import React, {useState} from 'react';
-import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
+Visit the following resources to learn more:
 
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-
-  return (
-    <View>
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={modalVisible}
-        onRequestClose={() => {
-          Alert.alert('Modal has been closed.');
-          setModalVisible(!modalVisible);
-        }}>
-        <View>
-          <View>
-            <Text>Hello, I am a Modal!</Text>
-
-            <TouchableHighlight
-              onPress={() => {
-                setModalVisible(!modalVisible);
-              }}>
-              <Text>Hide Modal</Text>
-            </TouchableHighlight>
-          </View>
-        </View>
-      </Modal>
-
-      <TouchableHighlight
-        onPress={() => {
-          setModalVisible(true);
-        }}>
-        <Text>Show Modal</Text>
-      </TouchableHighlight>
-    </View>
-  );
-};
-
-export default App;
-```
-
-In this example, `Modal` is imported from `react-native` and used to create a modal overlay. The modal visibility is managed using the `useState` hook and is toggled using the `TouchableHighlight` components.
-
-Some of the modal properties include:
-
-- `animationType`: Controls how the modal appears and disappears. Possible values are `none`, `slide`, and `fade`. Default is `none`.
-- `transparent`: Determines whether the background is transparent or not. Default is `false`.
-- `visible`: Controls the visibility of the modal. Default is `true`.
-- `onRequestClose`: Called when the user tries to close the modal. Required on Android to properly handle the hardware back button.
-
-For more information and prop details, you can check out the [official documentation](https://reactnative.dev/docs/modal).
\ No newline at end of file
+- [@official@Modal](https://reactnative.dev/docs/modal)
diff --git a/src/data/roadmaps/react-native/content/core-components/pressable.md b/src/data/roadmaps/react-native/content/core-components/pressable.md
index 6fa064f70..e6d06b4d0 100644
--- a/src/data/roadmaps/react-native/content/core-components/pressable.md
+++ b/src/data/roadmaps/react-native/content/core-components/pressable.md
@@ -2,58 +2,6 @@
 
 Pressable is a core component in React Native that makes any view respond properly to touch or press events. It provides a wide range of event handlers for managing user interactions, such as onPress, onPressIn, onPressOut, and onLongPress. With Pressable, you can create custom buttons, cards, or any touchable elements within your app.
 
-To use Pressable in your React Native application, you need to import it from 'react-native':
+Visit the following resources to learn more:
 
-```javascript
-import { Pressable } from 'react-native';
-```
-
-Wrap any view or component you want to make pressable with the Pressable component:
-
-```javascript
-<Pressable onPress={() => console.log('Pressed!')}>
-  <Text>Press me</Text>
-</Pressable>
-```
-
-Pressable allows you to customize its appearance and behavior according to the user interaction state. You can use the `style` prop and pass a function that sets the style based on the state.
-
-Here's an example of a custom button that changes its background color when pressed:
-
-```javascript
-import React from 'react';
-import { Pressable, Text, StyleSheet } from 'react-native';
-
-export default function CustomButton() {
-  return (
-    <Pressable
-      onPress={() => console.log('Pressed!')}
-      style={({ pressed }) => [
-        styles.button,
-        pressed ? styles.pressedButton : styles.normalButton,
-      ]}
-    >
-      <Text style={styles.buttonText}>Press me</Text>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  button: {
-    padding: 10,
-    borderRadius: 5,
-  },
-  normalButton: {
-    backgroundColor: 'blue',
-  },
-  pressedButton: {
-    backgroundColor: 'darkblue',
-  },
-  buttonText: {
-    color: 'white',
-    textAlign: 'center',
-  },
-});
-```
-
-In this example, when the Pressable is pressed, it will change its background color from "blue" to "darkblue".
\ No newline at end of file
+- [@official@Pressable](https://reactnative.dev/docs/pressable)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/core-components/status-bar.md b/src/data/roadmaps/react-native/content/core-components/status-bar.md
index 6197ce7e9..bc402e7a3 100644
--- a/src/data/roadmaps/react-native/content/core-components/status-bar.md
+++ b/src/data/roadmaps/react-native/content/core-components/status-bar.md
@@ -2,42 +2,6 @@
 
 The `StatusBar` component is used to control the appearance of the status bar on the top of the screen. It may strike as a bit unusual since, unlike other React Native components, it doesn't render any visible content. Instead, it sets some native properties that can help customize the look of status bars on Android, iOS, or other platforms.
 
-To use the `StatusBar` component, you need to import it from 'react-native' and use it in your `React` component. Here's an example:
+Visit the following resources to learn more:
 
-```jsx
-import React from 'react';
-import { View, StatusBar } from 'react-native';
-
-const App = () => {
-  return (
-    <View>
-      <StatusBar barStyle="dark-content" backgroundColor="#F0F0F0" />
-      {/* Your other components */}
-    </View>
-  );
-};
-
-export default App;
-```
-
-Here are some common properties you might want to use:
-
-- `barStyle`: Sets the color of the status bar text (light-content, dark-content, or default)
-- `backgroundColor`: Sets the background color of the status bar (Android only)
-- `hidden`: Hides or shows the status bar (true or false)
-- `animated`: Defines whether or not to animate status bar style changes (true or false)
-- `translucent`: Sets the status bar to be translucent (Android only)
-
-You can set these properties like in the following example:
-
-```jsx
-<StatusBar
-  barStyle="light-content"
-  backgroundColor="#6A0E37"
-  hidden={false}
-  animated={true}
-  translucent={true}
-/>
-```
-
-Remember, some properties work only on specific platforms (Android/iOS), so it's essential to check the compatibility when using different properties.
\ No newline at end of file
+- [@official@StatusBar](https://reactnative.dev/docs/statusbar)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/core-components/switch.md b/src/data/roadmaps/react-native/content/core-components/switch.md
index 28122b8d0..fc6608ad0 100644
--- a/src/data/roadmaps/react-native/content/core-components/switch.md
+++ b/src/data/roadmaps/react-native/content/core-components/switch.md
@@ -4,31 +4,6 @@ A `Switch` is a core component in React Native used to implement a "toggle" or "
 
 `Switch` component has a boolean `value` prop (true for on, false for off) and an `onValueChange` event handler, which is triggered whenever the user toggles the switch.
 
-Here's an example of how to use `Switch` in a React Native application:
+Visit the following resources to learn more:
 
-```jsx
-import React, {useState} from 'react';
-import {View, Switch, Text} from 'react-native';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <View>
-      <Text>Enable Feature:</Text>
-      <Switch
-     trackColor={{ false: "#767577", true: "#81b0ff" }}
-     thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
-      onValueChange={toggleSwitch}
-      value={isEnabled}
-      />
-    </View>
-  );
-};
-
-export default App;
-```
-
-In this example, `Switch` component's `value` prop is set to the state hook `isEnabled`. The `onValueChange` event handler triggers `toggleSwitch` function, which updates the state of `isEnabled`. The colors for the track and thumb of the switch can be customized using `trackColor` and `thumbColor` props.
\ No newline at end of file
+- [@official@Switch](https://reactnative.dev/docs/switch)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/core-components/text-input.md b/src/data/roadmaps/react-native/content/core-components/text-input.md
index 4955fd418..1ec1676fc 100644
--- a/src/data/roadmaps/react-native/content/core-components/text-input.md
+++ b/src/data/roadmaps/react-native/content/core-components/text-input.md
@@ -2,36 +2,6 @@
 
 `TextInput` is a core component in React Native that allows the user to enter text. It is commonly used to collect user data, like emails or passwords. You can customize the appearance of `TextInput` by using various props such as `placeholder`, `multiline`, `maxLength`, and more.
 
-Here's a basic example of using `TextInput`:
+Visit the following resources to learn more:
 
-```javascript
-import React, { useState } from 'react';
-import { TextInput, View, Button } from 'react-native';
-
-const App = () => {
-  const [text, setText] = useState('');
-
-  const handleSubmit = () => {
-    alert('You entered: ' + text);
-  };
-
-  return (
-    <View>
-      <TextInput
-        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
-        onChangeText={text => setText(text)}
-        value={text}
-        placeholder="Enter text here"
-      />
-      <Button
-        onPress={handleSubmit}
-        title="Submit"
-      />
-    </View>
-  );
-};
-```
-
-In this example, the `TextInput` component is styled with a border, and there's a placeholder text to show the user the expected input. The `onChangeText` prop is used to manage the state of the input text, and a "Submit" button is provided to process the input data.
-
-For more advanced use cases, you can explore the [official documentation](https://reactnative.dev/docs/textinput).
\ No newline at end of file
+- [@official@Text Input](https://reactnative.dev/docs/textinput)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/core-components/text.md b/src/data/roadmaps/react-native/content/core-components/text.md
index 62ec89fe9..a5a3ffbbe 100644
--- a/src/data/roadmaps/react-native/content/core-components/text.md
+++ b/src/data/roadmaps/react-native/content/core-components/text.md
@@ -2,42 +2,6 @@
 
 The `Text` component is a basic element in React Native used to display text content on the screen. While it has some basic styling properties, you usually nest it inside other components (e.g., `View`) to create more complex UIs.
 
-Some common properties of the `Text` component include:
-
-- `style`: Apply a set of styling rules to the text, such as font size, color, and font family.
-- `numberOfLines`: Limit the number of lines shown in the text. This can be especially useful for long paragraphs or truncating a long title.
-- `onPress`: Add a function that gets called when the user taps on the text.
-- `allowFontScaling`: Specify whether to allow font scaling based on user's font settings.
-
-Here's a simple example using the `Text` component:
-
-```javascript
-import React from 'react';
-import { Text, StyleSheet } from 'react-native';
-
-const SimpleText = () => {
-  return (
-    <Text style={styles.text} numberOfLines={2} onPress={() => alert('Hello')}>
-      This is an example of a Text component in React Native. Tap on me!
-    </Text>
-  );
-};
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 16,
-    color: 'blue',
-    textAlign: 'center',
-    margin: 10,
-    fontFamily: 'Arial',
-  },
-});
-
-export default SimpleText;
-```
-
-In this example, we create a `Text` element with some text content, apply styling, limit it to two lines, and add an `onPress` event.
-
 Visit the following resources to learn more:
 
-- [@article@Text - React Native](https://reactnative.dev/docs/text)
+- [@official@Text](https://reactnative.dev/docs/text)
diff --git a/src/data/roadmaps/react-native/content/core-components/view/index.md b/src/data/roadmaps/react-native/content/core-components/view/index.md
index 1d6c2433a..df0687a13 100644
--- a/src/data/roadmaps/react-native/content/core-components/view/index.md
+++ b/src/data/roadmaps/react-native/content/core-components/view/index.md
@@ -2,30 +2,6 @@
 
 The `View` component in React Native is a fundamental container component that supports various layout styles. It is the equivalent of a `div` element in HTML and can be used to create and style containers for various elements. It is a versatile component that can handle various user interactions, including touch events, as well as serving as a decorative and functional piece in your mobile application.
 
-Here's an example of how to use the `View` component:
+Visit the following resources to learn more:
 
-```jsx
-import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-
-function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Hello, World!</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-In this example, the `View` component is used to create a container with a background color of white and centering its child components both vertically and horizontally. Inside the container, a `Text` component displays the message "Hello, World!".
\ No newline at end of file
+- [@official@View](https://reactnative.dev/docs/view)
diff --git a/src/data/roadmaps/react-native/content/core-components/view/keyboard-avoiding-view.md b/src/data/roadmaps/react-native/content/core-components/view/keyboard-avoiding-view.md
index 13c4e5e6a..776a07129 100644
--- a/src/data/roadmaps/react-native/content/core-components/view/keyboard-avoiding-view.md
+++ b/src/data/roadmaps/react-native/content/core-components/view/keyboard-avoiding-view.md
@@ -2,44 +2,6 @@
 
 `KeyboardAvoidingView` is a built-in React Native component that automatically adjusts its children components' position when the keyboard opens, preventing them from being obscured by the on-screen keyboard. It's a useful component, particularly for forms and input fields where the user needs to see the text they're typing.
 
-## Usage
+Visit the following resources to learn more:
 
-To use the `KeyboardAvoidingView`, simply wrap the desired components that need to avoid the keyboard with the `KeyboardAvoidingView` component. The prop `behavior` is used to specify the type of animating behavior the component will use. This behavior differs depending on the platform and can be one of 'height', 'position', 'padding', or a custom defined behavior.
-
-Here's a basic example:
-
-```jsx
-import React from 'react';
-import { View, TextInput, StyleSheet, KeyboardAvoidingView } from 'react-native';
-
-const App = () => {
-  return (
-    <KeyboardAvoidingView
-      style={styles.container}
-      behavior="padding" // Additional padding when the keyboard is open.
-    >
-      <TextInput
-        placeholder="Type something here"
-        style={styles.textInput}
-      />
-    </KeyboardAvoidingView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textInput: {
-    borderWidth: 1,
-    borderColor: 'black',
-    padding: 10,
-    margin: 20,
-  },
-});
-
-export default App;
-```
-
-Remember to test the behavior on different devices and platforms to ensure the desired result is achieved.
\ No newline at end of file
+- [@official@KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview)
diff --git a/src/data/roadmaps/react-native/content/core-components/view/safe-area-view.md b/src/data/roadmaps/react-native/content/core-components/view/safe-area-view.md
index f65edd500..1c16e0826 100644
--- a/src/data/roadmaps/react-native/content/core-components/view/safe-area-view.md
+++ b/src/data/roadmaps/react-native/content/core-components/view/safe-area-view.md
@@ -2,29 +2,8 @@
 
 `SafeAreaView` is a React Native core component that helps to adjust your app's UI elements and layout to accommodate the notches, curved edges, or home indicator on iOS devices. It is particularly useful for the iPhone X and newer iPhone models, as it ensures that content is rendered within the visible portion of the screen.
 
-Here is an example of using `SafeAreaView` in the code:
+Keep in mind that `SafeAreaView` only works on iOS devices, and has no effect on Android devices. To handle such cases, you can use platform-specific styles or libraries like `react-native-safe-area-context` which provide more control and customization options for additional platforms.
 
-```javascript
-import React from 'react';
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
+Visit the following resources to learn more:
 
-const App = () => {
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text>Hello World!</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
-export default App;
-```
-
-In this example, the `SafeAreaView` component wraps around the content (in this case, a `Text` component), ensuring that the text is displayed within the safe area of the screen. By using `SafeAreaView`, you no longer have to worry about placing content outside the visible area or having it obstructed by the notch on iOS devices.
-
-Keep in mind that `SafeAreaView` only works on iOS devices, and has no effect on Android devices. To handle such cases, you can use platform-specific styles or libraries like `react-native-safe-area-context` which provide more control and customization options for additional platforms.
\ No newline at end of file
+- [@official@SafeAreaView](https://reactnative.dev/docs/safeareaview)
diff --git a/src/data/roadmaps/react-native/content/deep-linking.md b/src/data/roadmaps/react-native/content/deep-linking.md
index 5c03acd30..493c6e48b 100644
--- a/src/data/roadmaps/react-native/content/deep-linking.md
+++ b/src/data/roadmaps/react-native/content/deep-linking.md
@@ -7,50 +7,7 @@ There are two types of deep links:
 1. **Universal Links** (iOS) / **App Links** (Android): These are HTTPS URLs that allow the user to navigate to a specific screen when the app is installed and fallback to a specified website when the app is not installed.
 2. **Custom URL Schemes**: Unique URLs, like `myapp://my-screen`, that can open the app directly to a specific screen when clicked.
 
-## Handling Deep Links in React Native
+Visit the following resources to learn more:
 
-In React Native, you can handle deep links using the `Linking` module which provides the necessary methods to work with deep links.
-
-First, you have to import `Linking` from `"react-native"`:
-
-```js
-import { Linking } from 'react-native';
-```
-
-To handle deep links, you need to add a listener that will be triggered when the app receives a deep link. You can add the listener in the `componentDidMount` lifecycle method and remove it in the `componentWillUnmount` method.
-
-For example:
-
-```js
-import React from 'react';
-import { Linking, Text, View } from 'react-native';
-
-class App extends React.Component {
-  componentDidMount() {
-    Linking.addEventListener('url', this.handleOpenURL);
-  }
-
-  componentWillUnmount() {
-    Linking.removeEventListener('url', this.handleOpenURL);
-  }
-
-  handleOpenURL(event) {
-    // Handle your deep link logic
-    console.log('Received deep link: ', event.url);
-  }
-
-  render() {
-    return (
-      <View>
-        <Text>Hello from React Native!</Text>
-      </View>
-    );
-  }
-}
-
-export default App;
-```
-
-To work with universal links or app links, you need to configure your app on both iOS and Android. You can follow the official guide [here](https://reactnative.dev/docs/linking).
-
-You can also use popular libraries like `react-navigation` or `react-native-navigation` that provide built-in support for handling deep links in your app.
\ No newline at end of file
+- [@article@Deep Linking - React Navigation](https://reactnavigation.org/docs/deep-linking/)
+- [@article@Handle deep links in React Native apps](https://medium.com/the-react-native-log/handle-deep-links-in-react-native-apps-b22055149b3a)
diff --git a/src/data/roadmaps/react-native/content/development-workflow/debugging/dev-menu.md b/src/data/roadmaps/react-native/content/development-workflow/debugging/dev-menu.md
index 3534c14dd..57cecb889 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/debugging/dev-menu.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/debugging/dev-menu.md
@@ -5,4 +5,6 @@ React Native provides an in-app developer menu which offers several debugging op
 - Android: `Cmd + M` or `Ctrl + M`
 - iOS: `Cmd + D` or `Ctrl + D`
 
-Visit the [React Native docs](https://reactnative.dev/docs/debugging) for more information.
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Debugging](https://reactnative.dev/docs/debugging)
diff --git a/src/data/roadmaps/react-native/content/development-workflow/debugging/devtools.md b/src/data/roadmaps/react-native/content/development-workflow/debugging/devtools.md
index 1290af714..a079c9bfe 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/debugging/devtools.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/debugging/devtools.md
@@ -1,5 +1,7 @@
-# React Native - DevTools
+# DevTools
 
+React Native DevTools are essential tools that help developers debug and optimize their applications during the development process.
 
-You can use the [standalone version of React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) to debug the React component hierarchy. Visit the [React Native Documentation](https://reactnative.dev/docs/react-devtools) for more information.
+Visit the following resources to learn more:
 
+- [@official@Devtools](https://reactnative.dev/docs/react-devtools)
diff --git a/src/data/roadmaps/react-native/content/development-workflow/debugging/fast-refresh.md b/src/data/roadmaps/react-native/content/development-workflow/debugging/fast-refresh.md
index cc874cc72..0a641fd96 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/debugging/fast-refresh.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/debugging/fast-refresh.md
@@ -2,4 +2,6 @@
 
 Fast Refresh is a React Native feature that allows you to get near-instant feedback while making changes in your code. It achieves this by reloading only the portion of the app that was changed, without losing the current state. This makes the development process a lot smoother as you don't have to wait for the entire app to rebuild after making a change.
 
-Learn more about Fast Refresh and how to enable it in the [React Native documentation](https://reactnative.dev/docs/fast-refresh).
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Fast Refresh](https://reactnative.dev/docs/fast-refresh)
diff --git a/src/data/roadmaps/react-native/content/development-workflow/debugging/index.md b/src/data/roadmaps/react-native/content/development-workflow/debugging/index.md
index 99052a1ee..4f221da36 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/debugging/index.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/debugging/index.md
@@ -1,3 +1,9 @@
 # Debugging
 
-Debugging is an essential aspect of the development workflow in React Native. Learn all about debugging in React Native in the [Debugging section of the React Native documentation](https://reactnative.dev/docs/debugging).
\ No newline at end of file
+Debugging is an essential aspect of the development workflow in React Native. Debugging in React Native is a crucial part of the development process, allowing developers to identify and fix issues in their applications
+
+Visit the following resources to learn more:
+
+- [@official@Debugging](https://reactnative.dev/docs/debugging)
+- [@official@Fast Refresh](https://reactnative.dev/docs/fast-refresh)
+- [@official@Devtools](https://reactnative.dev/docs/react-devtools)
diff --git a/src/data/roadmaps/react-native/content/development-workflow/debugging/logbox.md b/src/data/roadmaps/react-native/content/development-workflow/debugging/logbox.md
index cb414cbc7..e63a889e9 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/debugging/logbox.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/debugging/logbox.md
@@ -2,12 +2,6 @@
 
 LogBox is a new feature added to React Native to improve how logs are displayed and managed in your development environment. It provides better visualization and organization of logs, warnings, and errors, making it easier for developers to address issues in their code.
 
-- **Better Error Formatting**: Errors are displayed in a more understandable format with clear syntax highlighting and relevant information regarding the error and the specific code that caused it.
+Visit the following resources to learn more:
 
-- **Improved Warnings**: Warnings now come with filtering and sorting options, allowing you to control which warnings you want to prioritize or ignore during development.
-
-- **Component Stacks**: Instead of displaying the raw call stack, LogBox provides a component stack that shows component hierarchy, allowing you to pinpoint the exact component causing the issue.
-
-- **Customizable**: You can disable LogBox, customize its behavior, or even extend it with your own code to tailor your debugging experience.
-
-Read more about LogBox in the [official documentation](https://reactnative.dev/docs/debugging#logbox).
\ No newline at end of file
+- [@official@Debugging LogBox](https://reactnative.dev/docs/debugging#logbox)
diff --git a/src/data/roadmaps/react-native/content/development-workflow/debugging/sourcemaps.md b/src/data/roadmaps/react-native/content/development-workflow/debugging/sourcemaps.md
index f4104abf6..91e056187 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/debugging/sourcemaps.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/debugging/sourcemaps.md
@@ -9,4 +9,8 @@ There are various types of sourcemaps which give different levels of detail to t
 - `cheap-module-source-map`: Similar to `cheap-source-map` but with support for modules.
 - `source-map`: Full source mapping with both line and column information. It is accurate, though slower compared to other options.
 
-After generating sourcemaps, you can use them to debug errors more efficiently, as they will reference the original locations in the source code. The browser's developer tools, like Google Chrome, have built-in support for sourcemaps, providing the ability to navigate and debug errors with ease.
\ No newline at end of file
+After generating sourcemaps, you can use them to debug errors more efficiently, as they will reference the original locations in the source code. The browser's developer tools, like Google Chrome, have built-in support for sourcemaps, providing the ability to navigate and debug errors with ease.
+
+Visit the following resources to learn more:
+
+- [@official@SourceMaps](https://reactnative.dev/docs/0.71/sourcemaps)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/development-workflow/index.md b/src/data/roadmaps/react-native/content/development-workflow/index.md
index 689508ae8..4d02bb10f 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/index.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/index.md
@@ -1,3 +1,8 @@
 # Development Workflow
 
-React native has a decent guide on how to get started with development workflow. Visit the [Workflow section](https://reactnative.dev/docs/running-on-device) of the official documentation to learn about different topics.
\ No newline at end of file
+React native has a decent guide on how to get started with development workflow.
+
+Visit the following resources to learn more:
+
+- [@article@Continuous Integration and Deployment for React Native Apps](https://dev.to/medaimane/continuous-integration-and-deployment-for-react-native-apps-streamlining-development-workflow-4i04)
+- [@official@Running on Device](https://reactnative.dev/docs/running-on-device)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/development-workflow/running-on-device.md b/src/data/roadmaps/react-native/content/development-workflow/running-on-device.md
index 75367f8f6..7ba04a093 100644
--- a/src/data/roadmaps/react-native/content/development-workflow/running-on-device.md
+++ b/src/data/roadmaps/react-native/content/development-workflow/running-on-device.md
@@ -1,3 +1,7 @@
 # Running on Device
 
-It's always a good idea to test your app on an actual device before releasing it to your users. [This document](https://reactnative.dev/docs/running-on-device) will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
\ No newline at end of file
+It's always a good idea to test your app on an actual device before releasing it to your users.
+
+Visit the following resources to learn more:
+
+- [@official@Running on Device](https://reactnative.dev/docs/running-on-device)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/environment-setup/expo/create-expo-app.md b/src/data/roadmaps/react-native/content/environment-setup/expo/create-expo-app.md
index b36397b4d..551ede7d0 100644
--- a/src/data/roadmaps/react-native/content/environment-setup/expo/create-expo-app.md
+++ b/src/data/roadmaps/react-native/content/environment-setup/expo/create-expo-app.md
@@ -2,4 +2,6 @@
 
 `create-expo-app` is a command line tool that generates a React Native project that works out of the box with Expo. It is the easiest way to get started building a new React Native application.
 
-- [@article@Official Expo Documentation](https://docs.expo.dev/tutorial/create-your-first-app/)
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Create Expo App](https://docs.expo.dev/tutorial/create-your-first-app/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/environment-setup/expo/expo-snack.md b/src/data/roadmaps/react-native/content/environment-setup/expo/expo-snack.md
index 3510c3d35..2728e9ac3 100644
--- a/src/data/roadmaps/react-native/content/environment-setup/expo/expo-snack.md
+++ b/src/data/roadmaps/react-native/content/environment-setup/expo/expo-snack.md
@@ -2,4 +2,6 @@
 
 Expo Snack is an online playground and development environment for creating and testing React Native projects. With Snack, you can easily edit and preview your code changes directly in your browser or on a mobile device using the Expo Go app. It offers a fast, easy, and convenient way to develop, test, and share your projects without needing to set up a local development environment.
 
-- [@article@Expo Snack Website](https://snack.expo.dev/)
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Expo Snack](https://snack.expo.dev/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/environment-setup/expo/expo-tradeoffs.md b/src/data/roadmaps/react-native/content/environment-setup/expo/expo-tradeoffs.md
index 4c57dbb6a..1dc14dd6a 100644
--- a/src/data/roadmaps/react-native/content/environment-setup/expo/expo-tradeoffs.md
+++ b/src/data/roadmaps/react-native/content/environment-setup/expo/expo-tradeoffs.md
@@ -1,29 +1,7 @@
 # Expo Tradeoffs
 
-Expo is a powerful tool that simplifies the React Native development process, but it has some limitations. Here's a summary of the tradeoffs you may face when using Expo.
+Expo is a powerful tool that simplifies the React Native development process, but it has some tradeoffs to consider. One limitation is the availability of native modules; while Expo provides a set of pre-built modules, it may not cover all functionalities needed for specific apps, requiring developers to eject from the managed workflow for custom solutions. Performance can also be an issue, as the additional layer Expo adds may lead to slower apps, especially for larger projects, whereas the bare workflow offers more control and potentially better performance. Additionally, Expo apps tend to have a larger size due to the inclusion of the entire Expo SDK, which can be inefficient compared to non-Expo apps that only include necessary modules. Developers relying on Expo must also wait for their release cycle for updates, which can delay access to new React Native features or bug fixes. Ejecting from Expo can present challenges, as it may require significant code adjustments and dependency migrations. Lastly, Expo's abstraction limits customizability, meaning that for advanced customizations, developers may need to switch to a bare workflow. Overall, while Expo provides great tooling and simplifies development, its limitations should be carefully weighed before choosing it for app development.
 
-## Limited native modules
+Visit the following resources to learn more:
 
-Expo offers a set of pre-built native modules, which are really helpful but might not cover all the functionalities required for your specific app. If you need a custom native module or a third-party library that is not supported by Expo, you'll have to eject from the Expo managed workflow and switch to the bare-workflow or create a custom native module (native code) yourself.
-
-## Performance
-
-Expo adds an extra layer to your React Native app, which can cause performance issues, especially for large or complex apps. The bare-workflow may provide better performance as you have more control over the native libraries and app optimization.
-
-## App size
-
-Expo apps tend to have a larger app size because they include the entire Expo SDK, regardless of which modules you use in your app. In contrast, non-Expo apps can optimize their size by including only the required native modules.
-
-## Updates and upgrades
-
-When you rely on Expo, you depend on their release cycle for updates and upgrades. If React Native adds a new feature or fixes a bug, you have to wait for an updated Expo version to implement it. This may cause delays or limitations in your app development process.
-
-## Ejecting complications
-
-If you start a project with Expo and later decide to eject and use regular React Native, you might face challenges migrating your code and adjusting to the new configuration. You may need to rewrite some parts of your code or manually migrate dependencies.
-
-## Limited customizability
-
-Expo abstracts various aspects of customization and configuration, which can be a double-edged sword. If you need additional customizations that are not supported by Expo, you'll have to eject or switch to a bare-workflow project, which gives you more control over the native code.
-
-In summary, while Expo offers great tooling and simplifies the development process, it has certain limitations that you should consider before choosing it for your app development.
\ No newline at end of file
+- [@article@Should you use Expo or Bare React Native?](https://medium.com/@andrew.chester/should-you-use-expo-or-bare-react-native-8dd400f4a468/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/environment-setup/expo/index.md b/src/data/roadmaps/react-native/content/environment-setup/expo/index.md
index c195bd665..f0af2488d 100644
--- a/src/data/roadmaps/react-native/content/environment-setup/expo/index.md
+++ b/src/data/roadmaps/react-native/content/environment-setup/expo/index.md
@@ -2,4 +2,7 @@
 
 Expo is a framework and a platform that allows you to develop, build, and deploy React Native applications easily and quickly. It simplifies the development process and provides a set of useful tools and services, including its own CLI (Command Line Interface), a managed workflow, and an SDK (Software Development Kit) with pre-built modules for common features.
 
-Visit the [Expo CLI Quickstart](https://docs.expo.dev/get-started/create-a-project/) page for detailed instructions on how to set up your environment.
+Visit the following resources to learn more:
+
+- [@official@Create Expo App](https://docs.expo.dev/tutorial/create-your-first-app/)
+- [@officialExpo CLI Quickstart](https://docs.expo.dev/get-started/create-a-project/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/environment-setup/index.md b/src/data/roadmaps/react-native/content/environment-setup/index.md
index 6e67c9a93..71d03710c 100644
--- a/src/data/roadmaps/react-native/content/environment-setup/index.md
+++ b/src/data/roadmaps/react-native/content/environment-setup/index.md
@@ -6,10 +6,11 @@ In React Native, setting up the development environment is a crucial step. The e
 
 Expo CLI is a command-line tool built for creating and managing React Native projects easily. It streamlines your development process by providing an entire development environment, including building and deploying your app to both iOS and Android platforms.
 
-Visit the [Expo CLI Quickstart](https://docs.expo.dev/get-started/create-a-project) page for detailed instructions on how to set up your environment.
-
 ## React Native CLI
 
 React Native CLI is the official command-line interface for building native mobile apps using React Native. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
 
-Visit the [React Native CLI Quickstart](https://reactnative.dev/docs/environment-setup?guide=native) page for detailed instructions on how to set up your environment.
+Visit the following resources to learn more:
+
+- [@official@React Native CLI](https://reactnative.dev/docs/environment-setup?guide=native)
+- [@official@Expo CLI Quickstart](https://docs.expo.dev/get-started/create-a-project)
diff --git a/src/data/roadmaps/react-native/content/environment-setup/metro-bundler.md b/src/data/roadmaps/react-native/content/environment-setup/metro-bundler.md
index e7d9c3e9d..a08a7f523 100644
--- a/src/data/roadmaps/react-native/content/environment-setup/metro-bundler.md
+++ b/src/data/roadmaps/react-native/content/environment-setup/metro-bundler.md
@@ -2,4 +2,6 @@
 
 Metro Bundler is the default bundler for React Native applications. It's a JavaScript module bundler that takes all your application code and dependencies, and bundles them together into a single JavaScript file or multiple files (based on platform).
 
-Visit the [Metro Bundler](https://facebook.github.io/metro/) website for more information.
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Metro Bundler](https://facebook.github.io/metro/)
diff --git a/src/data/roadmaps/react-native/content/environment-setup/react-native-cli.md b/src/data/roadmaps/react-native/content/environment-setup/react-native-cli.md
index 94967d5da..5846e6d4d 100644
--- a/src/data/roadmaps/react-native/content/environment-setup/react-native-cli.md
+++ b/src/data/roadmaps/react-native/content/environment-setup/react-native-cli.md
@@ -2,4 +2,6 @@
 
 React Native CLI is the official command-line interface for building native mobile apps using React Native. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
 
-Visit the [React Native CLI Quickstart](https://reactnative.dev/docs/environment-setup?guide=native) page for detailed instructions on how to set up your environment.
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@React Native CLI](https://reactnative.dev/docs/environment-setup?guide=native)
diff --git a/src/data/roadmaps/react-native/content/interactions/animations.md b/src/data/roadmaps/react-native/content/interactions/animations.md
index 18485e928..2bf6a272a 100644
--- a/src/data/roadmaps/react-native/content/interactions/animations.md
+++ b/src/data/roadmaps/react-native/content/interactions/animations.md
@@ -2,73 +2,12 @@
 
 React Native supports two types of animations: `Animated` and `LayoutAnimation`. The `Animated` API provides a basic set of methods for creating and managing animations, while the `LayoutAnimation` API provides a way to animate changes from one layout to another.
 
-## Animated
-
 `Animated` is a declarative API that focuses on handling animation-related calculations. It allows you to create and combine animations with fine-grained control over the specific properties that are being animated. You can use this API to create a variety of effects, such as fading, scaling, and translating components on the screen.
 
-Here's a simple example of how to use `Animated` to move a view across the screen:
-
-```javascript
-import React, { Component } from "react";
-import { Animated, View } from "react-native";
-
-class MoveView extends Component {
-  constructor(props) {
-    super(props);
-    this.position = new Animated.ValueXY({ x: 0, y: 0 });
-  }
-  
-  componentDidMount() {
-    Animated.timing(this.position, {
-      toValue: { x: 100, y: 100 },
-      duration: 1000,
-    }).start();
-  }
-
-  render() {
-    return (
-      <Animated.View style={this.position.getLayout()}>
-        {/* Your content here */}
-      </Animated.View>
-    );
-  }
-}
-```
-
-It creates a new `Animated` value that represents the position of the view and moves it to another location over a duration of 1000 milliseconds.
-
-## LayoutAnimation
-
 `LayoutAnimation` is a higher-level abstraction for animating changes to the layout. Instead of animating individual properties, you define how the changes should occur and React Native takes care of updating the layout accordingly. This is particularly useful for animating multiple components or modifying the layout in response to user interaction, such as adding/removing/reordering items in a list.
 
-Here's an example of how to use `LayoutAnimation` to animate a view when it is added to or removed from a list of items:
-
-```javascript
-import React, { Component } from "react";
-import { LayoutAnimation, TouchableOpacity, View } from "react-native";
-
-class ListItem extends Component {
-  componentDidMount() {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }
-
-  componentWillUnmount() {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }
-
-  render() {
-    return (
-      <View style={styles.itemContainer}>
-        <TouchableOpacity onPress={this.props.onRemove}>
-          {/* Button content here */}
-        </TouchableOpacity>
-        {/* Item content here */}
-      </View>
-    );
-  }
-}
-```
-
-In this example, whenever a `ListItem` component is added or removed, the layout will be animated using the preset `easeInEaseOut` configuration.
+Visit the following resources to learn more:
 
-These two animation methods in React Native help you create smooth, natural-looking animations for a variety of interactions and use cases in your applications.
\ No newline at end of file
+- [@official@Animations](https://reactnative.dev/docs/animations)
+- [@official@LayoutAnimations](https://reactnative.dev/docs/layoutanimation)
+- [@official@Animated](https://reactnative.dev/docs/animated)
diff --git a/src/data/roadmaps/react-native/content/interactions/gesture.md b/src/data/roadmaps/react-native/content/interactions/gesture.md
index 15822dee2..e38347767 100644
--- a/src/data/roadmaps/react-native/content/interactions/gesture.md
+++ b/src/data/roadmaps/react-native/content/interactions/gesture.md
@@ -2,83 +2,8 @@
 
 Gesture handling is an essential and powerful feature in React Native that helps create interactive and responsive user interfaces. React Native provides several built-in components and libraries to recognize and respond to different types of user gestures. Some of the common gestures include tapping, swiping, dragging, and pinching.
 
-## Touchable Components
+Visit the following resources to learn more:
 
-React Native offers several "Touchable" components to handle simple gestures like tapping, long-pressing, and double-tapping. Some of these components include:
-
-- **TouchableOpacity**: This component allows you to specify a function that gets executed when the touchable area is pressed.
-
-```jsx
-import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
-
-const App = () => (
-  <TouchableOpacity onPress={() => console.log('Pressed!')}>
-    <Text>Press me!</Text>
-  </TouchableOpacity>
-);
-```
-
-- **TouchableHighlight**: This component highlights the touchable area by changing the background color when it's pressed.
-
-```jsx
-import React from 'react';
-import { TouchableHighlight, Text } from 'react-native';
-
-const App = () => (
-  <TouchableHighlight onPress={() => console.log('Pressed!')} underlayColor="lightblue">
-    <Text>Press me!</Text>
-  </TouchableHighlight>
-);
-```
-
-- **TouchableWithoutFeedback**: This component provides a simple wrapper for touchable components without feedback. This is useful for customizing feedback of touchable components.
-
-```jsx
-import React from 'react';
-import { TouchableWithoutFeedback, View, Text } from 'react-native';
-
-const App = () => (
-  <TouchableWithoutFeedback onPress={() => console.log('Pressed!')}>
-    <View>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableWithoutFeedback>
-);
-```
-
-## PanResponder
-
-For more advanced gesture handling, React Native's `PanResponder` can be used. It is a flexible and powerful gesture responder system that helps in recognizing and capturing complex gestures involving multiple touches, drags, and pans.
-
-```jsx
-import React, { useRef } from 'react';
-import { PanResponder, View, StyleSheet } from 'react-native';
-
-const App = () => {
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onPanResponderMove: (evt, gestureState) => {
-        console.log('Gesture moved', gestureState);
-      },
-      onPanResponderRelease: (evt, gestureState) => {
-        console.log('Gesture ended', gestureState);
-      },
-    })
-  ).current;
-
-  return <View style={styles.container} {...panResponder.panHandlers} />;
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'lightblue',
-  },
-});
-
-export default App;
-```
-
-Using these components and libraries, you can implement a wide range of gesture interactions in your React Native applications to make your user interfaces responsive and intuitive.
\ No newline at end of file
+- [@official@Animations](https://reactnative.dev/docs/animations)
+- [@official@LayoutAnimations](https://reactnative.dev/docs/layoutanimation)
+- [@official@Animated](https://reactnative.dev/docs/animated)
diff --git a/src/data/roadmaps/react-native/content/interactions/index.md b/src/data/roadmaps/react-native/content/interactions/index.md
index 7c64bb6e4..28e1b4683 100644
--- a/src/data/roadmaps/react-native/content/interactions/index.md
+++ b/src/data/roadmaps/react-native/content/interactions/index.md
@@ -2,139 +2,7 @@
 
 Interaction in React Native means dealing with how the user can interact with your application. This typically involves handling touch events, gestures, and animations to provide a more engaging and dynamic user experience. There are several built-in components and libraries available in React Native to help you build interactive elements in your app.
 
-## Touchables
+Visit the following resources to learn more:
 
-Touchable components are used to recognize various touch events in your application. React Native provides a few touchable components that you can use:
-
-- **TouchableHighlight**: Responds to the press event with a visual effect, such as highlighting the touched area.
-  
-  ```jsx
-  import { TouchableHighlight, Text } from 'react-native';
-
-  function MyButton() {
-    return (
-      <TouchableHighlight onPress={() => console.log('Button pressed')}>
-        <Text>Press me!</Text>
-      </TouchableHighlight>
-    );
-  }
-  ```
-
-- **TouchableOpacity**: Responds to the press events by making the touched area semi-transparent.
-  
-  ```jsx
-  import { TouchableOpacity, Text } from 'react-native';
-
-  function MyButton() {
-    return (
-      <TouchableOpacity onPress={() => console.log('Button pressed')}>
-        <Text>Press me!</Text>
-      </TouchableOpacity>
-    );
-  }
-  ```
-
-- **TouchableWithoutFeedback**: Responds to the press events without any visual feedback.
-  
-  ```jsx
-  import { TouchableWithoutFeedback, Text } from 'react-native';
-
-  function MyButton() {
-    return (
-      <TouchableWithoutFeedback onPress={() => console.log('Button pressed')}>
-        <Text>Press me!</Text>
-      </TouchableWithoutFeedback>
-    );
-  }
-  ```
-
-## Gesture Responder System
-
-The Gesture Responder System is a low-level API for capturing touch events and managing touch responsiveness in a React Native application. It allows components to take ownership of touch events and determine how they should be handled.
-
-```jsx
-import { View, Text, StyleSheet } from 'react-native';
-
-function MyComponent() {
-  return (
-    <View
-      style={styles.container}
-      onStartShouldSetResponder={() => true}
-      onResponderGrant={(event) => console.log('Touch started')}
-      onResponderMove={(event) => console.log('Touch moving')}
-      onResponderRelease={(event) => console.log('Touch released')}
-    >
-      <Text>Touch me!</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderWidth: 1,
-    borderColor: 'black',
-    padding: 10,
-  },
-});
-```
-
-## PanResponder
-
-PanResponder is a gesture responder helper that deals with touch events using the Gesture Responder System. It simplifies creating components that respond to various touch events.
-
-```jsx
-import { PanResponder, View, Text, StyleSheet } from 'react-native';
-
-function MyComponent() {
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderGrant: (event) => console.log('Touch started'),
-    onPanResponderMove: (event) => console.log('Touch moving'),
-    onPanResponderRelease: (event) => console.log('Touch released'),
-  });
-
-  return (
-    <View style={styles.container} {...panResponder.panHandlers}>
-      <Text>Touch me!</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderWidth: 1,
-    borderColor: 'black',
-    padding: 10,
-  },
-});
-```
-
-## Animated
-
-The `Animated` library provides a way to create smooth animations in a React Native application. It can handle various types of animations, such as opacity, scaling, and rotation.
-
-```jsx
-import { Animated, TouchableOpacity } from 'react-native';
-
-function MyAnimatedComponent() {
-  const opacity = new Animated.Value(1);
-
-  function animateOpacity() {
-    Animated.timing(opacity, {
-      toValue: 0,
-      duration: 1000,
-      useNativeDriver: true,
-    }).start();
-  }
-
-  return (
-    <TouchableOpacity onPress={animateOpacity}>
-      <Animated.View style={{ opacity }}>
-        {/* Your content */}
-      </Animated.View>
-    </TouchableOpacity>
-  );
-}
-```
-
-These components and libraries will help you build more interactive and engaging user experiences in your React Native applications.
\ No newline at end of file
+- [@official@Animations](https://reactnative.dev/docs/animations)
+- [@official@LayoutAnimations](https://reactnative.dev/docs/layoutanimation)
diff --git a/src/data/roadmaps/react-native/content/interactions/screen-navigation.md b/src/data/roadmaps/react-native/content/interactions/screen-navigation.md
index 072ecc306..bacf71ffa 100644
--- a/src/data/roadmaps/react-native/content/interactions/screen-navigation.md
+++ b/src/data/roadmaps/react-native/content/interactions/screen-navigation.md
@@ -4,5 +4,4 @@ In React Native, navigating from one screen to another is a crucial aspect of ap
 
 Learn more from the following resources:
 
-- [@opensource@React Native Navigation](https://github.com/wix/react-native-navigation)
-- [@article@React Navigation](https://reactnavigation.org/)
\ No newline at end of file
+- [@official@React Navigation](https://reactnavigation.org/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/interactions/scrolling-swiping.md b/src/data/roadmaps/react-native/content/interactions/scrolling-swiping.md
index 7822f5571..ce878d602 100644
--- a/src/data/roadmaps/react-native/content/interactions/scrolling-swiping.md
+++ b/src/data/roadmaps/react-native/content/interactions/scrolling-swiping.md
@@ -2,91 +2,8 @@
 
 In React Native, scrolling and swiping interactions can be defined and customized with a set of built-in components. These components are efficient and provide fluid navigation through the elements inside them.
 
-## Scrolling
+Visit the following resources to learn more:
 
-React Native provides `ScrollView` and `FlatList` components to handle scrolling interactions. Both components have their own use cases. Let's discuss them in detail:
-
-- **ScrollView**: Used for simple and short lists with a known number of elements. It renders all the child elements in memory at once, which can negatively impact performance for longer lists.
-
-Example:
-```javascript
-import React from 'react';
-import { ScrollView, Text } from 'react-native';
-
-const ScrollViewExample = () => (
-  <ScrollView>
-    {['Element 1', 'Element 2', 'Element 3'].map((item, index) => (
-      <Text key={index}>{item}</Text>
-    ))}
-  </ScrollView>
-);
-```
-
-- **FlatList**: Used for long and complex lists where the number of elements is unknown or potentially infinite. It optimizes performance by rendering only the currently visible elements in the viewport.
-
-Example:
-```javascript
-import React from 'react';
-import { FlatList, Text } from 'react-native';
-
-const DATA = [
-  { id: '1', text: 'Element 1' },
-  { id: '2', text: 'Element 2' },
-  { id: '3', text: 'Element 3' },
-];
-
-const renderItem = ({ item }) => (
-  <Text>{item.text}</Text>
-);
-
-const FlatListExample = () => (
-  <FlatList
-    data={DATA}
-    renderItem={renderItem}
-    keyExtractor={(item) => item.id}
-  />
-);
-```
-
-## Swiping
-
-To implement swiping in React Native, the community-driven package `react-native-gesture-handler` is commonly used. One of its components is `Swipeable`, which allows you to create swipeable elements with custom swipe actions.
-
-Example:
-
-```javascript
-import React from 'react';
-import { Text, View } from 'react-native';
-import { RectButton } from 'react-native-gesture-handler';
-import Swipeable from 'react-native-gesture-handler/Swipeable';
-
-const RightActions = (progress, dragX, onPress) => {
-  return (
-    <RectButton onPress={onPress}>
-      <View>
-        <Text>Delete</Text>
-      </View>
-    </RectButton>
-  );
-};
-
-const SwipeableExample = () => {
-  const handleDelete = () => {
-    alert('Delete action');
-  };
-
-  return (
-    <Swipeable
-      renderRightActions={(progress, dragX) =>
-        RightActions(progress, dragX, handleDelete)
-      }
-    >
-      <View>
-        <Text>Swipeable Element</Text>
-      </View>
-    </Swipeable>
-  );
-};
-```
-
-In summary, React Native provides various components for smooth scrolling and swiping interactions. Components like `ScrollView`, `FlatList`, and `react-native-gesture-handler` are essential tools in creating a seamless user experience.
\ No newline at end of file
+- [@official@Handling Touches](https://reactnative.dev/docs/handling-touches)
+- [@official@Using a ScrollView](https://reactnative.dev/docs/using-a-scrollview)
+- [@article@React Native Gesture Handler: Swipe, long-press, and more](https://blog.logrocket.com/react-native-gesture-handler-tutorial-examples/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/interactions/touchables.md b/src/data/roadmaps/react-native/content/interactions/touchables.md
index 556e6faf9..63b1f1d07 100644
--- a/src/data/roadmaps/react-native/content/interactions/touchables.md
+++ b/src/data/roadmaps/react-native/content/interactions/touchables.md
@@ -1,77 +1,8 @@
 # Touchables
 
-In React Native, `Touchable` components are used to handle user interactions like taps, long presses, and double-taps on the appropriate elements. The main Touchable components include:
+In React Native, `Touchable` components are used to handle user interactions like taps, long presses, and double-taps on the appropriate elements. Each of these components is from the `react-native` package, except `TouchableScale` which is from `react-native-touchable-scale`. They can be used interchangeably depending on the type of interaction you want to provide. The main `props` used with these components are `onPress`, `onLongPress`, and some component-specific ones like `underlayColor` for `TouchableHighlight`.
 
-- `TouchableOpacity`: The opacity of the wrapped view is decreased when it's active.
-   
-   ```jsx
-   import { TouchableOpacity } from 'react-native';
+Visit the following resources to learn more:
 
-   <TouchableOpacity
-     onPress={() => {
-       alert('Tapped!');
-     }}
-   >
-     <Text>Tap me</Text>
-   </TouchableOpacity>
-   ```
-
-- `TouchableHighlight`: The view is highlighted with a specified color when active.
-
-   ```jsx
-   import { TouchableHighlight } from 'react-native';
-
-   <TouchableHighlight
-     onPress={() => {
-       alert('Tapped!');
-     }}
-     underlayColor="gray"
-   >
-     <Text>Tap me</Text>
-   </TouchableHighlight>
-   ```
-
-- `TouchableWithoutFeedback`: No visual feedback is provided when the view is tapped.
-
-   ```jsx
-   import { TouchableWithoutFeedback } from 'react-native';
-
-   <TouchableWithoutFeedback
-     onPress={() => {
-       alert('Tapped!');
-     }}
-   >
-     <Text>Tap me</Text>
-   </TouchableWithoutFeedback>
-   ```
-
-- `TouchableNativeFeedback`: Provides additional Android-specific visual feedback.
-
-   ```jsx
-   import { TouchableNativeFeedback } from 'react-native';
-
-   <TouchableNativeFeedback
-     onPress={() => {
-       alert('Tapped!');
-     }}
-   >
-     <Text>Tap me</Text>
-   </TouchableNativeFeedback>
-   ```
-
-- `TouchableScale`: The view will slightly change scale when pressed.
-
-   ```jsx
-   import { TouchableScale } from 'react-native-touchable-scale';
-
-   <TouchableScale
-     onPress={() => {
-       alert('Tapped!');
-     }}
-     activeScale={0.9}
-   >
-     <Text>Tap me</Text>
-   </TouchableScale>
-   ```
-
-Each of these components is from the `react-native` package, except `TouchableScale` which is from `react-native-touchable-scale`. They can be used interchangeably depending on the type of interaction you want to provide. The main `props` used with these components are `onPress`, `onLongPress`, and some component-specific ones like `underlayColor` for `TouchableHighlight`.
+- [@official@Handling Touches](https://reactnative.dev/docs/handling-touches)
+- [@official@TouchableOpacity](https://reactnative.dev/docs/touchableopacity)
diff --git a/src/data/roadmaps/react-native/content/introduction/index.md b/src/data/roadmaps/react-native/content/introduction/index.md
index 8cb4b11ac..414a527be 100644
--- a/src/data/roadmaps/react-native/content/introduction/index.md
+++ b/src/data/roadmaps/react-native/content/introduction/index.md
@@ -4,6 +4,6 @@ React Native is an open-source framework developed by Facebook that allows devel
 
 Visit the following resources to learn more:
 
-- [@article@Official Website](https://reactnative.dev/)
-- [@article@Official Getting Started to React Native](https://reactnative.dev/docs/getting-started)
+- [@official@React Native](https://reactnative.dev/)
+- [@official@Getting Started with React Native](https://reactnative.dev/docs/getting-started)
 - [@video@React Native Course for Beginners in 2024 | Build a Full Stack React Native App](https://www.youtube.com/watch?v=ZBCUegTZF7M)
diff --git a/src/data/roadmaps/react-native/content/introduction/react-native-alternatives.md b/src/data/roadmaps/react-native/content/introduction/react-native-alternatives.md
index ce78974b6..8858ee572 100644
--- a/src/data/roadmaps/react-native/content/introduction/react-native-alternatives.md
+++ b/src/data/roadmaps/react-native/content/introduction/react-native-alternatives.md
@@ -2,7 +2,9 @@
 
 React Native is a popular choice for cross-platform application development, but there are other options available. Some of the common alternatives to React Native are Flutter, Ionic and Xamarin. Flutter being the most popular alternative to React Native.
 
-- [@article@Flutter Official Website](https://flutter.dev/)
-- [@article@Ionic Official Website](https://ionicframework.com/)
-- [@article@Xamarin Official Website](https://dotnet.microsoft.com/apps/xamarin)
+Visit the following resources to learn more:
+
+- [@official@Flutter](https://flutter.dev/)
+- [@official@Ionic](https://ionicframework.com/)
+- [@official@Xamarin](https://dotnet.microsoft.com/apps/xamarin)
 - [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/introduction/what-is-react-native.md b/src/data/roadmaps/react-native/content/introduction/what-is-react-native.md
index 3cfcbaf8d..f4a912d8e 100644
--- a/src/data/roadmaps/react-native/content/introduction/what-is-react-native.md
+++ b/src/data/roadmaps/react-native/content/introduction/what-is-react-native.md
@@ -4,4 +4,6 @@ React Native is a popular open-source framework developed by Facebook for buildi
 
 With React Native, you write components with JSX, a syntax that combines JavaScript and XML. These components can map to native UI elements like views, text, images, and more.
 
-For more in-depth information about React Native, I recommend visiting the [official documentation](https://reactnative.dev/docs/getting-started).
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Getting Started with React Native](https://reactnative.dev/docs/getting-started))
diff --git a/src/data/roadmaps/react-native/content/introduction/why-react-native.md b/src/data/roadmaps/react-native/content/introduction/why-react-native.md
index 117fb3432..46bc03f6b 100644
--- a/src/data/roadmaps/react-native/content/introduction/why-react-native.md
+++ b/src/data/roadmaps/react-native/content/introduction/why-react-native.md
@@ -1,10 +1,8 @@
 # Why React Native?
 
-React Native is a widely popular framework for building native mobile applications using JavaScript (or TypeScript) and React. There are plenty of reasons why you would want to choose React Native for your next mobile app development project:
+React Native is a popular framework for developing native mobile applications using JavaScript (or TypeScript) and React, offering several compelling advantages for mobile app development. Key benefits include **code reusability**, allowing developers to share a significant portion of the codebase between iOS and Android, which reduces development time and simplifies maintenance. It leverages **familiar React concepts**, making it accessible for those already experienced with ReactJS, as it applies similar principles of components and state management. React Native provides **near-native performance** by directly interacting with native components, avoiding intermediaries like WebView. The framework benefits from a **vast ecosystem** and community support, with numerous libraries and tools that enhance the development process, bolstered by contributions from major companies like Facebook. Additionally, **hot reloading** enables developers to see code changes in real-time on devices or emulators, streamlining the development workflow. Finally, React Native can be **integrated into existing applications**, allowing for flexible enhancements to specific parts of an app.
 
-- **Code Reusability:** React Native allows you to share a significant amount of your codebase between iOS and Android platforms. This not only reduces the development time but also makes it easier to maintain the app.
-- **Familiar React Concepts:** If you're already familiar with ReactJS, React Native will feel right at home for you. Since it's based on React, the same principles of components and state management apply in React Native too.
-- **Native Performance:** React Native apps deliver near-native performance as the framework works directly with native components like Views and Text, thus eliminating the need for WebView or other similar intermediaries.
-- **Vast Ecosystem:** React Native enjoys a huge community and vast ecosystem that includes a wide range of libraries and tools that simplify and accelerate the development process. Additionally, Facebook and other major companies actively contribute to the growth and improvement of React Native.
-- **Hot Reloading:** React Native supports hot-reloading, which means you can see the changes you make in your code directly on the device/emulator without having to recompile or rebuild the app entirely. This makes for a faster and more efficient development process.
-- **Integration with Existing Apps:** Can be incorporated into existing mobile applications, providing flexibility to extend only parts of an app.
+Visit the following resources to learn more:
+
+- [@article@Why You Should Choose React Native?](https://www.geeksforgeeks.org/why-you-should-choose-react-native/)
+- [@article@React Native: What is it? and, Why is it used?](https://medium.com/@thinkwik/react-native-what-is-it-and-why-is-it-used-b132c3581df)
diff --git a/src/data/roadmaps/react-native/content/networking/connectivity.md b/src/data/roadmaps/react-native/content/networking/connectivity.md
index 2c9f47acd..14d8a4ecc 100644
--- a/src/data/roadmaps/react-native/content/networking/connectivity.md
+++ b/src/data/roadmaps/react-native/content/networking/connectivity.md
@@ -2,100 +2,6 @@
 
 Connectivity refers to the mechanisms that allow data transfer between your React Native app and external resources through various means of communication. It is essential to ensure efficient communication with APIs, servers, and external systems, to update your app's data, fetching content or enabling real-time interactions.
 
-## Networking Types
+Visit the following resources to learn more:
 
--**Fetch API**: The Fetch API is a native JavaScript way to make HTTP requests that can be used in React Native. It provides a simple interface for fetching resources and returns a Promise that resolves to the response of the request.
-
-   Example:
-
-   ```js
-   fetch('https://api.example.com/data')
-     .then((response) => response.json())
-     .then((data) => console.log(data))
-     .catch((error) => console.error(error));
-   ```
-
-- **XMLHttpRequest**: React Native has built-in support for XMLHttpRequest, which is a popular choice for communication with APIs. It can deal with various data types, like XML, JSON, or even binary data.
-
-   Example:
-
-   ```js
-   var xhr = new XMLHttpRequest();
-   xhr.onreadystatechange = function () {
-     if (xhr.readyState === 4 && xhr.status === 200) {
-       console.log(xhr.responseText);
-     }
-   };
-   xhr.open('GET', 'https://api.example.com/data', true);
-   xhr.send();
-   ```
-
-- **WebSockets**: WebSockets allow you to establish real-time communication between your React Native app and a server. It provides a two-way communication mechanism over a single, long-held TCP connection, enabling real-time data transfer.
-
-   Example:
-
-   ```js
-   const webSocket = new WebSocket('wss://example.com/ws');
-
-   webSocket.onopen = () => {
-     webSocket.send('Hello from React Native app!');
-   };
-
-   webSocket.onmessage = (event) => {
-     console.log('Message from the server:', event.data);
-   };
-
-   webSocket.onerror = (error) => {
-     console.error('WebSocket error:', error);
-   };
-
-   webSocket.onclose = (event) => {
-     console.log('WebSocket connection closed:', event.code, event.reason);
-   };
-   ```
-
-## Libraries for Networking
-
-In addition to the built-in networking types, you can use external libraries to simplify networking tasks, such as:
-
-- **Axios**: Axios is a promise-based HTTP client for the browser and Node.js environment. It supports various features like intercepting requests and responses, timeouts, and handling retries.
-
-   Example:
-
-   ```js
-   import axios from 'axios';
-
-   axios
-     .get('https://api.example.com/data')
-     .then((response) => console.log(response.data))
-     .catch((error) => console.error(error));
-   ```
-
-- **Apollo Client**: Apollo Client is a comprehensive GraphQL client that helps you manage your data in a better and more efficient way, making it easier to build powerful and scalable applications.
-
-   Example:
-
-   ```js
-   import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
-
-   const client = new ApolloClient({
-     uri: 'https://api.example.com/graphql',
-     cache: new InMemoryCache(),
-   });
-
-   client
-     .query({
-       query: gql`
-         query GetData {
-           data {
-             id
-             name
-           }
-         }
-       `,
-     })
-     .then((result) => console.log(result))
-     .catch((error) => console.error(error));
-   ```
-
-By understanding these options, you can choose the most appropriate connectivity method for your React Native app, and efficiently communicate with APIs, servers, and external systems.
\ No newline at end of file
+- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
diff --git a/src/data/roadmaps/react-native/content/networking/fetch.md b/src/data/roadmaps/react-native/content/networking/fetch.md
index d5dfef1b4..4535f5449 100644
--- a/src/data/roadmaps/react-native/content/networking/fetch.md
+++ b/src/data/roadmaps/react-native/content/networking/fetch.md
@@ -2,38 +2,6 @@
 
 *Fetch* is a JavaScript function available in React Native that is used to make network requests, similar to XMLHttpRequest in web applications. It allows you to handle requests and retrieve data from APIs or other sources. The Fetch API is built on Promises, making it simple to handle success and error cases.
 
-## Usage
+Visit the following resources to learn more:
 
-Here's a basic example demonstrating how to use fetch to make a GET request:
-
-```javascript
-fetch('https://jsonplaceholder.typicode.com/todos/1')
-  .then(response => response.json())
-  .then(data => console.log(data))
-  .catch(error => console.error(error));
-```
-
-In this example, we are using `fetch()` to make a GET request to a sample API. The function `fetch()` returns a Promise that resolves to the Response object representing the response to the request. Using `then()`, we manage the response and extract the JSON data from it. If an error occurs, we catch it with `catch()`.
-
-## POST Request
-
-To make a POST request using fetch, you need to provide an additional object with the `method`, `headers`, and `body` properties:
-
-```javascript
-fetch('https://jsonplaceholder.typicode.com/todos', {
-  method: 'POST',
-  headers: {
-    'Accept': 'application/json',
-    'Content-Type': 'application/json'
-  },
-  body: JSON.stringify({
-    title: 'New Task',
-    completed: false
-  })
-})
-  .then(response => response.json())
-  .then(data => console.log(data))
-  .catch(error => console.error(error));
-```
-
-In this example, we are making a POST request to add a new task to the sample API. The `method` property is set to 'POST', and `headers` define the content type as 'application/json'. The `body` property contains the new task in JSON format, which needs to be converted to a string using `JSON.stringify()`. Just like the GET request, we handle the response and catch any errors that occur.
\ No newline at end of file
+- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
diff --git a/src/data/roadmaps/react-native/content/networking/index.md b/src/data/roadmaps/react-native/content/networking/index.md
index ca77dbcc8..4d99250dc 100644
--- a/src/data/roadmaps/react-native/content/networking/index.md
+++ b/src/data/roadmaps/react-native/content/networking/index.md
@@ -1,12 +1,6 @@
 # Networking
 
-React Native provides the ability to make network requests and manage data fetched from remote sources. Networking can be accomplished through the following techniques:
-
-## Fetch
-
-The `fetch` function is a top-level API to make HTTP requests. It is a promise-based API for handling network requests. It allows you to fetch resources (typically JSON data) from a provided URL. 
-
-### Fetch Example
+React Native facilitates network requests and data management from remote sources through various techniques. The primary method is the `fetch` function, a promise-based API that allows developers to make HTTP requests and retrieve resources, typically in JSON format, from a specified URL. For example, a simple fetch request can be made as follows:
 
 ```jsx
 fetch('https://jsonplaceholder.typicode.com/todos/1')
@@ -15,6 +9,11 @@ fetch('https://jsonplaceholder.typicode.com/todos/1')
   .catch((error) => console.error(error));
 ```
 
-## Axios
+Another popular option is Axios, a widely-used library that simplifies HTTP requests in JavaScript applications. Like fetch, Axios is promise-based and offers a user-friendly API, making it a preferred choice for many developers when handling network requests in React Native.
+
+Visit the following resources to learn more:
 
-Axios is a popular and widely-used library for making HTTP requests in javascript applications. It's promise-based and provides a simple-to-use API.
\ No newline at end of file
+- [@official@Networking](https://reactnative.dev/docs/network)
+- [@official@Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- [@official@Axios](https://axios-http.com/docs/intro)
+- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/networking/websockets.md b/src/data/roadmaps/react-native/content/networking/websockets.md
index 37ed9d141..3f57d43cb 100644
--- a/src/data/roadmaps/react-native/content/networking/websockets.md
+++ b/src/data/roadmaps/react-native/content/networking/websockets.md
@@ -2,66 +2,6 @@
 
 WebSockets are a protocol that allows full-duplex communication between a client and a server over a single, long-lived connection. They are useful when real-time communication is needed, such as in chat applications, online gaming, or financial trading platforms.
 
-## Setting up a WebSocket connection
+Visit the following resources to learn more:
 
-In React Native, you can use the `WebSocket` API to establish a WebSocket connection with the server. Here's an example of how to open a WebSocket connection:
-
-```javascript
-const webSocket = new WebSocket('ws://my-websocket-server.com');
-```
-
-## Receiving and sending messages
-
-You can handle the different events associated with a WebSocket connection by attaching event listeners to the `WebSocket` instance.
-
-### Handling connection
-
-To handle connection establishment, you can use the `onopen` event listener:
-
-```javascript
-webSocket.onopen = (event) => {
-  console.log('WebSocket connection opened:', event);
-};
-```
-
-### Handling incoming messages
-
-To receive messages from the server, you can use the `onmessage` event listener:
-
-```javascript
-webSocket.onmessage = (event) => {
-  console.log('Received from server:', event.data);
-};
-```
-
-### Sending messages to the server
-
-To send messages to the server, you can use the `send` method:
-
-```javascript
-webSocket.send('Hello server');
-```
-
-### Handling connection error and closure
-
-You can catch connection errors and closure events using the `onerror` and `onclose` event listeners:
-
-```javascript
-webSocket.onerror = (event) => {
-  console.log('WebSocket error:', event);
-};
-
-webSocket.onclose = (event) => {
-  console.log('WebSocket connection closed:', event);
-};
-```
-
-## Closing the WebSocket connection
-
-To close the WebSocket connection, you can use the `close` method:
-
-```javascript
-webSocket.close();
-```
-
-That's a brief summary of using WebSockets in React Native! Don't forget to handle various edge cases such as connection loss, reconnection, and graceful shutdowns in a real-world application.
\ No newline at end of file
+- [@article@The WebSocket API (WebSockets) - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
diff --git a/src/data/roadmaps/react-native/content/performance/common-problem-sources.md b/src/data/roadmaps/react-native/content/performance/common-problem-sources.md
index 7a02f3dc4..e157e523a 100644
--- a/src/data/roadmaps/react-native/content/performance/common-problem-sources.md
+++ b/src/data/roadmaps/react-native/content/performance/common-problem-sources.md
@@ -1,74 +1,7 @@
 # Common Problem Sources
 
-## 1. Console Logs
+In React Native, several common issues can impact application performance. Excessive console logs can slow down the app, particularly in debug mode, so it's advisable to minimize their use and remove unnecessary logs before release. Heavy and unoptimized images can also cause performance problems; therefore, it's important to optimize image size and resolution and use the `resizeMode` prop on the `Image` component for better rendering. Additionally, inline functions and styles can lead to unnecessary re-renders, so defining them outside the component's render method is recommended. While using `React.PureComponent` or `React.memo()` can enhance performance, they should be applied judiciously to avoid unnecessary re-renders. For handling large lists, replacing `ListView` with `FlatList` or `SectionList` is crucial for better performance. Lastly, blocking the JavaScript thread with heavy synchronous computations can degrade performance, so it's essential to handle such tasks asynchronously or offload them to native modules. Following these guidelines can help maintain optimal performance in React Native applications.
 
-Excessive console logs can lead to decreased performance in React Native, especially in debug mode. In order to avoid this, keep the usage of console logging to a minimum, and clean up unnecessary logs before releasing the app.
+Visit the following resources to learn more:
 
-## 2. Images
-
-Heavy and unoptimized images can lead to performance issues in React Native. To avoid this, use the following techniques:
-
-- Optimize image size and resolution before bundling them in the application.
-- Use `resizeMode` prop on the `Image` component to cache images for better rendering.
-
-```jsx
-<Image source={require('./my-image.png')} resizeMode="cover" />
-```
-
-## 3. Inline Functions and Styles
-
-Using inline functions and styles within components can lead to unnecessary re-rendering and performance issues. Instead, define functions and styles outside of the component render method.
-
-```jsx
-// Bad
-render() {
-  return (
-    <TouchableOpacity onPress={() => this.onPress()}>
-      <Text style={{fontSize: 16, color: 'blue'}}>Click me</Text>
-    </TouchableOpacity>
-  );
-}
-
-// Good
-const styles = StyleSheet.create({
-  buttonText: {
-    fontSize: 16,
-    color: 'blue',
-  },
-});
-
-onPressHandler = () => {
-  // Handle press
-};
-
-render() {
-  return (
-    <TouchableOpacity onPress={this.onPressHandler}>
-      <Text style={styles.buttonText}>Click me</Text>
-    </TouchableOpacity>
-  );
-}
-```
-
-## 4. PureComponent and React.memo
-
-Components that extend `React.PureComponent` or are wrapped in `React.memo()` can lead to performance issues in case they're updating frequently and causing unnecessary re-renders. Make sure to only use them when appropriate to avoid performance bottlenecks.
-
-## 5. ListView and FlatList
-
-When working with large lists in React Native, using `ListView` instead of `FlatList` can cause performance issues. Replace `ListView` with the more performant `FlatList` or `SectionList` components.
-
-```jsx
-// Use FlatList instead of ListView
-<FlatList
-  data={this.state.data}
-  renderItem={({item}) => <MyListItemComponent item={item} />}
-  keyExtractor={(item) => item.id}
-/>
-```
-
-## 6. JavaScript Thread Blockage
-
-Blocking the JavaScript thread with expensive synchronous computations can lead to poor performance. Make sure to handle heavy computations asynchronously or offload them to native modules.
-
-Read more in the [Official React Native documentation](https://reactnative.dev/docs/performance#common-sources-of-performance-problems).
\ No newline at end of file
+- [@official@Performance Problems](https://reactnative.dev/docs/performance#common-sources-of-performance-problems)
diff --git a/src/data/roadmaps/react-native/content/performance/frame-rates.md b/src/data/roadmaps/react-native/content/performance/frame-rates.md
index f6857111f..0786e3de4 100644
--- a/src/data/roadmaps/react-native/content/performance/frame-rates.md
+++ b/src/data/roadmaps/react-native/content/performance/frame-rates.md
@@ -2,56 +2,4 @@
 
 Frame rates represent the number of frames (or images) displayed per second in an animation or video. The performance of a React Native application can be highly impacted by the frame rate, so it is important to optimize your application for the best possible user experience. Higher frame rates provide smoother animations, but may require more system resources. To achieve the desired frame rate, the application should ensure that each frame is computed and rendered within the time budget.
 
-In general, frame rates can be categorized into two types:
-
-- **Static Frame Rate**: This is when your application's frame rate remains constant during its runtime.
-
-- **Adaptive Frame Rate**: This is when your application adjusts the frame rate according to device performance and available resources.
-
-### Animated library
-
-One of the ways to achieve high frame rates and smooth animations in React Native is by using the `Animated` library. This library provides a set of methods and components that help you manage animations efficiently. By using the `Animated` library, you can define animations declaratively, avoid unnecessary render cycles, and utilize the native driver to offload animation from the JavaScript thread.
-
-Here's an example of using the `Animated` library to create a simple fade-in animation:
-
-```jsx
-import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-
-const FadeIn = (props) => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 500,
-      useNativeDriver: true, // This line offloads animation to the native driver
-    }).start();
-  }, []);
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          opacity: opacity, // This line applies the animated opacity value
-        },
-      ]}
-    >
-      {props.children}
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default FadeIn;
-```
-
-By following best practices and leveraging tools like the `Animated` library, you can optimize your React Native application's performance and achieve smooth, high-quality animations with optimal frame rates.
\ No newline at end of file
+To achieve high frame rates and smooth animations, developers can utilize the `Animated` library, which offers methods and components for efficient animation management. For instance, the library allows for declarative animation definitions, minimizes unnecessary render cycles, and enables the use of the native driver to offload animations from the JavaScript thread. By adhering to best practices and leveraging the `Animated` library, developers can enhance their React Native applications' performance and deliver high-quality animations.
diff --git a/src/data/roadmaps/react-native/content/performance/index.md b/src/data/roadmaps/react-native/content/performance/index.md
index 6f014c289..6c42db66b 100644
--- a/src/data/roadmaps/react-native/content/performance/index.md
+++ b/src/data/roadmaps/react-native/content/performance/index.md
@@ -2,4 +2,6 @@
 
 Performance is a crucial aspect of any application, and React Native is no exception. Optimizing performance in your React Native apps will not only lead to a better user experience but also lessen the load on device resources.
 
-Go through the topics listed under this node as well as [React Native Documentation](https://reactnative.dev/docs/performance) for more details.
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Performance](https://reactnative.dev/docs/performance)
diff --git a/src/data/roadmaps/react-native/content/performance/optimizing-flatlist-config.md b/src/data/roadmaps/react-native/content/performance/optimizing-flatlist-config.md
index 424e87bed..d4dfe75f3 100644
--- a/src/data/roadmaps/react-native/content/performance/optimizing-flatlist-config.md
+++ b/src/data/roadmaps/react-native/content/performance/optimizing-flatlist-config.md
@@ -1,84 +1,17 @@
 # Optimizing FlatList Config
 
-In React Native, the FlatList component is used to efficiently display large lists of items. It's crucial to optimize the FlatList configuration for better performance. Here are some important tips to help you optimize FlatList configurations:
+In React Native, the FlatList component is essential for efficiently displaying large lists of items, and optimizing its configuration is crucial for enhancing performance. Here are key tips for optimizing FlatList:
 
-## 1. Set `windowSize`
+1. **Set `windowSize`**: Adjust the `windowSize` prop, which determines the number of pages rendered above and below the current view. Reducing this value from the default of 21 can decrease off-screen component rendering.
 
-`windowSize` is a prop that determines the number of pages rendered above and below the current window. By default, this value is 21. You can decrease it based on your needs to reduce the number of off-screen rendered components.
+2. **Enable `removeClippedSubviews`**: This prop unmounts components that are off-screen, helping to free up resources.
 
-Example:
+3. **Adjust `maxToRenderPerBatch`**: Control the number of items rendered per batch with this prop, which defaults to 10. Tailor this value to fit your list's needs.
 
-```javascript
-<FlatList
-  data={data}
-  renderItem={renderItem}
-  keyExtractor={item => item.id}
-  windowSize={10}
-/>
-```
+4. **Set `initialNumToRender`**: This prop defines how many items to render initially, helping to prevent blank screens during loading.
 
-## 2. Set `removeClippedSubviews`
+5. **Use `getItemLayout`**: By specifying the exact dimensions of each item with this prop, you can avoid dynamic measurements, leading to better performance.
 
-Enable the `removeClippedSubviews` prop to unmount components that are off the screen.
+Visit the following resources to learn more:
 
-Example:
-
-```javascript
-<FlatList
-  data={data}
-  renderItem={renderItem}
-  keyExtractor={item => item.id}
-  removeClippedSubviews={true}
-/>
-```
-
-## 3. Set `maxToRenderPerBatch`
-
-`maxToRenderPerBatch` prop helps to control the number of items to be rendered per batch. By default, this is set to 10. Optimize this value according to your list's requirements.
-
-Example:
-
-```javascript
-<FlatList
-  data={data}
-  renderItem={renderItem}
-  keyExtractor={item => item.id}
-  maxToRenderPerBatch={5}
-/>
-```
-
-## 4. Set `initialNumToRender`
-
-`initialNumToRender` is used to set the number of items to be rendered initially. Setting this value to a reasonable number can help in avoiding blank screens on load.
-
-Example:
-
-```javascript
-<FlatList
-  data={data}
-  renderItem={renderItem}
-  keyExtractor={item => item.id}
-  initialNumToRender={10}
-/>
-```
-
-## 5. Set `getItemLayout`
-
-Using the `getItemLayout` prop allows you to specify the exact dimensions of each item. This prevents the need for measuring them dynamically, resulting in improved performance.
-
-Example:
-
-```javascript
-<FlatList
-  data={data}
-  renderItem={renderItem}
-  keyExtractor={item => item.id}
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-/>
-```
-
-Implementing these optimizations in your FlatList config will help improve the performance of large lists in your React Native application.
-
-- [@article@Optimizing Flatlist Configuration](https://reactnative.dev/docs/optimizing-flatlist-configuration)
\ No newline at end of file
+- [@official@Optimizing Flatlist Configuration](https://reactnative.dev/docs/optimizing-flatlist-configuration)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/performance/profiling.md b/src/data/roadmaps/react-native/content/performance/profiling.md
index 05d763fee..e1a457a4a 100644
--- a/src/data/roadmaps/react-native/content/performance/profiling.md
+++ b/src/data/roadmaps/react-native/content/performance/profiling.md
@@ -4,6 +4,6 @@ Use the built-in profiler to get detailed information about work done in the Jav
 
 For iOS, Instruments is an invaluable tool, and on Android you should learn to use `systrace`.
 
-Visit the following for more details:
+Visit the following resources to learn more:
 
-- [@article@Profiling React Native](https://reactnative.dev/docs/profiling)
\ No newline at end of file
+- [@official@Profiling React Native](https://reactnative.dev/docs/profiling)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/performance/ram-bundles.md b/src/data/roadmaps/react-native/content/performance/ram-bundles.md
index 171454552..c5fb812e0 100644
--- a/src/data/roadmaps/react-native/content/performance/ram-bundles.md
+++ b/src/data/roadmaps/react-native/content/performance/ram-bundles.md
@@ -2,4 +2,6 @@
 
 If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the RAM format and requiring those features and screens inline (when they are actually used).
 
-- [@article@RAM Bundles and Inline Requires](https://reactnative.dev/docs/ram-bundles-inline-requires)
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@RAM Bundles and Inline Requires](https://reactnative.dev/docs/ram-bundles-inline-requires)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/performance/speeding-up-builds.md b/src/data/roadmaps/react-native/content/performance/speeding-up-builds.md
index a02a2d79b..a64cdc612 100644
--- a/src/data/roadmaps/react-native/content/performance/speeding-up-builds.md
+++ b/src/data/roadmaps/react-native/content/performance/speeding-up-builds.md
@@ -2,4 +2,6 @@
 
 Building your React Native app could be expensive and take several minutes of developers time. This can be problematic as your project grows and generally in bigger organizations with multiple React Native developers.
 
-- [@article@Speeding up your Build phase](https://reactnative.dev/docs/build-speed)
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Speeding up your Build phase](https://reactnative.dev/docs/build-speed)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/platform-specific-code/file-extensions.md b/src/data/roadmaps/react-native/content/platform-specific-code/file-extensions.md
index b78786f9f..c6ed199bc 100644
--- a/src/data/roadmaps/react-native/content/platform-specific-code/file-extensions.md
+++ b/src/data/roadmaps/react-native/content/platform-specific-code/file-extensions.md
@@ -1,68 +1,8 @@
 # File Extensions
 
-In React Native, you can write platform-specific code by using specific file extensions. By appending `.android.` or `.ios.` to your file's name, React Native will load the file corresponding to the platform you are running your app on.
+In React Native, you can write platform-specific code by using specific file extensions, such as appending `.android.` or `.ios.` to your file names, allowing React Native to automatically load the appropriate file based on the platform. This approach is useful in two main scenarios: creating separate files for platform-specific components, like `Header.ios.js` and `Header.android.js`, which can have different implementations and styles for iOS and Android, and using the `Platform` module within a single file to conditionally render platform-specific code. By leveraging these techniques, developers can create tailored components and features for each platform while keeping their codebase organized and maintainable.
 
-There are two main scenarios where you can use this approach:
+Visit the following resources to learn more:
 
-## Platform-Specific Component Files
-
-You can create separate files for each platform's specific components, keeping the implementation and styling different for Android and iOS.
-
-For example, if you have a `Header` component, you can create two separate files `Header.ios.js` and `Header.android.js`. React Native will automatically pick the right file depending on the platform it's running on.
-
-```javascript
-// Header.ios.js
-import React from 'react';
-import { View, Text } from 'react-native';
-
-const Header = () => {
-  return (
-    <View style={{ backgroundColor: 'blue' }}>
-      <Text>iOS Header</Text>
-    </View>
-  );
-};
-
-export default Header;
-```
-
-```javascript
-// Header.android.js
-import React from 'react';
-import { View, Text } from 'react-native';
-
-const Header = () => {
-  return (
-    <View style={{ backgroundColor: 'green' }}>
-      <Text>Android Header</Text>
-    </View>
-  );
-};
-
-export default Header;
-```
-
-## Platform-Specific Code within a File
-
-You can also use the `Platform` module from React Native to determine which platform-specific code to run within a single file.
-
-```javascript
-import { Platform, StyleSheet, Text } from 'react-native';
-
-const ComponentWithPlatformSpecificCode = () => {
-  return <Text style={styles.content}>Hello World!</Text>;
-};
-
-const styles = StyleSheet.create({
-  content: {
-    color: Platform.select({
-      ios: 'blue',
-      android: 'green',
-    }),
-  },
-});
-
-export default ComponentWithPlatformSpecificCode;
-```
-
-Using file extensions and the `Platform` module, you can create tailor-made components and features for different platforms while maintaining a clean and organized codebase.
\ No newline at end of file
+- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code)
+- [@official@App Extensions](https://reactnative.dev/docs/app-extensions)
diff --git a/src/data/roadmaps/react-native/content/platform-specific-code/index.md b/src/data/roadmaps/react-native/content/platform-specific-code/index.md
index ed953b13c..2e1ae2355 100644
--- a/src/data/roadmaps/react-native/content/platform-specific-code/index.md
+++ b/src/data/roadmaps/react-native/content/platform-specific-code/index.md
@@ -1,39 +1,8 @@
 # Platform Specific Code
 
-In React Native, you might need to maintain certain parts of your application differently for iOS and Android. This is where "Platform Specific Code" comes into play. There are two ways you can achieve this:
+In React Native, managing platform-specific code for iOS and Android is essential for addressing differences in application behavior and appearance. This can be achieved in two primary ways: using the `Platform` module, which allows developers to detect the current platform and apply conditional styles or logic accordingly, as demonstrated by using `Platform.select` to set different background colors for iOS and Android; and utilizing file extensions like `.ios.js` and `.android.js`, which enables React Native to automatically load the appropriate file based on the platform. For instance, if you have `Header.ios.js` and `Header.android.js`, importing the `Header` component will automatically reference the correct file for the running platform, streamlining the development process.
 
-## Platform module
+Visit the following resources to learn more:
 
-React Native provides a `Platform` module that can be used to detect which platform your code is running on (iOS or Android). This can be helpful when you have minor platform differences in your code execution, component styles, or API calls.
-
-**Example:**
-
-```javascript
-import { Platform, StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    ...Platform.select({
-      ios: {
-        backgroundColor: 'red',
-      },
-      android: {
-        backgroundColor: 'blue',
-      },
-    }),
-  },
-});
-```
-
-## File extensions
-
-Another way to handle platform-specific logic is by using file extensions like `.ios.js` and `.android.js`. By naming your files with these extensions, React Native will automatically pick up the appropriate file based on the platform the app is running on.
-
-**Example:**
-
-Let's say you have two files in your project, `Header.ios.js` and `Header.android.js`. When you import the `Header` component in your code, React Native will automatically import the correct file for the platform.
-
-```javascript
-// App.js
-import Header from './Header';
-```
\ No newline at end of file
+- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code)
+- [@official@App Extensions](https://reactnative.dev/docs/app-extensions)
diff --git a/src/data/roadmaps/react-native/content/platform-specific-code/platform-module.md b/src/data/roadmaps/react-native/content/platform-specific-code/platform-module.md
index 7dacb9c2b..b2b036ca9 100644
--- a/src/data/roadmaps/react-native/content/platform-specific-code/platform-module.md
+++ b/src/data/roadmaps/react-native/content/platform-specific-code/platform-module.md
@@ -4,39 +4,9 @@ The Platform module, as the name suggests, is a part of React Native that detect
 
 To utilize the Platform module, you need to import it and then access the `OS` property. This property returns a string, which denotes the platform — either `'ios'` or `'android'`.
 
-Here's an example:
+With the Platform module, you can easily create platform-specific code, enabling you to have the best user experience for each platform. Just remember to import the module and use the provided properties and methods.
 
-```javascript
-import { Platform } from 'react-native';
+Visit the following resources to learn more:
 
-if (Platform.OS === 'ios') {
-  console.log('Running on iOS');
-} else if (Platform.OS === 'android') {
-  console.log('Running on Android');
-}
-```
-
-For a more elegant way to define platform-specific properties, React Native provides the `Platform.select` method. This method takes an object with keys `'ios'` and `'android'`, representing the respective platforms, and returns the value associated with the current platform.
-
-Here's an example of `Platform.select` in use:
-
-```javascript
-import { Platform, StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    ...Platform.select({
-      ios: {
-        backgroundColor: 'red',
-      },
-      android: {
-        backgroundColor: 'blue',
-      },
-    }),
-  },
-});
-```
-
-In this example, the container's background color will be red on iOS and blue on Android.
-
-With the Platform module, you can easily create platform-specific code, enabling you to have the best user experience for each platform. Just remember to import the module and use the provided properties and methods.
\ No newline at end of file
+- [@official@Platform](https://reactnative.dev/docs/platform)
+- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code)
diff --git a/src/data/roadmaps/react-native/content/platform-specific-code/react-native-web.md b/src/data/roadmaps/react-native/content/platform-specific-code/react-native-web.md
index 7881c5ba1..02d25d34f 100644
--- a/src/data/roadmaps/react-native/content/platform-specific-code/react-native-web.md
+++ b/src/data/roadmaps/react-native/content/platform-specific-code/react-native-web.md
@@ -4,93 +4,7 @@ React Native Web is an extension of React Native which allows you to run your Re
 
 The main goal of React Native Web is to provide a consistent developer experience across platforms, reducing the effort needed to build and maintain multi-platform apps.
 
-## Platform-specific Code
+Visit the following resources to learn more:
 
-While React Native Web is designed to provide a consistent experience across platforms, there may still be cases where you want to use platform-specific code for an improved native experience.
-
-For example, let's say you have a React Native app with the following styles:
-
-```javascript
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    fontSize: 16,
-    color: 'blue',
-  },
-});
-```
-
-Now, let's say you want to apply some platform-specific styling. You can create separate stylesheets for each platform, like `styles.native.js` and `styles.web.js`. The contents of `styles.native.js` would look like this:
-
-```javascript
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  container: {
-    // Your platform-specific styles
-  },
-  text: {
-    // Your platform-specific styles
-  },
-});
-```
-
-And the contents of `styles.web.js` would look like this:
-
-```javascript
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  container: {
-    // Your platform-specific styles
-  },
-  text: {
-    // Your platform-specific styles
-  },
-});
-```
-
-Then, in your main component file, you can import the appropriate styles for each platform automatically:
-
-```javascript
-import styles from './styles';
-
-// Now, your styles are platform-specific!
-```
-
-This way, you can cater your styles to the specific platform your app is running on, without having to clutter your main component code with conditional styling.
-
-React Native Web also provides a utility called `Platform` that you can use to determine the current platform and apply platform-specific code directly:
-
-```javascript
-import { Platform, StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    ...Platform.select({
-      web: {
-        // Web-specific styles
-      },
-      native: {
-        // Native-specific styles
-      },
-    }),
-  },
-  text: {
-    ...Platform.select({
-      web: {
-        // Web-specific styles
-      },
-      native: {
-        // Native-specific styles
-      },
-    }),
-  },
-});
-```
-
-With these techniques, you'll be able to create tailored experiences across different platforms while maintaining a consistent development experience.
\ No newline at end of file
+- [@article@react-native-web - npm](https://www.npmjs.com/package/react-native-web)
+- [@article@Complete Guide to React Native for Web](https://blog.logrocket.com/complete-guide-react-native-web/)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/css.md b/src/data/roadmaps/react-native/content/pre-requisites/css.md
index c73982e41..ae6665d34 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/css.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/css.md
@@ -2,5 +2,9 @@
 
 CSS is a stylesheet language used for describing the look and formatting of a document written in HTML or XML. It is primarily used for styling web pages and user interfaces written in HTML and XHTML. React native uses CSS to style its components. You can learn some CSS basics to get started with React Native and learn more as you go.
 
-- [@article@W3Schools CSS Tutorial](https://www.w3schools.com/css/)
+Visit the following resources to learn more:
+
+- [@official@CSS - W3.org](https://www.w3.org/Style/CSS/Overview.en.html)
+- [@official@CSS - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
+- [@article@CSS Tutorial - w3schools](https://www.w3schools.com/css/)
 - [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/index.md b/src/data/roadmaps/react-native/content/pre-requisites/index.md
index 92bf85dda..fd5ab0d68 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/index.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/index.md
@@ -1,6 +1,9 @@
 # Learn the Pre-requisites
 
-Before you start learning React Native, you should have a basic knowledge of [JavaScript](/javascript) and [React](/react). You don't need to fully master these topics, but you should be familiar with them. Learn the basics of JavaScript (e.g. topics marked for beginners in [JavaScript Roadmap](/javascript) and continue with React Native. I have heard good things about official React Native documentation, so you can start there and pick up the relevant topics wherever needed.
+Before you start learning React Native, you should have a basic knowledge of JavaScript and React. You don't need to fully master these topics, but you should be familiar with them. Learn the basics of JavaScript (e.g. topics marked for beginners in JavaScript Roadmap and continue with React Native.
 
-- [@roadmap.sh@Learn Beginner Topics in JavaScript](/javascript)
-- [@article@React Native Basics](https://reactnative.dev/docs/getting-started)
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@React Native Basics](https://reactnative.dev/docs/getting-started)
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
+- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/javascript.md b/src/data/roadmaps/react-native/content/pre-requisites/javascript.md
index 6a3924d2d..5e68cf733 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/javascript.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/javascript.md
@@ -1,6 +1,10 @@
 # JavaScript Basics
 
+JavaScript is a very flexible and versatile programming language, considered as a core technology for web development. This is because it is the only language natively supported by all browsers, allowing developers to add dynamic behavior and create complex user experiences with this language.
+
 There's a lot more to learn in JavaScript but my recommendation is to learn the basics and then learn as you go. You'll learn a lot more by building things than by reading about them.
 
-- [@roadmap.sh@Learn Beginner Topics in JavaScript Roadmap](/javascript)
+Visit the following resources to learn more:
+
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/react/components.md b/src/data/roadmaps/react-native/content/pre-requisites/react/components.md
index 1947b4eb1..568c1b32d 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/react/components.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/react/components.md
@@ -2,5 +2,7 @@
 
 React components are the building blocks of the user interface (UI) in a React application. They are used to break down the UI into reusable, isolated, and manageable pieces. Components handle rendering the UI and managing the logic and behavior.
 
-- [@official@Components](https://react.dev/learn/your-first-component) and [Props](https://react.dev/learn/passing-props-to-a-component)
+Visit the following resources to learn more:
 
+- [@official@Components](https://react.dev/learn/your-first-component)
+- [@official@Props](https://react.dev/learn/passing-props-to-a-component)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/react/index.md b/src/data/roadmaps/react-native/content/pre-requisites/react/index.md
index d2945f1b3..c1e0381f4 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/react/index.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/react/index.md
@@ -2,12 +2,10 @@
 
 React Native uses React, a JavaScript library for building user interfaces. You should have a basic understanding of React concepts before proceeding with React Native. Some of the concepts you should be familiar with include:
 
-- [@official@Components](https://react.dev/learn/your-first-component) and [Props](https://react.dev/learn/passing-props-to-a-component)
+Visit the following resources to learn more:
+
+- [@official@Components](https://react.dev/learn/your-first-component)
+- [@official@Props](https://react.dev/learn/passing-props-to-a-component)
 - [@official@Component State](https://react.dev/learn/managing-state)
 - [@official@Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
 - [@official@JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)
-
-Once you have a basic understanding of React, start with React Native.
-
-- [@article@React Native Basics](https://reactnative.dev/docs/getting-started)
-- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/react/jsx.md b/src/data/roadmaps/react-native/content/pre-requisites/react/jsx.md
index 5fd79418d..d2ddbd566 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/react/jsx.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/react/jsx.md
@@ -2,77 +2,9 @@
 
 JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript code. It was developed to be used with React and has become an integral part of working with React.
 
-## Basic Syntax
-
-JSX looks similar to HTML, and you can mix it with JavaScript expressions within curly braces `{}`.
-
-Here's an example with a simple JSX element:
-
-```jsx
-const element = <h1>Hello, world!</h1>;
-```
-
-## JavaScript Expressions in JSX
-
-You can embed JavaScript expressions within JSX by wrapping them in curly braces `{}`.
-
-Here's an example:
-
-```jsx
-const name = 'John Doe';
-const element = <h1>Hello, {name}!</h1>;
-```
-
-## Attributes in JSX
-
-You can use JSX to define attributes for your elements, similar to how you would in HTML. However, some attribute names in JSX are slightly different from their HTML counterparts due to conflicts with reserved JavaScript keywords (for example, `className` instead of `class`).
-
-Here's an example:
-
-```jsx
-const className = 'my-class';
-const element = <h1 className={className}>Hello, world!</h1>;
-```
-
-## Children in JSX
-
-You can nest JSX elements by enclosing them within the opening and closing tags of a parent element.
-
-Here's an example:
-
-```jsx
-const element = (
-  <div>
-    <h1>Hello, world!</h1>
-    <p>This is an example of nested JSX elements.</p>
-  </div>
-);
-```
-
-## JSX Represents Objects
-
-Under the hood, JSX represents JavaScript objects called "React elements". When you use JSX, your JavaScript code gets automatically transformed into these React elements.
-
-Here's an example of a JSX element and its corresponding JavaScript object:
-
-```jsx
-const elementJSX = (
-  <h1 className="greeting">
-    Hello, world!
-  </h1>
-);
-
-const elementJSObject = React.createElement(
-  'h1',
-  {className: 'greeting'},
-  'Hello, world!'
-);
-```
-
-Both `elementJSX` and `elementJSObject` represent the same thing and will produce the same result when rendered.
-
-That's a brief summary of JSX. You'll find that it becomes an essential part of working with React as you continue learning about React Native.
+Visit the following resources to learn more:
 
+- [@official@Components](https://react.dev/learn/your-first-component)
 - [@official@Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
 - [@official@JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)
 - [@feed@Explore top posts about JSX](https://app.daily.dev/tags/jsx?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/react/props.md b/src/data/roadmaps/react-native/content/pre-requisites/react/props.md
index 7fd604351..34f83a9f2 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/react/props.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/react/props.md
@@ -2,4 +2,7 @@
 
 In React, **props** are short for _properties_ and are used to pass data from a parent component to a child component. They are similar to function arguments, and they help make components reusable and maintainable.
 
-- [@official@Components](https://react.dev/learn/your-first-component) and [Props](https://react.dev/learn/passing-props-to-a-component)
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Components](https://react.dev/learn/your-first-component)
+- [@official@Props](https://react.dev/learn/passing-props-to-a-component)
diff --git a/src/data/roadmaps/react-native/content/pre-requisites/react/state.md b/src/data/roadmaps/react-native/content/pre-requisites/react/state.md
index 6458f1ce3..ccce85fd5 100644
--- a/src/data/roadmaps/react-native/content/pre-requisites/react/state.md
+++ b/src/data/roadmaps/react-native/content/pre-requisites/react/state.md
@@ -2,50 +2,6 @@
 
 State is an object that holds data managed within a React component. It allows components to become dynamic and interactive by keeping track of its data changes. When the state of a component changes, React re-renders the component and updates the DOM accordingly.
 
-In a functional component, utilize the `useState` hook to initialize state:
-
-```javascript
-import React, { useState } from 'react';
-
-function App() {
-  const [text, setText] = useState('Hello, World!');
-  //...
-}
-```
-
-## Accessing State
-
-
-In functional components, access the state by utilizing the first variable from the `useState` hook:
-
-```javascript
-function App() {
-  const [text, setText] = useState('Hello, World!');
-  return <div>{text}</div>;
-}
-```
-
-## Updating State
-
-Utilize the second variable returned from the `useState` hook (which is a function) to update the state:
-
-```javascript
-function App() {
-  const [text, setText] = useState('Hello, World!');
-
-  function handleClick() {
-    setText('State updated!');
-  }
-
-  return (
-    <div>
-      <div>{text}</div>
-      <button onClick={handleClick}>Update State</button>
-    </div>
-  );
-}
-```
-
-Remember: do not modify the state directly; always use the `setState()` method or updater function provided by the `useState` hook.
+Visit the following resources to learn more:
 
 - [@official@Component State](https://react.dev/learn/managing-state)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/publishing-apps/app-store.md b/src/data/roadmaps/react-native/content/publishing-apps/app-store.md
index 6728be401..b9782c889 100644
--- a/src/data/roadmaps/react-native/content/publishing-apps/app-store.md
+++ b/src/data/roadmaps/react-native/content/publishing-apps/app-store.md
@@ -2,5 +2,7 @@
 
 The App Store is Apple's official platform for distributing iOS apps to users with iPhones, iPads, and iPod Touch devices. To publish an app on the App Store, you need to follow specific guidelines and use the necessary tools provided by Apple.
 
-- [@article@Publishing to Apple App Store](https://reactnative.dev/docs/publishing-to-app-store)
+Visit the following resources to learn more:
+
+- [@official@Publishing to Apple App Store](https://reactnative.dev/docs/publishing-to-app-store)
 - [@feed@Explore top posts about App Store](https://app.daily.dev/tags/app-store?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/publishing-apps/google-store.md b/src/data/roadmaps/react-native/content/publishing-apps/google-store.md
index 79003830d..9fdbca0d8 100644
--- a/src/data/roadmaps/react-native/content/publishing-apps/google-store.md
+++ b/src/data/roadmaps/react-native/content/publishing-apps/google-store.md
@@ -2,5 +2,7 @@
 
 Publishing your React Native app on Google Store consists of several steps.
 
-- [@article@Publishing to Google Play Store](https://reactnative.dev/docs/signed-apk-android)
+Visit the following resources to learn more:
+
+- [@official@Publishing to Google Play Store](https://reactnative.dev/docs/signed-apk-android)
 - [@feed@Explore top posts about Google](https://app.daily.dev/tags/google?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/publishing-apps/index.md b/src/data/roadmaps/react-native/content/publishing-apps/index.md
index a4887c7a9..468c6ee3b 100644
--- a/src/data/roadmaps/react-native/content/publishing-apps/index.md
+++ b/src/data/roadmaps/react-native/content/publishing-apps/index.md
@@ -1,3 +1,8 @@
 # Publishing Apps
 
-Publishing React Native apps is the process of deploying your application on various app stores so that users can download and use your app. The two most popular app stores for publishing are the Apple App Store (iOS) and the Google Play Store (Android).
\ No newline at end of file
+Publishing React Native apps is the process of deploying your application on various app stores so that users can download and use your app. The two most popular app stores for publishing are the Apple App Store (iOS) and the Google Play Store (Android).
+
+Visit the following resources to learn more:
+
+- [@official@Publishing to Apple App Store](https://reactnative.dev/docs/publishing-to-app-store)
+- [@official@Publishing to Google Play Store](https://reactnative.dev/docs/signed-apk-android)
diff --git a/src/data/roadmaps/react-native/content/push-notifications.md b/src/data/roadmaps/react-native/content/push-notifications.md
index 7ee92471f..912bff5a0 100644
--- a/src/data/roadmaps/react-native/content/push-notifications.md
+++ b/src/data/roadmaps/react-native/content/push-notifications.md
@@ -5,4 +5,8 @@ Push notifications are a way to engage and retain users by delivering alerts, me
 In React Native, you can implement push notifications using third-party libraries or services. Some popular options are:
 
 - Firebase Cloud Messaging (FCM) for both Android and iOS
-- Apple Push Notification Service (APNs) for iOS
\ No newline at end of file
+- Apple Push Notification Service (APNs) for iOS
+
+Visit the following resources to learn more:
+
+- [@article@React Native Push Notifications](https://blog.logrocket.com/react-native-push-notifications-complete-guide/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/security/authentication.md b/src/data/roadmaps/react-native/content/security/authentication.md
index 6c54a18eb..63234ae1c 100644
--- a/src/data/roadmaps/react-native/content/security/authentication.md
+++ b/src/data/roadmaps/react-native/content/security/authentication.md
@@ -6,7 +6,7 @@ Authentication is a crucial aspect of securing your React Native application. It
 - OAuth
 - Simple Token Authentication
 
-Have a look at the following react native page for further details about security.
+Visit the following resources to learn more:
 
-- [@article@Authentication and Deep Linking](https://reactnative.dev/docs/security#authentication-and-deep-linking)
+- [@official@Authentication and Deep Linking](https://reactnative.dev/docs/security#authentication-and-deep-linking)
 - [@feed@Explore top posts about Authentication](https://app.daily.dev/tags/authentication?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/security/index.md b/src/data/roadmaps/react-native/content/security/index.md
index 6bb4bc671..e5a3ec477 100644
--- a/src/data/roadmaps/react-native/content/security/index.md
+++ b/src/data/roadmaps/react-native/content/security/index.md
@@ -1,84 +1,10 @@
 # Security
 
-# React Native Security
+Security is a vital consideration in React Native application development, as it helps protect user data and sensitive information. Key best practices include using secure storage solutions for sensitive data, such as authentication tokens and user credentials, with libraries like `react-native-keychain` and `react-native-encrypted-storage`. For secure communication, always use HTTPS for API interactions to ensure that data exchanged between the client and server is encrypted. Additionally, minimize permissions by requesting only those necessary for the app's functionality, ideally at runtime, using libraries like `react-native-permissions`.
 
-React Native is a framework for building cross-platform mobile applications using JavaScript and ReactJS. As with any application development, security is a crucial aspect to protect your application data and user information. Here is a brief overview of some React Native security best practices.
+Validating and sanitizing user input is crucial to prevent threats like SQL injection and cross-site scripting (XSS), which can be achieved with validation libraries such as `Yup`. Lastly, keeping dependencies up to date is essential to avoid known security vulnerabilities; tools like `npm audit` and Dependabot can assist in this process. By adhering to these best practices, developers can enhance the security of their React Native applications, safeguarding both application data and user information.
 
-## 1. Secure Storage
-Store sensitive data, such as authentication tokens, encryption keys, or user credentials, securely using a storage solution that comes with built-in encryption mechanisms.
+Visit the following resources to learn more:
 
-### Example:
-For React Native, [react-native-keychain](https://github.com/oblador/react-native-keychain) and [react-native-encrypted-storage](https://github.com/emeraldsanto/react-native-encrypted-storage) are popular libraries handling secure storage.
-
-```javascript
-import * as Keychain from 'react-native-keychain';
-
-// Save data to the keychain
-await Keychain.setGenericPassword(username, password);
-
-// Retrieve data from the keychain
-const credentials = await Keychain.getGenericPassword();
-```
-
-## 2. Secure Communication
-Use HTTPS for network communication with APIs and remote services. This ensures that the data exchanged between server and client is encrypted and secure.
-
-### Example:
-Use the [fetch](https://reactnative.dev/docs/network) method with URLs starting with 'https://'.
-
-```javascript
-const response = await fetch('https://example.com/api/data');
-const data = await response.json();
-```
-
-## 3. Minimize Permissions
-Request only the necessary permissions from the user that your application needs to function, and do this at runtime when the feature actually needs the permission.
-
-### Example:
-Using [react-native-permissions](https://github.com/zoontek/react-native-permissions), you can request permissions when they are needed:
-
-```javascript
-import {check, PERMISSIONS, request, RESULTS} from 'react-native-permissions';
-
-async function requestLocationPermission() {
-  const result = await check(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
-
-  if (result === RESULTS.DENIED) {
-    return await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
-  }
-
-  return result;
-}
-```
-
-## 4. Validate User Input
-Ensure you validate and sanitize all user input before processing it. This helps to prevent potential threats like SQL injection or cross-site scripting (XSS).
-
-### Example:
-Use a validation library like [Yup](https://github.com/jquense/yup) to validate user input.
-
-```javascript
-import * as Yup from 'yup';
-
-const loginSchema = Yup.object({
-  email: Yup.string().email('Invalid email address').required('Required'),
-  password: Yup.string()
-    .min(8, 'Password must be at least 8 characters')
-    .required('Required'),
-});
-
-loginSchema.validate({email: 'user@example.com', password: 'password'});
-```
-
-## 5. Keep Dependencies Up to Date
-Regularly update your dependencies to ensure they don't contain known security vulnerabilities. Use tools like [npm audit](https://docs.npmjs.com/cli/commands/npm-audit) and [dependabot](https://github.com/dependabot/dependabot-core) to automatically audit and update your dependencies.
-
-### Example:
-Using npm, you can update your dependencies and check for potential vulnerabilities:
-
-```bash
-npm update
-npm audit
-```
-
-Following these best practices will help you create more secure React Native applications, protecting your application's data and your users' information.
\ No newline at end of file
+- [@official@Security](https://reactnative.dev/docs/security)
+- [@article@Secure Authentication and Authorization in React Native](https://medium.com/@christopherobocha/secure-authentication-and-authorisation-in-react-native-a260f1787a89)
diff --git a/src/data/roadmaps/react-native/content/security/networking.md b/src/data/roadmaps/react-native/content/security/networking.md
index e78a51728..092707a77 100644
--- a/src/data/roadmaps/react-native/content/security/networking.md
+++ b/src/data/roadmaps/react-native/content/security/networking.md
@@ -1,9 +1,14 @@
 # Networking
 
-React Native offers various ways to handle networking tasks like making API calls, sending/receiving data from remote servers, and handling different network protocols.
+Networking in React Native primarily uses the Fetch API and XMLHttpRequest for making network requests. These APIs allow you to retrieve data from remote servers and handle asynchronous operations easily. React Native offers various ways to handle networking tasks like making API calls, sending/receiving data from remote servers, and handling different network protocols.
 
 - Fetch
 - HTTP Call Libraries
 - Web Sockets
 
-These are the major ways to handle networking tasks in React Native. Choose the method that best suits your specific use case and allows you to take full advantage of the features offered.
\ No newline at end of file
+These are the major ways to handle networking tasks in React Native. Choose the method that best suits your specific use case and allows you to take full advantage of the features offered.
+
+Visit the following resources to learn more:
+
+- [@official@Networking](https://reactnative.dev/docs/network)
+- [@article@Efficient Network Communication](https://medium.com/@Blochware/efficient-network-communication-best-practices-for-handling-api-calls-in-react-native-b5bebbc8ba71)
diff --git a/src/data/roadmaps/react-native/content/security/storage.md b/src/data/roadmaps/react-native/content/security/storage.md
index 98d092bc6..7991b02df 100644
--- a/src/data/roadmaps/react-native/content/security/storage.md
+++ b/src/data/roadmaps/react-native/content/security/storage.md
@@ -8,3 +8,8 @@ React Native provides a few ways to persist data locally in the app. Here's a br
 - Expo SQLite
 
 Choose the storage option that best fits your app's requirements and use cases. Keep in mind that AsyncStorage and SecureStorage are more suited for small-scale data storage, while Realm and SQLite support more complex storage and querying needs.
+
+Visit the following resources to learn more:
+
+- [@official@AsyncStorage](https://reactnative.dev/docs/asyncstorage)
+- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
diff --git a/src/data/roadmaps/react-native/content/storage/async-storage.md b/src/data/roadmaps/react-native/content/storage/async-storage.md
index fc37f9f4e..9d5346ff2 100644
--- a/src/data/roadmaps/react-native/content/storage/async-storage.md
+++ b/src/data/roadmaps/react-native/content/storage/async-storage.md
@@ -1,6 +1,8 @@
-# react-native-async-storage
+# React Native Async Storage
 
-An asynchronous, unencrypted, persistent, key-value storage system for React Native.
+React Native AsyncStorage is an unencrypted, asynchronous, persistent key-value storage system that allows developers to store data globally within their applications. It is primarily used for persisting data offline, making it suitable for scenarios like saving user preferences or session data.
 
-- [@opensource@Visit the Documentation](https://github.com/react-native-async-storage/async-storage)
-- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
+Visit the following resources to learn more:
+
+- [@official@Async Storage](https://reactnative.dev/docs/asyncstorage)
+- [@opensource@Async Storage - Github](https://github.com/react-native-async-storage/async-storage)
diff --git a/src/data/roadmaps/react-native/content/storage/expo-file-system.md b/src/data/roadmaps/react-native/content/storage/expo-file-system.md
index e30c004e4..354e2db6b 100644
--- a/src/data/roadmaps/react-native/content/storage/expo-file-system.md
+++ b/src/data/roadmaps/react-native/content/storage/expo-file-system.md
@@ -2,84 +2,6 @@
 
 Expo File System is a universal module that provides access to the file system on the device. Using this module, you can perform various file operations like reading, writing, copying, moving, and deleting files and folders. It also supports reading file metadata and querying file URI.
 
-To use the Expo File System library, you need to install the `expo-file-system` package:
+Visit the following resources to learn more:
 
-```bash
-expo install expo-file-system
-```
-
-First, import the `expo-file-system` module:
-
-```javascript
-import * as FileSystem from 'expo-file-system';
-```
-
-Here are some examples of how to use the Expo File System:
-
-## Reading a file
-
-```javascript
-async function readFileAsync() {
-    const fileUri = FileSystem.documentDirectory + 'myFile.txt';
-
-    try {
-        const content = await FileSystem.readAsStringAsync(fileUri);
-        console.log('File content:', content);
-    } catch (error) {
-        console.error('Error while reading file:', error);
-    }
-}
-```
-
-## Writing a file
-
-```javascript
-async function writeFileAsync() {
-    const fileUri = FileSystem.documentDirectory + 'myFile.txt';
-    const content = 'Hello, World!';
-
-    try {
-        await FileSystem.writeAsStringAsync(fileUri, content);
-        console.log('File written successfully');
-    } catch (error) {
-        console.error('Error while writing file:', error);
-    }
-}
-```
-
-## Copying & Moving a file
-
-```javascript
-async function copyAndMoveFileAsync() {
-    const srcUri = FileSystem.documentDirectory + 'myFile.txt';
-    const destUri = FileSystem.documentDirectory + 'copiedFile.txt';
-
-    try {
-        await FileSystem.copyAsync({ from: srcUri, to: destUri });
-        console.log('File copied successfully');
-
-        const newDestUri = FileSystem.documentDirectory + 'movedFile.txt';
-        await FileSystem.moveAsync({ from: destUri, to: newDestUri });
-        console.log('File moved successfully');
-    } catch (error) {
-        console.error('Error while copying/moving file:', error);
-    }
-}
-```
-
-## Deleting a file
-
-```javascript
-async function deleteFileAsync() {
-    const fileUri = FileSystem.documentDirectory + 'myFile.txt';
-
-    try {
-        await FileSystem.deleteAsync(fileUri);
-        console.log('File deleted successfully');
-    } catch (error) {
-        console.error('Error while deleting file:', error);
-    }
-}
-```
-
-I hope this brief summary of Expo File System helps you understand its functionality and usage. Remember to visit the [official documentation](https://docs.expo.dev/versions/latest/sdk/filesystem/) for more details and other available features.
\ No newline at end of file
+- [@official@Expo File System](https://docs.expo.dev/versions/latest/sdk/filesystem/)
diff --git a/src/data/roadmaps/react-native/content/storage/expo-secure-store.md b/src/data/roadmaps/react-native/content/storage/expo-secure-store.md
index 0e5fedc4a..53c77e1a7 100644
--- a/src/data/roadmaps/react-native/content/storage/expo-secure-store.md
+++ b/src/data/roadmaps/react-native/content/storage/expo-secure-store.md
@@ -2,65 +2,7 @@
 
 Expo Secure Store is a built-in package provided by the Expo SDK to store encrypted data securely on users' devices. It is a key-value storage system, but it is not designed to store larger amounts of data such as app databases or complex data structures. It is most appropriate for storing secret keys, access tokens, and small user preferences.
 
-First, you need to install the package by running:
+Visit the following resources to learn more:
 
-```bash
-expo install expo-secure-store
-```
-
-Then, import the module into your app:
-
-```javascript
-import * as SecureStore from 'expo-secure-store';
-```
-
-## Saving Data
-
-To save data to the secure store, use the `setItemAsync` method. It takes two arguments: a key and a value. Both should be strings.
-
-```javascript
-async function saveData() {
-  try {
-    await SecureStore.setItemAsync('your_key', 'your_value');
-    console.log('Data saved successfully!');
-  } catch (error) {
-    console.error('Error saving data:', error);
-  }
-}
-```
-
-## Retrieving Data
-
-To retrieve data from the secure store, use the `getItemAsync` method, which takes the key as a parameter and returns a Promise that resolves to the value.
-
-```javascript
-async function getData() {
-  try {
-    const value = await SecureStore.getItemAsync('your_key');
-    if (value !== null) {
-      console.log('Data retrieved:', value);
-    } else {
-      console.log('No data found with that key.');
-    }
-  } catch (error) {
-    console.error('Error retrieving data:', error);
-  }
-}
-```
-
-## Deleting Data
-
-To delete data from the secure store, use the `deleteItemAsync` method. It takes the key as a parameter.
-
-```javascript
-async function deleteData() {
-  try {
-    await SecureStore.deleteItemAsync('your_key');
-    console.log('Data deleted successfully!');
-  } catch (error) {
-    console.error('Error deleting data:', error);
-  }
-}
-```
-
-Please note that Expo Secure Store uses different security mechanisms based on the platform (iOS or Android). Additionally, while the store is encrypted, remember that it is not foolproof, and a determined attacker may be able to extract data. However, it provides a good balance between security and usability for most use cases.
\ No newline at end of file
+- [@official@secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/)
+- [@opensource@expo-secure-store package](https://www.npmjs.com/package/expo-secure-store?activeTab=readme)
diff --git a/src/data/roadmaps/react-native/content/storage/expo-sqlite.md b/src/data/roadmaps/react-native/content/storage/expo-sqlite.md
index ac0a4e652..b31d85704 100644
--- a/src/data/roadmaps/react-native/content/storage/expo-sqlite.md
+++ b/src/data/roadmaps/react-native/content/storage/expo-sqlite.md
@@ -1,5 +1,9 @@
 # expo-sqlite
 
-Expo SQLite is a powerful tool for handling local SQLite databases in your React Native application. By using this API, you can create, read, update, and delete data as needed, without writing native code. Expo SQLite is available as part of the [expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/) package, which provides an easy-to-use interface for SQLite functionalities.
+Expo SQLite is a powerful tool for handling local SQLite databases in your React Native application. By using this API, you can create, read, update, and delete data as needed, without writing native code. Expo SQLite is available as part of the expo-sqlite package, which provides an easy-to-use interface for SQLite functionalities.
 
-With Expo SQLite, you can efficiently manage SQLite databases within your React Native applications. It enables you to perform various database operations without the need for writing native code.
\ No newline at end of file
+With Expo SQLite, you can efficiently manage SQLite databases within your React Native applications. It enables you to perform various database operations without the need for writing native code.
+
+Visit the following resources to learn more:
+
+- [@official@expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/)
diff --git a/src/data/roadmaps/react-native/content/storage/index.md b/src/data/roadmaps/react-native/content/storage/index.md
index 1de740436..1fc44be50 100644
--- a/src/data/roadmaps/react-native/content/storage/index.md
+++ b/src/data/roadmaps/react-native/content/storage/index.md
@@ -1,10 +1,7 @@
 # Storage
 
-React Native provides a few ways to persist data locally in the app. Here's a brief summary of the storage options available:
+React Native offers several methods for persisting data locally within applications, each catering to different storage needs and use cases. The primary options include Async Storage, which provides a simple key-value storage system suitable for small-scale data; Expo Secure Store, designed for securely storing sensitive information; Expo File System, which allows for file management and storage; and Expo SQLite, which supports more complex data storage and querying capabilities. When selecting a storage option, it's essential to consider the specific requirements of your app.
 
-- Async Storage
-- Expo Secure Store
-- Expo File System
-- Expo SQLite
+Visit the following resources to learn more:
 
-Choose the storage option that best fits your app's requirements and use cases. Keep in mind that AsyncStorage and SecureStorage are more suited for small-scale data storage, while Realm and SQLite support more complex storage and querying needs.
\ No newline at end of file
+- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
diff --git a/src/data/roadmaps/react-native/content/storage/other-storage-options.md b/src/data/roadmaps/react-native/content/storage/other-storage-options.md
index d0b4b789a..898d5b401 100644
--- a/src/data/roadmaps/react-native/content/storage/other-storage-options.md
+++ b/src/data/roadmaps/react-native/content/storage/other-storage-options.md
@@ -2,8 +2,11 @@
 
 Besides AsyncStorage, there are other options available for handling data storage in React Native applications. This guide will briefly cover some popular options: Realm, Firebase Realtime Database, and SQLite.
 
-- [@opensource@Realm](https://github.com/realm/realm-js)
-- [@article@Firebase Realtime Database](https://firebase.google.com/docs/database)
-- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
-
 These are just a few examples of additional storage options for React Native. Depending on your requirements, you may choose the one that best fits your project.
+
+Visit the following resources to learn more:
+
+- [@official@Async Storage](https://reactnative.dev/docs/asyncstorage)
+- [@opensource@Realm - Github](https://github.com/realm/realm-js)
+- [@article@Firebase Realtime Database](https://firebase.google.com/docs/database)
+- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/styling/accessibility.md b/src/data/roadmaps/react-native/content/styling/accessibility.md
index 02f05cb18..0078e5106 100644
--- a/src/data/roadmaps/react-native/content/styling/accessibility.md
+++ b/src/data/roadmaps/react-native/content/styling/accessibility.md
@@ -1,89 +1,7 @@
 # Accessibility
 
-Accessibility (a11y) in React Native allows you to create applications that are usable to everyone, including people with disabilities. It provides a set of attributes and APIs to customize UI components by considering diverse user needs.
+Accessibility (often abbreviated as a11y) in React Native is a crucial aspect of application development that ensures your applications are usable by everyone, including individuals with disabilities. This commitment to inclusivity is not just a legal requirement in many jurisdictions but also a moral imperative that enhances the user experience for all. React Native provides a comprehensive set of accessibility features, attributes, and APIs that allow developers to create applications that cater to diverse user needs. By implementing these features, developers can ensure that their applications are navigable and usable by individuals with visual, auditory, motor, or cognitive impairments.
 
-## Accessibility Props
+Visit the following resources to learn more:
 
-React Native provides several accessibility properties that can be applied to components for enhancing their a11y features:
-
-`accessible` : (Boolean) - Indicates if the element can be focused by screen readers.
-```jsx
-<TouchableOpacity accessible={true} />
-```
-
-`accessibilityLabel` : (String) - Used by the screen reader to describe the element to the user.
-```jsx
-<TouchableOpacity accessibilityLabel="Tap me!">
-```
-
-`accessibilityHint` : (String) - Gives a hint to the user of the components behavior.
-```jsx
-<TouchableOpacity accessibilityHint="Tapping this button will show a welcome text">
-```
-
-`accessibilityRole` : (String) - Describes the role of the element for the screen reader.
-```jsx
-<TextInput accessibilityRole="search" />
-```
-
-`accessibilityValue` : (Object with properties: min, max, now) - Defines the accessibility values for elements such as progress bars or sliders, among others.
-
-```jsx
-<Slider
-  accessibilityValue={{
-    min: 0,
-    max: 100,
-    now: 50,
-  }}
-/>
-```
-
-`accessibilityState` : (Object) - Represents the current state of the component.
-```jsx
-<TouchableOpacity
-  accessibilityState={{
-    disabled: false,
-    selected: true,
-  }}
-/>
-```
-
-`accessibilityActions` and `onAccessibilityAction` are used to create custom actions.
-```jsx
-import { AccessibilityInfo, Text, View } from 'react-native';
-
-function CustomButton() {
-  const [count, setCount] = React.useState(0);
-
-  const onIncrement = () => {
-    setCount(count + 1);
-  };
-
-  React.useEffect(() => {
-    const announce = () => {
-      AccessibilityInfo.announceForAccessibility(`Count raised to ${count}`);
-    };
-    announce();
-  }, [count]);
-
-  return (
-    <View
-      accessible={true}
-      accessibilityActions={[
-        { name: "increment", label: "increase count" },
-      ]}
-      onAccessibilityAction={(event) => {
-        switch (event.nativeEvent.actionName) {
-          case "increment":
-            onIncrement();
-            break;
-        }
-      }}
-    >
-      <Text>Increment Counter: {count}</Text>
-    </View>
-  );
-}
-```
-
-Of course, different platforms may have some exclusive accessibility properties, which can be found in the [official React Native documentation](https://reactnative.dev/docs/accessibility).
\ No newline at end of file
+- [@official@Accessibility](https://reactnative.dev/docs/accessibility)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/styling/index.md b/src/data/roadmaps/react-native/content/styling/index.md
index 5919baf6b..3118b8e89 100644
--- a/src/data/roadmaps/react-native/content/styling/index.md
+++ b/src/data/roadmaps/react-native/content/styling/index.md
@@ -1,87 +1,9 @@
 # Styling
 
-Styling in React Native is accomplished through JavaScript and uses a subset of CSS properties. Unlike CSS in web development, React Native has its own set of components and styling rules. The main components used for styling are `StyleSheet`, `View`, and `Text`. 
-
-## StyleSheet
+Styling in React Native is accomplished through JavaScript and uses a subset of CSS properties. Unlike CSS in web development, React Native has its own set of components and styling rules. The main components used for styling are `StyleSheet`, `View`, and `Text`.
 
 `StyleSheet` is a module provided by React Native to manage and optimize styles. It is similar to a CSS stylesheet and helps in creating and working with multiple styles efficiently.
 
-```jsx
-import { StyleSheet, View, Text } from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-```
-
-## View and Text components
-
-`View` and `Text` components are the basic building blocks for creating a user interface in React Native. They are used to add structure and style to the layout.
-
-```jsx
-import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Hello, React Native!</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-```
-
-## Inline styles
-
-In some cases, you might prefer to apply styles directly to a component using inline styling. However, it is not recommended for larger applications due to performance issues.
-
-```jsx
-import React from 'react';
-import { View, Text } from 'react-native';
-
-export default function App() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Text
-        style={{
-          fontSize: 20,
-          fontWeight: 'bold',
-        }}
-      >
-        Hello, React Native!
-      </Text>
-    </View>
-  );
-}
-```
+Visit the following resources to learn more:
 
-In summary, styling in React Native is done through JavaScript using a subset of CSS properties. The main components used for styling are `StyleSheet`, `View`, and `Text`. You can also use inline styles when necessary, although it's not recommended for performance reasons.
\ No newline at end of file
+- [@official@Styling](https://reactnative.dev/docs/style)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/styling/layouts.md b/src/data/roadmaps/react-native/content/styling/layouts.md
index 484ace174..f5d378c97 100644
--- a/src/data/roadmaps/react-native/content/styling/layouts.md
+++ b/src/data/roadmaps/react-native/content/styling/layouts.md
@@ -2,56 +2,9 @@
 
 In React Native, layouts are primarily managed using the Flexbox styling system. Flexbox is a powerful and flexible layout system that allows you to create responsive and complex UIs using a set of simple rules.
 
-## Flexbox
-
-Flexbox consists of three key elements: the `container`, `main axis`, and `cross axis`. 
-- The `container` is the parent flex container that holds and distributes all the child elements.
-- The `main axis` is the primary direction of the layout (horizontal or vertical).
-- The `cross axis` is the perpendicular direction, opposite of the main axis.
-
-Here are some of the most commonly used Flexbox styles:
-
-- **`flexDirection`**: This style specifies the primary axis using four possible values: `row`, `row-reverse`, `column`, or `column-reverse`.
-```jsx
-<View style={{flexDirection: 'row'}}>
-  <Text>First child</Text>
-  <Text>Second child</Text>
-</View>
-```
-
-- **`alignItems`**: This style is used to align the child items along the cross-axis. It uses the values `flex-start`, `flex-end`, `center`, `stretch`, or `baseline`.
-```jsx
-<View style={{flexDirection: 'row', alignItems: 'center'}}>
-  <Text>First child</Text>
-  <Text>Second child</Text>
-</View>
-```
-
-- **`justifyContent`**: This style is used to align the child items along the main axis. It accepts the values `flex-start`, `flex-end`, `center`, `space-between`, or `space-around`.
-```jsx
-<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-  <Text>First child</Text>
-  <Text>Second child</Text>
-</View>
-```
-
-- **`flexWrap`**: Set to either `wrap` or `nowrap` to specify if child items should wrap around to the next line when there's not enough space on the current line.
-```jsx
-<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
-  <Text>First child</Text>
-  <Text>Second child</Text>
-  <Text>Third child</Text>
-</View>
-```
-
-- **`flex`**: This style determines how the child items grow or shrink when there's remaining space in the container. It's a shorthand for `grow`, `shrink`, and `flex-basis`.
-```jsx
-<View style={{flexDirection: 'row'}}>
-  <Text style={{flex: 1}}>First child</Text>
-  <Text style={{flex: 2}}>Second child</Text>
-</View>
-```
-
 You can use these styles in various combinations to create flexible layouts in React Native. Flexbox makes it easy to create responsive UIs that adapt to changes in screen size or orientation. Note that some of these styles might not work as expected in React Native compared to in CSS for the web, but the overall concepts remain the same.
 
-To learn more about these styling properties, you can refer to the [official React Native documentation](https://reactnative.dev/docs/flexbox).
\ No newline at end of file
+Visit the following resources to learn more:
+
+- [@official@Flexbox](https://reactnative.dev/docs/flexbox)
+- [@official@Layout Props](https://reactnative.dev/docs/layout-props)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/styling/stylesheets.md b/src/data/roadmaps/react-native/content/styling/stylesheets.md
index ef6de6829..7a29e5c14 100644
--- a/src/data/roadmaps/react-native/content/styling/stylesheets.md
+++ b/src/data/roadmaps/react-native/content/styling/stylesheets.md
@@ -2,87 +2,6 @@
 
 In React Native, stylesheets are objects that define the appearance of components. They provide a way to separate styling from the component's logic. Stylesheets are created using `StyleSheet.create` method, which ensures a standardized and efficient way to manage styles for your components.
 
-## Creating a stylesheet
+Visit the following resources to learn more:
 
-You can create a stylesheet by importing `StyleSheet` from 'react-native', and then defining your styles using `StyleSheet.create` method. 
-
-```jsx
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  text: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-});
-```
-
-## Applying styles to components
-
-To apply styles, simply reference the style object from your stylesheet using `styles.styleName`. For example:
-
-```jsx
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Hello, React Native!</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  text: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-});
-
-export default App;
-```
-
-## Combining styles
-
-You can combine multiple styles by passing an array of styles to the `style` prop of a component. The last style in the array takes precedence if there are conflicting styles.
-
-```jsx
-<View style={[styles.container, styles.backgroundRed]}>
-  <Text style={styles.text}>Hello, React Native!</Text>
-</View>
-
-// Adding backgroundRed to the existing styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  text: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  backgroundRed: {
-    backgroundColor: 'red',
-  },
-});
-```
-
-That's a brief summary of stylesheets in React Native. You can now create, apply, and combine styles for your React Native components.
\ No newline at end of file
+- [@official@Stylesheets](https://reactnative.dev/docs/stylesheet)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/testing/appium.md b/src/data/roadmaps/react-native/content/testing/appium.md
index d5ef89e4a..d7e623752 100644
--- a/src/data/roadmaps/react-native/content/testing/appium.md
+++ b/src/data/roadmaps/react-native/content/testing/appium.md
@@ -1,9 +1,7 @@
 # Appium
 
-Appium is an open-source test automation framework for mobile devices, targeting native, hybrid, or mobile-web apps for iOS, Android, and Windows platforms. Appium works with multiple programming languages, including JavaScript, Ruby, Python, Java, and C#.
+Appium is an open-source test automation framework for mobile devices, targeting native, hybrid, or mobile-web apps for iOS, Android, and Windows platforms. Appium works with multiple programming languages, including JavaScript, Ruby, Python, Java, and C#. Appium uses the WebDriver protocol, which allows you to write tests that can interact with your app through a series of commands. The WebDriver protocol interprets these commands into actions that are then performed on the app.
 
-Appium uses the WebDriver protocol, which allows you to write tests that can interact with your app through a series of commands. The WebDriver protocol interprets these commands into actions that are then performed on the app.
+Learn more from the following resources:
 
-Learn more about Appium from the following resources:
-
-- [@official@Appium Documentation](http://appium.io/)
\ No newline at end of file
+- [@official@Appium Documentation](https://appium.io/docs/en/latest/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/testing/detox.md b/src/data/roadmaps/react-native/content/testing/detox.md
index 16e3de6be..e312b276b 100644
--- a/src/data/roadmaps/react-native/content/testing/detox.md
+++ b/src/data/roadmaps/react-native/content/testing/detox.md
@@ -2,6 +2,6 @@
 
 Detox is an end-to-end testing framework for React Native applications. It enables you to run tests on an actual device or in a simulator/emulator environment. The goal of Detox is to maintain a high level of confidence in your application's behavior while allowing for quick test runs and easy debugging.
 
-Learn more about Detox from the following links:
+Learn more from the following links:
 
-- [@article@Detox Official Docs](https://wix.github.io/Detox/)
\ No newline at end of file
+- [@official@Detox Documentation](https://wix.github.io/Detox/)
\ No newline at end of file
diff --git a/src/data/roadmaps/react-native/content/testing/jest.md b/src/data/roadmaps/react-native/content/testing/jest.md
index 13ea49246..298efee26 100644
--- a/src/data/roadmaps/react-native/content/testing/jest.md
+++ b/src/data/roadmaps/react-native/content/testing/jest.md
@@ -1,11 +1,10 @@
 # Jest
 
-Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
-It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
+Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
 
 Visit the following resources to learn more:
 
-- [@article@Official Website](https://jestjs.io/)
-- [@article@Official Documentation](https://jestjs.io/docs/getting-started)
+- [@official@Jest](https://jestjs.io/)
+- [@official@Jest Documentation](https://jestjs.io/docs/getting-started)
 - [@video@Jest Crash Course - Unit Testing in JavaScript](https://www.youtube.com/watch?v=7r4xVDI2vho)
 - [@feed@Explore top posts about Jest](https://app.daily.dev/tags/jest?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/testing/react-native-testing-library.md b/src/data/roadmaps/react-native/content/testing/react-native-testing-library.md
index 093e25bc7..19bc55550 100644
--- a/src/data/roadmaps/react-native/content/testing/react-native-testing-library.md
+++ b/src/data/roadmaps/react-native/content/testing/react-native-testing-library.md
@@ -2,11 +2,7 @@
 
 React Native Testing Library (RNTL) is a collection of tools and utilities to test React Native components. It is built on top of the Testing Library ecosystem, designed to work seamlessly with Jest and other testing frameworks. Its primary goal is to enable efficient and effective testing by providing simple and intuitive APIs that promote best practices, like testing UI components in isolation and promoting accessibility checks.
 
-- It encourages testing from a user's perspective, focusing on interaction and accessibility rather than component implementation details.
-- Built-in support for React Native's asynchronous APIs like `act` and `flushMicrotasksQueue`.
-- Provides utility methods to query, fire events, and wait for elements in the components tree.
-
-Follow the links below for more details:
+Visit the following resources to learn more:
 
 - [@article@React Native Testing Library](https://callstack.github.io/react-native-testing-library/)
 - [@article@React Native Testing Library (Docs)](https://testing-library.com/docs/react-native-testing-library/intro/)
diff --git a/src/data/roadmaps/react-native/content/testing/react-test-renderer.md b/src/data/roadmaps/react-native/content/testing/react-test-renderer.md
index 3378467f0..f9329a33a 100644
--- a/src/data/roadmaps/react-native/content/testing/react-test-renderer.md
+++ b/src/data/roadmaps/react-native/content/testing/react-test-renderer.md
@@ -2,5 +2,7 @@
 
 React Test Renderer is a library provided by the React team that allows you to render React components as JavaScript objects without depending on the DOM or a native mobile environment. It can be used to test components in Node.js environments where the actual rendering is not required.
 
-- [@article@React Test Renderer](https://jestjs.io/docs/tutorial-react)
+Visit the following resources to learn more:
+
+- [@official@React Test Renderer](https://jestjs.io/docs/tutorial-react)
 - [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/using-native-modules/for-android.md b/src/data/roadmaps/react-native/content/using-native-modules/for-android.md
index 8c73f69f9..f4bdf751f 100644
--- a/src/data/roadmaps/react-native/content/using-native-modules/for-android.md
+++ b/src/data/roadmaps/react-native/content/using-native-modules/for-android.md
@@ -1,6 +1,8 @@
 # For Android
 
-Visit the Native Modules documentation in react native documentation to learn more about this topic.
+Native modules in React Native provide a powerful way to access device-specific features and capabilities that are not available through the standard React Native APIs. For example, a Bluetooth module can be created using the Android Bluetooth API, allowing applications to scan for nearby Bluetooth devices, connect to them, and transfer data.
 
-- [@article@Android Native Modules](https://reactnative.dev/docs/turbo-native-modules-introduction?platforms=android)
+Visit the following resources to learn more:
+
+- [@official@Android Native Modules](https://reactnative.dev/docs/legacy/native-modules-android)
 - [@feed@Explore top posts about Android](https://app.daily.dev/tags/android?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/using-native-modules/for-ios.md b/src/data/roadmaps/react-native/content/using-native-modules/for-ios.md
index 436be7136..508854df1 100644
--- a/src/data/roadmaps/react-native/content/using-native-modules/for-ios.md
+++ b/src/data/roadmaps/react-native/content/using-native-modules/for-ios.md
@@ -1,6 +1,8 @@
 # For iOS
 
-Visit the Native Modules documentation in react native documentation to learn more about this topic.
+iOS native modules in React Native allow developers to tap into the rich ecosystem of iOS features and functionalities that are not directly accessible through the standard React Native APIs. For instance, a Camera module can be implemented using the AVFoundation framework, enabling developers to capture photos and videos directly from their applications.
 
-- [@article@iOS Native Modules](https://reactnative.dev/docs/turbo-native-modules-introduction?platforms=android)
+Visit the following resources to learn more:
+
+- [@official@iOS Native Modules](https://reactnative.dev/docs/legacy/native-modules-ios)
 - [@feed@Explore top posts about iOS](https://app.daily.dev/tags/ios?ref=roadmapsh)
diff --git a/src/data/roadmaps/react-native/content/using-native-modules/index.md b/src/data/roadmaps/react-native/content/using-native-modules/index.md
index f30dd355f..30c37f130 100644
--- a/src/data/roadmaps/react-native/content/using-native-modules/index.md
+++ b/src/data/roadmaps/react-native/content/using-native-modules/index.md
@@ -4,4 +4,6 @@ Sometimes a React Native app needs to access a native platform API that is not a
 
 The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don't expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn't export a native API that your JS app needs you should be able to export it yourself!
 
-- [@article@Native Modules Introduction](https://reactnative.dev/docs/native-platform)
+Visit the following resources to learn more:
+
+- [@official@Native Modules Introduction](https://reactnative.dev/docs/native-platform)