pa-react-themes/components/Text.jsx

React Native Themes

import { useEffect, useState } from "react"
import { Text as RNComponent } from "react-native"
import { getThemeTailwind } from "../helpers/theme.js"
import { DeviceMode, Mode } from "../helpers/deviceMode.js"
import { useColorScheme } from "react-native";
import { useThemeStore } from '../store/themeStore.js';

const COMPONENT_NAME = 'Text'

export default function Text({children, type, tailwind, h1, h2, h3, p, sm, xs, ...restOfProps}) {
    
    
    //const theme = ThemeData()   
    const theme = useThemeStore((state) => state.themeData)

    //console.log(theme)
    let typeFinal = getThemeTailwind(theme, COMPONENT_NAME, type)
    //console.log("FINAL:", typeFinal) 

    //${getThemeTailwind(theme, COMPONENT_NAME, 'default')}

    //${!(h1 || h2 || h3 || p || sm || xs) && getThemeTailwind(theme, COMPONENT_NAME, 'p')}    
    /*
    ${h1 && getThemeTailwind(theme, COMPONENT_NAME, 'h1')}
                ${h2 && getThemeTailwind(theme, COMPONENT_NAME, 'h2')}
                ${h3 && getThemeTailwind(theme, COMPONENT_NAME, 'h3')}
                ${p  && getThemeTailwind(theme, COMPONENT_NAME, 'p' )}
                ${sm && getThemeTailwind(theme, COMPONENT_NAME, 'sm')}
                ${xs && getThemeTailwind(theme, COMPONENT_NAME, 'xs')}
    */
    return (
        <RNComponent {...restOfProps}
            className={`
                

                ${typeFinal && typeFinal}
                
                

                ${tailwind && tailwind}
                `}
        >
            {children}
        </RNComponent>
    )
}