diff --git a/components/Filters.tsx b/components/Filters.tsx
index 902841ab..e1bd2803 100644
--- a/components/Filters.tsx
+++ b/components/Filters.tsx
@@ -160,6 +160,13 @@ export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
             title="Has TypeScript types"
             basePath={basePath}
           />
+          <ToggleLink
+            key="newArchitecture"
+            query={query}
+            paramName="newArchitecture"
+            title="Supports New Architecture"
+            basePath={basePath}
+          />
           {isMainSearch ? (
             <ToggleLink
               key="isMaintained"
diff --git a/components/Library/MetaData.tsx b/components/Library/MetaData.tsx
index df0a63a6..3de78c8b 100644
--- a/components/Library/MetaData.tsx
+++ b/components/Library/MetaData.tsx
@@ -16,6 +16,7 @@ import {
   Fork,
   Code,
   TypeScript,
+  ReactLogo,
 } from '../Icons';
 import { DirectoryScore } from './DirectoryScore';
 
@@ -25,7 +26,7 @@ type Props = {
 };
 
 const generateData = (library, secondary, isDark) => {
-  const { github } = library;
+  const { github, newArchitecture } = library;
 
   if (secondary) {
     const secondaryTextColor = {
@@ -34,7 +35,7 @@ const generateData = (library, secondary, isDark) => {
     const iconColor = isDark ? darkColors.pewter : colors.secondary;
     const paragraphStyles = [styles.secondaryText, secondaryTextColor];
     const linkStyles = [...paragraphStyles, styles.mutedLink];
-    const hoverStyle = isDark ? { color: colors.primaryDark } : undefined;
+    const hoverStyle = isDark && { color: colors.primaryDark };
 
     return [
       github.urls.homepage
@@ -69,6 +70,20 @@ const generateData = (library, secondary, isDark) => {
             content: <P style={paragraphStyles}>TypeScript Types</P>,
           }
         : null,
+      newArchitecture || github.newArchitecture
+        ? {
+            id: 'newArchitecture',
+            icon: <ReactLogo fill={iconColor} width={17} height={17} />,
+            content: (
+              <A
+                href="https://reactnative.dev/docs/new-architecture-intro"
+                style={linkStyles}
+                hoverStyle={hoverStyle}>
+                New Architecture
+              </A>
+            ),
+          }
+        : null,
       library.examples && library.examples.length
         ? {
             id: 'examples',
@@ -80,7 +95,6 @@ const generateData = (library, secondary, isDark) => {
                   <A
                     key={example}
                     href={example}
-                    target="blank"
                     style={[...linkStyles, styles.exampleLink]}
                     hoverStyle={hoverStyle}>
                     #{index + 1}
@@ -102,7 +116,7 @@ const generateData = (library, secondary, isDark) => {
             target="_self"
             href="/scoring"
             style={[styles.link, styles.mutedLink]}
-            hoverStyle={isDark ? { color: colors.primaryDark } : undefined}>
+            hoverStyle={isDark && { color: colors.primaryDark }}>
             Directory Score
           </A>
         ),
diff --git a/debug-github-repos.json b/debug-github-repos.json
index a2ec15f5..1b377b64 100644
--- a/debug-github-repos.json
+++ b/debug-github-repos.json
@@ -18,6 +18,7 @@
   {
     "githubUrl": "https://github.com/react-native-datetimepicker/datetimepicker",
     "npmPkg": "@react-native-community/datetimepicker",
-    "expo": true
+    "expo": true,
+    "newArchitecture": true
   }
 ]
diff --git a/pages/api/libraries/index.ts b/pages/api/libraries/index.ts
index 545c6d68..29c594b3 100644
--- a/pages/api/libraries/index.ts
+++ b/pages/api/libraries/index.ts
@@ -65,6 +65,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
     isRecommended: req.query.isRecommended,
     wasRecentlyUpdated: req.query.wasRecentlyUpdated,
     minPopularity: req.query.minPopularity,
+    newArchitecture: req.query.newArchitecture,
   });
 
   const offset = req.query.offset ? parseInt(req.query.offset.toString(), 10) : 0;
diff --git a/react-native-libraries.json b/react-native-libraries.json
index b50cacf6..97ce4139 100644
--- a/react-native-libraries.json
+++ b/react-native-libraries.json
@@ -4806,8 +4806,8 @@
     "examples": ["https://github.com/xcarpentier/rn-tourguide/blob/master/App.tsx"]
   },
   {
-    "githubUrl": "https://github.com/callstack/react-native-slider/tree/master/src",
-    "examples": ["https://github.com/callstack/react-native-slider/tree/master/example"],
+    "githubUrl": "https://github.com/callstack/react-native-slider/tree/main/package",
+    "examples": ["https://github.com/callstack/react-native-slider/tree/main/example"],
     "npmPkg": "@react-native-community/slider",
     "images": [
       "https://i.postimg.cc/dQTYzGD5/Screenshot-2019-03-25-at-11-24-59.png",
@@ -8493,13 +8493,13 @@
     "ios": true
   },
   {
-  "githubUrl": "https://github.com/vonovak/react-native-theme-control",
-  "images": [
-    "https://raw.githubusercontent.com/vonovak/react-native-theme-control/main/img/light_mode.png",
-    "https://raw.githubusercontent.com/vonovak/react-native-theme-control/main/img/dark_mode.png"
-  ],
-  "android": true,
-  "ios": true
+    "githubUrl": "https://github.com/vonovak/react-native-theme-control",
+    "images": [
+      "https://raw.githubusercontent.com/vonovak/react-native-theme-control/main/img/light_mode.png",
+      "https://raw.githubusercontent.com/vonovak/react-native-theme-control/main/img/dark_mode.png"
+    ],
+    "android": true,
+    "ios": true
   },
   {
     "githubUrl": "https://github.com/dcangulo/react-native-outside-press",
@@ -8519,9 +8519,7 @@
   },
   {
     "githubUrl": "https://github.com/thakurballary/react-native-btr",
-    "examples": [
-      "https://github.com/thakurballary/react-native-btr-demo"
-    ],
+    "examples": ["https://github.com/thakurballary/react-native-btr-demo"],
     "ios": true,
     "android": true,
     "expo": true
@@ -8532,9 +8530,9 @@
     "images": [
       "https://raw.githubusercontent.com/FormidableLabs/react-native-ama/main/ama-demo.png"
     ],
-    "ios":true,
-    "android":true,
-    "dev": true 
+    "ios": true,
+    "android": true,
+    "dev": true
   },
   {
     "githubUrl": "https://github.com/xulihang/vision-camera-dynamsoft-label-recognizer",
diff --git a/react-native-libraries.schema.json b/react-native-libraries.schema.json
index 0deda23d..3e156a0e 100644
--- a/react-native-libraries.schema.json
+++ b/react-native-libraries.schema.json
@@ -117,6 +117,13 @@
         "title": "The Template Schema",
         "default": false,
         "examples": [true]
+      },
+      "newArchitecture": {
+        "$id": "#/items/properties/newArch",
+        "type": "boolean",
+        "title": "The New Architecture Support Schema",
+        "default": false,
+        "examples": [true]
       }
     }
   }
diff --git a/scripts/fetch-github-data.js b/scripts/fetch-github-data.js
index 1098987a..449a23f6 100644
--- a/scripts/fetch-github-data.js
+++ b/scripts/fetch-github-data.js
@@ -11,7 +11,7 @@ const Authorization = `bearer ${process.env.GITHUB_TOKEN}`;
 const licenses = {};
 
 /**
- * Fetch licenses from github to be used later to parse licenses from npm
+ * Fetch licenses from GitHub to be used later to parse licenses from npm
  */
 export const loadGitHubLicenses = async () => {
   const query = `
@@ -237,6 +237,8 @@ const createRepoDataWithResponse = (json, monorepo) => {
     try {
       const packageJson = JSON.parse(json.packageJson.text);
 
+      json.newArchitecture = Boolean(packageJson.codegenConfig);
+
       if (monorepo) {
         json.homepageUrl = packageJson.homepage;
         json.name = packageJson.name;
@@ -307,5 +309,6 @@ const createRepoDataWithResponse = (json, monorepo) => {
     license: json.licenseInfo,
     lastRelease: json.lastRelease,
     hasTypes: json.types,
+    newArchitecture: json.newArchitecture,
   };
 };
diff --git a/types/index.ts b/types/index.ts
index 572c415a..b001bd25 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -28,6 +28,7 @@ export type Query = {
   isRecommended?: string;
   wasRecentlyUpdated?: string;
   minPopularity?: string | number;
+  newArchitecture?: string;
 };
 
 export type Library = {
@@ -43,6 +44,7 @@ export type Library = {
   unmaintained?: boolean;
   dev?: boolean;
   template?: boolean;
+  newArchitecture?: boolean;
   github: {
     urls: {
       repo: string;
@@ -82,6 +84,7 @@ export type Library = {
       isPrerelease: boolean;
     };
     hasTypes: boolean;
+    newArchitecture: string;
   };
   npm: {
     downloads: number;
diff --git a/util/search.js b/util/search.js
index baf84dec..fa8a4635 100644
--- a/util/search.js
+++ b/util/search.js
@@ -30,6 +30,7 @@ export const handleFilterLibraries = ({
   isRecommended,
   wasRecentlyUpdated,
   minPopularity,
+  newArchitecture,
 }) => {
   const viewerHasChosenTopic = !isEmptyOrNull(queryTopic);
   const viewerHasTypedSearch = !isEmptyOrNull(querySearch);
@@ -89,6 +90,10 @@ export const handleFilterLibraries = ({
       return false;
     }
 
+    if (newArchitecture && !library.newArchitecture && !library.github.newArchitecture) {
+      return false;
+    }
+
     if (isMaintained && library.unmaintained) {
       return false;
     }