From 97afdd63b385f71a624d99794f183d8798b775ff Mon Sep 17 00:00:00 2001
From: Mayankp_500374 <mayankp_500374@PRINHYLTAP1204.local>
Date: Tue, 8 Apr 2025 17:43:04 +0530
Subject: [PATCH 1/2] added flag component

---
 website/src/components/Flag.js     | 16 ++++++++++++++++
 website/src/theme/MDXComponents.js |  8 ++++++++
 website/static/css/custom.css      | 30 +++++++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 website/src/components/Flag.js
 create mode 100644 website/src/theme/MDXComponents.js

diff --git a/website/src/components/Flag.js b/website/src/components/Flag.js
new file mode 100644
index 000000000..e552490ea
--- /dev/null
+++ b/website/src/components/Flag.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const PLATFORM_LABELS = {
+  android: 'Android',
+  ios: 'iOS',
+  native: 'React Native',
+  web: 'Web Only',
+};
+
+export default function Flag({ name, style, className }) {
+  const key = name?.toLowerCase();
+  const label = PLATFORM_LABELS[key] || name;
+  const combinedClassName = clsx('flag', `flag-${key?.replace(/\s+/g, '-')}`, className);
+  return <span className={combinedClassName} style={style}>{label}</span>;
+}
diff --git a/website/src/theme/MDXComponents.js b/website/src/theme/MDXComponents.js
new file mode 100644
index 000000000..f4aaef0e1
--- /dev/null
+++ b/website/src/theme/MDXComponents.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import MDXComponents from '@theme-original/MDXComponents';
+import Flag from '@site/src/components/Flag';
+
+export default {
+  ...MDXComponents,
+  Flag,
+};
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 22a637c08..10898a80d 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -1912,5 +1912,33 @@ h2.widget-header{
     }
 }
 
-
+.flag {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.6rem;
+    border-radius: 0.25rem;
+    background-color: #eee;
+    color: #333;
+    margin-left: 0.25rem;
+    font-weight: var(--ifm-heading-font-weight);
+  }
+  
+  .flag-android {
+    background-color: #a4c639;
+    color: black;
+  }
+  
+  .flag-ios {
+    background-color: #007aff;
+    color: white;
+  }
+  
+  .flag-web {
+    background-color: #f26522;
+    color: white;
+  }
+  
+  .flag-native {
+    background-color: #6f42c1;
+    color: white;
+  }
    

From bc414e20fd900a63967bd00e766ed29f9307ca3a Mon Sep 17 00:00:00 2001
From: Mayankp_500374 <mayankp_500374@PRINHYLTAP1204.local>
Date: Tue, 8 Apr 2025 17:43:23 +0530
Subject: [PATCH 2/2] added flag component example

---
 learn/react-native/react-native-overview.md | 32 +++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/learn/react-native/react-native-overview.md b/learn/react-native/react-native-overview.md
index 8408880a9..d3cd6b8a5 100644
--- a/learn/react-native/react-native-overview.md
+++ b/learn/react-native/react-native-overview.md
@@ -13,6 +13,38 @@ To develop fully Native apps, you do not need to learn additional programming sk
 
 ## Architecture
 
+### same line single <Flag name="android" />
+
+### same line multiple <Flag name="native" /> <Flag name="web" />
+
+### next line single
+<Flag name="native" style={{marginLeft:0}}/>
+
+### next line multiple
+<Flag name="native" style={{marginLeft:0}}/> <Flag name="android" /> <Flag name="ios" /> <Flag name="web"/>
+
+### default style for new flags <Flag name="some custom text" />
+
+## Example use cases
+
+### this section is only applicable for native <Flag name="native" />
+some description
+
+### this section is only applicable for web <Flag name="web" />
+some description
+
+### some other section
+some text
+
+<Flag name="web" style={{marginLeft:0}}/> - some web specific things
+
+<br />
+<br />
+<br />
+<Flag name="native" style={{marginLeft:0}}/>
+
+some native specific details, long para
+
 React Native is a mobile app framework from Facebook. It is based on ReactJS principles (Virtual DOM). You can define app UI using the React Native markup and extensions in JavaScript. React Native will render UI using native UI controls similar to native apps based on the UI definition in runtime.
 
 ![React Native Architecture](/learn/assets/react-native-architecture.png)