Add New arch only support status (#1812)

* Add New arch only support status

* Update README.md

Author: gabrieldonadel

README.md

@@ -139,7 +139,7 @@
 - #### `template`
   **(boolean)** - signify that a library is a new project template.
 - #### `newArchitecture`
-  **(boolean)** - signify that a library supports, or not, the New Architecture. Skipping the field will result in "untested" status, unless automatic support detection returned a result. You can provide additional context with the `newArchitectureNote` field, if needed.
+  **(boolean|'new-arch-only')** - signify that a library supports both, or not, the New Architecture and the Old Architecture or only the New Architecture. Skipping the field will result in "untested" status, unless automatic support detection returned a result. You can provide additional context with the `newArchitectureNote` field, if needed.
 
 > [!TIP]
 > Set `newArchitecture` field only when automatic architecture detection fails for your package, despite it supports the New Architecture.

components/Library/NewArchitectureTag.tsx

@@ -22,7 +22,7 @@ export function NewArchitectureTag({ library }: Props) {
   const icon =
     status === NewArchSupportStatus.Unsupported ? (
       <XIcon fill={getIconColor(status, isDark)} width={11} height={11} />
-    ) : status === NewArchSupportStatus.Supported ? (
+    ) : status === NewArchSupportStatus.Supported || status === NewArchSupportStatus.NewArchOnly ? (
       <Check fill={getIconColor(status, isDark)} width={12} height={12} />
     ) : (
       <Question fill={getIconColor(status, isDark)} width={11} height={11} />
@@ -53,10 +53,19 @@ export function NewArchitectureTag({ library }: Props) {
             <HtmlElements.A
               href="https://reactnative.dev/docs/new-architecture-intro"
               target="_blank">
-              <Tag label="New Architecture" icon={icon} tagStyle={getTagColor(status, isDark)} />
+              <Tag
+                label={
+                  status === NewArchSupportStatus.NewArchOnly
+                    ? 'New Architecture Only'
+                    : 'New Architecture'
+                }
+                icon={icon}
+                tagStyle={getTagColor(status, isDark)}
+              />
             </HtmlElements.A>
           </View>
         }>
+        {status === NewArchSupportStatus.NewArchOnly && 'Only Supports New Architecture'}
         {status === NewArchSupportStatus.Supported && 'Supports New Architecture'}
         {status === NewArchSupportStatus.Unsupported && 'Does not support New Architecture'}
         {status === NewArchSupportStatus.Untested && 'Untested with New Architecture'}
@@ -71,6 +80,7 @@ export function NewArchitectureTag({ library }: Props) {
 
 function getIconColor(status: NewArchSupportStatus, isDark: boolean) {
   switch (status) {
+    case NewArchSupportStatus.NewArchOnly:
     case NewArchSupportStatus.Supported:
       return colors.primaryDark;
     case NewArchSupportStatus.Unsupported:
@@ -82,6 +92,7 @@ function getIconColor(status: NewArchSupportStatus, isDark: boolean) {
 
 function getTagColor(status: NewArchSupportStatus, isDark: boolean) {
   switch (status) {
+    case NewArchSupportStatus.NewArchOnly:
     case NewArchSupportStatus.Supported:
       return {
         backgroundColor: isDark ? '#142733' : '#edf6fc',

util/newArchStatus.ts

@@ -1,6 +1,7 @@
 import { Library } from '~/types';
 
 export enum NewArchSupportStatus {
+  NewArchOnly = 'new-arch-only',
   Supported = 'supported',
   Unsupported = 'unsupported',
   Untested = 'untested',
@@ -23,6 +24,8 @@ export function getNewArchSupportStatus({ newArchitecture, github, expoGo }: Lib
   }
 
   switch (flag) {
+    case 'new-arch-only':
+      return NewArchSupportStatus.NewArchOnly;
     case true:
       return NewArchSupportStatus.Supported;
     case false:

util/search.ts

@@ -182,14 +182,22 @@ export function handleFilterLibraries({
 
     if (
       newArchitecture === 'false' &&
-      [NewArchSupportStatus.Supported, NewArchSupportStatus.Untested].includes(newArchStatus)
+      [
+        NewArchSupportStatus.NewArchOnly,
+        NewArchSupportStatus.Supported,
+        NewArchSupportStatus.Untested,
+      ].includes(newArchStatus)
     ) {
       return false;
     }
 
     if (
       newArchitecture === 'untested' &&
-      [NewArchSupportStatus.Supported, NewArchSupportStatus.Unsupported].includes(newArchStatus)
+      [
+        NewArchSupportStatus.NewArchOnly,
+        NewArchSupportStatus.Supported,
+        NewArchSupportStatus.Unsupported,
+      ].includes(newArchStatus)
     ) {
       return false;
     }