Merge pull request #2111 from gluestack/fix/heading-nw

fix: heading component size issue in native devices

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+patches
 .pnp
 .pnp.js
 .env

example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx

@@ -1,45 +1,48 @@
 import React, { useCallback } from 'react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
-import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import { cssInterop } from 'nativewind';
 import { headingStyle } from './styles';
 
-cssInterop(H4, { className: 'style' });
-
 const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => {
   const MappedHeading = useCallback(
     () => {
       switch (size) {
         case '5xl':
         case '4xl':
         case '3xl':
+          cssInterop(H1, { className: 'style' });
           return (
             <H1
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case '2xl':
+          cssInterop(H2, { className: 'style' });
           return (
             <H2
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case 'xl':
+          cssInterop(H3, { className: 'style' });
           return (
             <H3
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case 'lg':
+          cssInterop(H4, { className: 'style' });
           return (
             <H4
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case 'md':
+          cssInterop(H5, { className: 'style' });
           return (
             <H5
               className={headingStyle({ size, class: className })}
@@ -48,13 +51,15 @@ const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => {
           );
         case 'sm':
         case 'xs':
+          cssInterop(H6, { className: 'style' });
           return (
             <H6
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         default:
+          cssInterop(H4, { className: 'style' });
           return (
             <H4
               className={headingStyle({ size, class: className })}