react-native-community · Simek · Jan 21, 2026 · Jan 21, 2026
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -17,6 +17,9 @@
     "README.md",
     "next-env.d.ts"
   ],
+  "experimentalTailwindcss": {
+    "functions": ["tw"]
+  },
   "experimentalSortImports": {
     "groups": [
       ["side-effect"],

diff --git a/bun.lock b/bun.lock
diff --git a/common/styleguide.tsx b/common/styleguide.tsx
@@ -56,7 +56,7 @@ export function createTextComponent(
         id={id}
         numberOfLines={numberOfLines}
         style={[
-          tw`font-sans font-normal my-0 text-black dark:text-white`,
+          tw`font-sans my-0 font-normal text-black dark:text-white`,
           elementStyle as StyleProp<Style>,
           textStyle,
           style,

diff --git a/components/Button.tsx b/components/Button.tsx
@@ -24,7 +24,7 @@ export function Button({
 }: Props) {
   const isLink = !!href;
   const buttonStyle = [
-    tw`justify-center items-center rounded outline-offset-1 cursor-pointer select-none bg-primary-darker dark:bg-primary-dark`,
+    tw`cursor-pointer select-none items-center justify-center rounded bg-primary-darker outline-offset-1 dark:bg-primary-dark`,
     style,
   ] as ViewStyle[];
 
@@ -39,7 +39,7 @@ export function Button({
         <A
           href={href}
           role="button"
-          style={[tw`rounded font-sans no-underline`, containerStyle]}
+          style={[tw`font-sans rounded no-underline`, containerStyle]}
           {...(openInNewTab ? { target: '_blank' } : {})}
           {...(href?.startsWith('#') ? { target: '_self' } : {})}
           {...rest}>

diff --git a/components/CheckBox.tsx b/components/CheckBox.tsx
@@ -13,7 +13,7 @@ export default function CheckBox({ style, value }: Props) {
   return (
     <View
       style={[
-        tw`size-[18px] items-center justify-center border-2 rounded-sm mr-2`,
+        tw`mr-2 size-[18px] items-center justify-center rounded-sm border-2`,
         value
           ? tw`border-primary-dark bg-primary-dark`
           : tw`border-palette-gray4 bg-white dark:border-default dark:bg-dark`,

diff --git a/components/CompatibilityTags.tsx b/components/CompatibilityTags.tsx
@@ -29,14 +29,14 @@ export default function CompatibilityTags({ library }: Props) {
       {library.dev ? (
         <Tag
           label="Development Tool"
-          tagStyle={tw`bg-[#ece3fc] border-[#d9c8fa] dark:bg-[#261a3d] dark:border-[#3d2861]`}
+          tagStyle={tw`border-[#d9c8fa] bg-[#ece3fc] dark:border-[#3d2861] dark:bg-[#261a3d]`}
           icon={null}
         />
       ) : null}
       {library.template ? (
         <Tag
           label="Template"
-          tagStyle={tw`bg-[#fce1f5] border-[#f5c6e8] dark:bg-[#37172e] dark:border-[#52213e]`}
+          tagStyle={tw`border-[#f5c6e8] bg-[#fce1f5] dark:border-[#52213e] dark:bg-[#37172e]`}
           icon={null}
         />
       ) : null}
@@ -46,7 +46,7 @@ export default function CompatibilityTags({ library }: Props) {
           <Tag
             label={platform}
             key={`${platform}-platform`}
-            tagStyle={tw`bg-palette-gray1 border-palette-gray2 dark:bg-dark dark:border-default`}
+            tagStyle={tw`border-palette-gray2 bg-palette-gray1 dark:border-default dark:bg-dark`}
           />
         ) : null
       )}
@@ -55,7 +55,7 @@ export default function CompatibilityTags({ library }: Props) {
           side="bottom"
           trigger={
             <View
-              style={tw`items-center justify-center cursor-pointer rounded-full`}
+              style={tw`cursor-pointer items-center justify-center rounded-full`}
               role="button"
               aria-label="Additional information">
               <Info style={tw`text-icon`} />
@@ -74,7 +74,7 @@ export default function CompatibilityTags({ library }: Props) {
                 <br />
                 <A
                   href={`https://www.npmjs.com/package/${library.vegaos}`}
-                  style={tw`text-xs text-white font-light`}>
+                  style={tw`text-xs font-light text-white`}>
                   (via dedicated support package)
                 </A>
               </li>

diff --git a/components/ContentContainer.tsx b/components/ContentContainer.tsx
@@ -4,5 +4,5 @@ import { View, type ViewProps } from 'react-native';
 import tw from '~/util/tailwind';
 
 export default function ContentContainer({ children, style }: PropsWithChildren<ViewProps>) {
-  return <View style={[tw`w-full mx-auto max-w-layout flex-1`, style]}>{children}</View>;
+  return <View style={[tw`mx-auto w-full max-w-layout flex-1`, style]}>{children}</View>;
 }
diff --git a/components/Explore/ExploreSection.tsx b/components/Explore/ExploreSection.tsx
@@ -41,20 +41,20 @@ export default function ExploreSection({
 
   return (
     <>
-      <H3 style={tw`flex gap-3 pt-3 pb-2 px-2 items-center`} id={hashLink}>
-        {icon && createElement(icon, { style: tw`size-7.5 text-icon mt-px` })}
+      <H3 style={tw`flex items-center gap-3 px-2 pb-2 pt-3`} id={hashLink}>
+        {icon && createElement(icon, { style: tw`size-7.5 mt-px text-icon` })}
         <A
           href={`#${hashLink}`}
           target="_self"
-          style={tw`no-underline text-icon`}
+          style={tw`text-icon no-underline`}
           hoverStyle={tw`text-palette-gray4 dark:text-palette-gray5`}>
           {title}
         </A>
       </H3>
-      <View style={tw`pt-3 flex-1 flex-row flex-wrap`}>
+      <View style={tw`flex-1 flex-row flex-wrap pt-3`}>
         {renderLibs(data.filter(filter), count)}
       </View>
-      <P style={tw`px-6 pt-2 pb-6 text-sm font-light text-secondary`}>
+      <P style={tw`px-6 pb-6 pt-2 text-sm font-light text-secondary`}>
         Want to see more? Check out other{' '}
         <A href={urlWithQuery('/packages', { ...queryParams, ...DEFAULT_PARAMS })} target="_self">
           {title} libraries

diff --git a/components/Filters/FilterButton.tsx b/components/Filters/FilterButton.tsx
@@ -46,7 +46,7 @@ export function FilterButton({ isFilterVisible, query, onPress, onClearAllPress,
         onPress={onPress}
         containerStyle={tw`h-full flex-grow`}
         style={[
-          tw`h-full px-2 bg-accented`,
+          tw`h-full bg-accented px-2`,
           isFilterVisible && tw`bg-primary-dark`,
           isFilterCount && tw`rounded-r-none`,
         ]}>
@@ -58,14 +58,14 @@ export function FilterButton({ isFilterVisible, query, onPress, onClearAllPress,
               height={12}
             />
           </View>
-          <P style={tw`text-sm ml-1.5 text-white select-none`}>
+          <P style={tw`ml-1.5 select-none text-sm text-white`}>
             Filters{isFilterCount ? `: ${filterCount}` : ''}
           </P>
         </View>
       </Button>
       {filterCount > 0 && (
         <View
-          style={tw`h-full justify-center items-center rounded-r border-l border-palette-gray6 bg-accented dark:border-dark`}>
+          style={tw`h-full items-center justify-center rounded-r border-l border-palette-gray6 bg-accented dark:border-dark`}>
           <ClearButton onPress={onClearAllPress} />
         </View>
       )}

diff --git a/components/Filters/FiltersSection.tsx b/components/Filters/FiltersSection.tsx
@@ -13,7 +13,7 @@ export default function FiltersSection({ title, children, rightSlot }: Props) {
   const { isSmallScreen } = useLayout();
 
   return (
-    <View style={[tw`px-4 py-2 max-w-layout`, isSmallScreen && tw`max-w-full`]}>
+    <View style={[tw`max-w-layout px-4 py-2`, isSmallScreen && tw`max-w-full`]}>
       <Headline style={[tw`mb-2 font-semibold text-secondary`, rightSlot && tw`mb-1`]}>
         {title}
         {rightSlot}

diff --git a/components/Filters/ToggleLink.tsx b/components/Filters/ToggleLink.tsx
@@ -25,9 +25,9 @@ export function ToggleLink({ query, filterParam, basePath = '/packages' }: Props
         [filterParam.param]: !isSelected,
         offset: null,
       })}
-      style={tw`no-underline mr-4 my-1`}>
+      style={tw`my-1 mr-4 no-underline`}>
       <View
-        style={tw`cursor-pointer items-center flex-row`}
+        style={tw`cursor-pointer flex-row items-center`}
         onPointerEnter={() => setHovered(true)}
         onPointerLeave={() => setHovered(false)}>
         <CheckBox value={isSelected} style={isHovered && tw`border-primary-dark`} />

diff --git a/components/Filters/index.tsx b/components/Filters/index.tsx
@@ -27,8 +27,8 @@ export function Filters({ query, style, basePath = '/packages' }: FiltersProps)
   const isMainSearch = basePath === '/packages';
 
   return (
-    <View style={[tw`py-2 flex-1 items-center bg-palette-gray1 dark:bg-very-dark`, style]}>
-      <View style={tw`w-full max-w-layout content-start flex-row flex-wrap`}>
+    <View style={[tw`flex-1 items-center bg-palette-gray1 py-2 dark:bg-very-dark`, style]}>
+      <View style={tw`w-full max-w-layout flex-row flex-wrap content-start`}>
         <FiltersSection title="Platform">
           {FILTER_PLATFORMS.map(platform => (
             <ToggleLink
@@ -69,7 +69,7 @@ export function Filters({ query, style, basePath = '/packages' }: FiltersProps)
           />
         ))}
       </FiltersSection>
-      <View style={tw`w-full max-w-layout content-start flex-row flex-wrap`}>
+      <View style={tw`w-full max-w-layout flex-row flex-wrap content-start`}>
         <FiltersSection title="Compatibility">
           {FILTER_COMPATIBILITY.map(compatibility => (
             <ToggleLink
@@ -85,7 +85,7 @@ export function Filters({ query, style, basePath = '/packages' }: FiltersProps)
           rightSlot={
             <Tag
               label="Experimental"
-              tagStyle={tw`ml-2 -top-px py-0 min-h-5.5 bg-[#ece3fc] border-[#d9c8fa] dark:bg-[#261a3d] dark:border-[#3d2861]`}
+              tagStyle={tw`min-h-5.5 -top-px ml-2 border-[#d9c8fa] bg-[#ece3fc] py-0 dark:border-[#3d2861] dark:bg-[#261a3d]`}
               icon={null}
             />
           }>

diff --git a/components/Footer/PlatformTile.tsx b/components/Footer/PlatformTile.tsx
@@ -15,12 +15,12 @@ type Props = {
 export default function Platform({ name, pkgName, url, Icon }: Props) {
   return (
     <A href={url} hoverStyle={tw`rounded-lg bg-palette-gray2 dark:bg-default`}>
-      <View style={tw`min-w-[160px] px-2 py-4 rounded-lg items-center`}>
+      <View style={tw`min-w-[160px] items-center rounded-lg px-2 py-4`}>
         {createElement(Icon, {
           style: tw`size-8 text-icon`,
         })}
         <P style={tw`mt-3`}>{name}</P>
-        <P style={tw`text-xs font-mono rounded-sm px-2 leading-loose`}>{pkgName}</P>
+        <P style={tw`font-mono rounded-sm px-2 text-xs leading-loose`}>{pkgName}</P>
       </View>
     </A>
   );

diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
@@ -21,9 +21,9 @@ export default function Footer() {
   const { isSmallScreen } = useLayout();
 
   return (
-    <View style={tw`w-full pt-8 pb-7 mt-1 bg-palette-gray1 dark:bg-dark`}>
+    <View style={tw`mt-1 w-full bg-palette-gray1 pb-7 pt-8 dark:bg-dark`}>
       <ContentContainer>
-        <View style={tw`flex-row mt-1 justify-center flex-wrap gap-3.5 mb-7 max-w-footer mx-auto`}>
+        <View style={tw`mx-auto mb-7 mt-1 max-w-footer flex-row flex-wrap justify-center gap-3.5`}>
           <PlatformTile
             name="Android"
             pkgName="react-native"
@@ -67,8 +67,8 @@ export default function Footer() {
             url="https://github.com/microsoft/react-native-windows#readme"
           />
         </View>
-        <View style={[tw`flex-row px-4 mt-3`, isSmallScreen && tw`flex-col`]}>
-          <View style={[tw`flex-col flex-1`, isSmallScreen && tw`items-center`]}>
+        <View style={[tw`mt-3 flex-row px-4`, isSmallScreen && tw`flex-col`]}>
+          <View style={[tw`flex-1 flex-col`, isSmallScreen && tw`items-center`]}>
             <P style={tw`py-1.5 text-[13px] font-light text-secondary`}>
               Missing a library?{' '}
               <A href="https://github.com/react-native-community/react-native-directory#how-do-i-add-a-library">
@@ -86,7 +86,7 @@ export default function Footer() {
               and <A href="https://expo.dev">Expo</A>.
             </P>
           </View>
-          <View style={[tw`self-center`, isSmallScreen && tw`items-center mt-6`]}>
+          <View style={[tw`self-center`, isSmallScreen && tw`mt-6 items-center`]}>
             <A
               href="https://vercel.com/?utm_source=rndir&utm_campaign=oss"
               aria-label="Vercel banner"
@@ -95,7 +95,7 @@ export default function Footer() {
             </A>
           </View>
         </View>
-        <View style={tw`items-center pt-12 pb-8`}>
+        <View style={tw`items-center pb-8 pt-12`}>
           <Logo style={tw`text-palette-gray3 dark:text-powder`} width={42} height={38} />
         </View>
       </ContentContainer>

diff --git a/components/Home/HomeSection.tsx b/components/Home/HomeSection.tsx
@@ -26,18 +26,18 @@ export default function HomeSection({ data, title, Icon, count = 8, queryParams
 
   return (
     <>
-      <H4 style={tw`flex gap-2.5 pt-3 pb-2 px-2 items-center font-medium`} id={hashLink}>
-        {Icon && createElement(Icon, { style: tw`size-5 text-icon mt-px` })}
+      <H4 style={tw`flex items-center gap-2.5 px-2 pb-2 pt-3 font-medium`} id={hashLink}>
+        {Icon && createElement(Icon, { style: tw`mt-px size-5 text-icon` })}
         <A
           href={`#${hashLink}`}
           target="_self"
-          style={tw`no-underline text-icon`}
+          style={tw`text-icon no-underline`}
           hoverStyle={tw`text-palette-gray4 dark:text-palette-gray5`}>
           {title}
         </A>
       </H4>
-      <View style={tw`pt-3 flex-1 flex-row flex-wrap`}>{renderLibs(data, count)}</View>
-      <P style={tw`px-6 pt-2 pb-6 text-sm font-light text-secondary`}>
+      <View style={tw`flex-1 flex-row flex-wrap pt-3`}>{renderLibs(data, count)}</View>
+      <P style={tw`px-6 pb-6 pt-2 text-sm font-light text-secondary`}>
         Want to see more? Check out other{' '}
         <A href={urlWithQuery('/packages', { ...queryParams })} target="_self">
           {title.toLowerCase()} libraries

diff --git a/components/Home/PlatformRow.tsx b/components/Home/PlatformRow.tsx
@@ -16,12 +16,12 @@ export default function PlatformRow({ platform, count, Icon }: Props) {
   return (
     <A
       href={urlWithQuery('/packages', { [platform.toLowerCase()]: 'true' })}
-      style={tw`flex justify-between items-center`}>
-      <View style={tw`flex-row gap-2 items-center`}>
-        {Icon && createElement(Icon, { style: tw`size-4 text-icon mt-px` })}
+      style={tw`flex items-center justify-between`}>
+      <View style={tw`flex-row items-center gap-2`}>
+        {Icon && createElement(Icon, { style: tw`mt-px size-4 text-icon` })}
         <span>{platform}</span>
       </View>
-      <Label style={tw`text-secondary font-light`}>{count} packages</Label>
+      <Label style={tw`font-light text-secondary`}>{count} packages</Label>
     </A>
   );
 }
diff --git a/components/Library/LibraryDescription.tsx b/components/Library/LibraryDescription.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 export default function LibraryDescription({ github, maxLines }: Props) {
   return github.description && github.description.length > 0 ? (
-    <Headline numberOfLines={maxLines} style={tw`font-light text-base leading-snug`}>
+    <Headline numberOfLines={maxLines} style={tw`text-base font-light leading-snug`}>
       <Linkify
         options={{
           linkWrapper: ({ children, ...rest }) => <A {...rest}>{children}</A>,
@@ -21,7 +21,7 @@ export default function LibraryDescription({ github, maxLines }: Props) {
       </Linkify>
     </Headline>
   ) : (
-    <Caption style={tw`font-light text-base leading-snug text-palette-gray4 dark:text-secondary`}>
+    <Caption style={tw`text-base font-light leading-snug text-palette-gray4 dark:text-secondary`}>
       The package does not have a description defined.
     </Caption>
   );

diff --git a/components/Library/LoadingContent.tsx b/components/Library/LoadingContent.tsx
@@ -20,7 +20,7 @@ export default function LoadingContent({ width = '100%', height = 204, wrapperSt
       backgroundColor={tw.prefixMatch('dark') ? '#2a2e36' : '#f3f3f3'}
       foregroundColor={tw.prefixMatch('dark') ? '#383c42' : '#ecebeb'}
       style={{
-        ...tw`border border-solid rounded-md mb-4 box-border border-palette-gray2 dark:border-default`,
+        ...tw`mb-4 box-border rounded-md border border-solid border-palette-gray2 dark:border-default`,
         ...wrapperStyle,
       }}>
       <rect x="20" y="20" rx="3" ry="3" width="288" height="25" />

diff --git a/components/Library/MetaData.tsx b/components/Library/MetaData.tsx
@@ -279,7 +279,7 @@ export default function MetaData({ library, secondary, skipExamples = false }: P
                 // @ts-expect-error RNW complains about 'fit-content'
                 style={{
                   ...(i + 1 !== data.length ? tw`mb-2 min-h-[22px] overflow-hidden` : {}),
-                  ...tw`flex-row items-center mb-0 pr-[3px]`,
+                  ...tw`mb-0 flex-row items-center pr-[3px]`,
                   width: 'fit-content',
                 }}>
                 <View style={tw`mr-1 min-w-[22px] items-center`}>{icon}</View>

diff --git a/components/Library/NewArchitectureTag.tsx b/components/Library/NewArchitectureTag.tsx
@@ -18,15 +18,15 @@ export function NewArchitectureTag({ library }: Props) {
   const icon = getTagIcon(status);
 
   const newArchitectureNote = library.newArchitectureNote && library.newArchitectureNote && (
-    <Label style={tw`flex my-1 text-white`}>{library.newArchitectureNote}</Label>
+    <Label style={tw`my-1 flex text-white`}>{library.newArchitectureNote}</Label>
   );
 
   // Do not show alternatives in New Arch tag for unmaintained libraries since
   // we already show the alternatives in unmaintained label
   const alternatives = library.alternatives &&
     library.alternatives.length > 0 &&
     !library.unmaintained && (
-      <Label style={tw`flex my-1 text-white`}>
+      <Label style={tw`my-1 flex text-white`}>
         {' '}
         {pluralize('Alternative', library.alternatives.length)}
         {': '}
@@ -70,9 +70,9 @@ function getTagColor(status: NewArchSupportStatus) {
   switch (status) {
     case NewArchSupportStatus.NewArchOnly:
     case NewArchSupportStatus.Supported:
-      return tw`bg-[#edf6fc] border-[#d4ebfa] dark:bg-[#142733] dark:border-[#203b4d]`;
+      return tw`border-[#d4ebfa] bg-[#edf6fc] dark:border-[#203b4d] dark:bg-[#142733]`;
     case NewArchSupportStatus.Unsupported:
-      return tw`bg-[#fffae8] border-[#faebaf] dark:bg-[#292005] dark:border-[#3d3206]`;
+      return tw`border-[#faebaf] bg-[#fffae8] dark:border-[#3d3206] dark:bg-[#292005]`;
     default:
       return tw`border-dashed border-palette-gray2 dark:border-default`;
   }

diff --git a/components/Library/Thumbnail.tsx b/components/Library/Thumbnail.tsx
@@ -27,9 +27,9 @@ function Thumbnail({ url }: Props) {
       <HoverCard.Trigger asChild>
         <View
           tabIndex={0}
-          style={tw`mr-2.5 my-1 p-1.5 pb-0 min-h-7.5 box-border overflow-hidden text-center rounded border border-palette-gray2 dark:border-default`}>
+          style={tw`min-h-7.5 my-1 mr-2.5 box-border overflow-hidden rounded border border-palette-gray2 p-1.5 pb-0 text-center dark:border-default`}>
           {showPreview && !isLoaded ? (
-            <div style={tw`w-3.5 mx-px -mt-0.5`}>
+            <div style={tw`mx-px -mt-0.5 w-3.5`}>
               <ActivityIndicator size="small" color={tw`text-primary-dark`.color as ColorValue} />
             </div>
           ) : (
@@ -46,7 +46,7 @@ function Thumbnail({ url }: Props) {
         <HoverCard.Content sideOffset={6} sticky="always">
           <View
             style={[
-              tw`p-2.5 rounded-lg box-border hidden shadow-offset-0/0.5 shadow-radius-2 shadow-palette-gray3 bg-white dark:shadow-accented dark:bg-black`,
+              tw`shadow-offset-0/0.5 shadow-radius-2 box-border hidden rounded-lg bg-white p-2.5 shadow-palette-gray3 dark:bg-black dark:shadow-accented`,
               showPreview && isLoaded && tw`flex`,
               {
                 maxWidth: maxPreviewWidth,

diff --git a/components/Library/TrendingMark.tsx b/components/Library/TrendingMark.tsx
@@ -49,7 +49,7 @@ export default function TrendingMark({ library, style, markOnly = false }: Props
     <View style={[tw`mb-1`, style as ViewStyle]}>{content}</View>
   ) : (
     <HoverEffect>
-      <A href="/scoring" style={[tw`flex relative items-start no-underline`, style as Style]}>
+      <A href="/scoring" style={[tw`relative flex items-start no-underline`, style as Style]}>
         {content}
       </A>
     </HoverEffect>