import React, { forwardRef, memo } from 'react'; import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; import { headingStyle } from './styles'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; import { cssInterop } from 'nativewind'; type IHeadingProps = VariantProps & React.ComponentPropsWithoutRef & { as?: React.ElementType; }; cssInterop(H1, { className: 'style' }); cssInterop(H2, { className: 'style' }); cssInterop(H3, { className: 'style' }); cssInterop(H4, { className: 'style' }); cssInterop(H5, { className: 'style' }); cssInterop(H6, { className: 'style' }); const MappedHeading = memo( forwardRef, IHeadingProps>( ( { size, className, isTruncated, bold, underline, strikeThrough, sub, italic, highlight, ...props }, ref ) => { switch (size) { case '5xl': case '4xl': case '3xl': return (

); case '2xl': return (

); case 'xl': return (

); case 'lg': return (

); case 'md': return (

); case 'sm': case 'xs': return (
); default: return (

); } } ) ); const Heading = memo( forwardRef, IHeadingProps>( ({ className, size = 'lg', as: AsComp, ...props }, ref) => { const { isTruncated, bold, underline, strikeThrough, sub, italic, highlight, } = props; if (AsComp) { return ( ); } return ( ); } ) ); Heading.displayName = 'Heading'; export { Heading };