tessl/npm-tamagui--core

Universal style library for React and React Native with cross-platform support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@tamagui/core

Name: tessl/npm-tamagui--core
Author: tessl

@tamagui/core is a universal style library that serves as the foundational layer of the Tamagui ecosystem, providing cross-platform styling capabilities for React and React Native applications. It extends @tamagui/web with React Native-specific optimizations, enabling developers to write shared styling logic that works seamlessly across web and native platforms.

Package Information

Package Name: @tamagui/core
Package Type: npm
Language: TypeScript
Installation: npm install @tamagui/core

Core Imports

import { 
  TamaguiProvider, 
  createTamagui, 
  styled, 
  View, 
  Stack, 
  Text,
  useTheme,
  useMedia
} from "@tamagui/core";

For CommonJS:

const { 
  TamaguiProvider, 
  createTamagui, 
  styled, 
  View, 
  Stack, 
  Text 
} = require("@tamagui/core");

Basic Usage

import { TamaguiProvider, createTamagui, styled, View, Text } from "@tamagui/core";

// 1. Configure Tamagui with tokens and themes
const config = createTamagui({
  tokens: {
    color: {
      blue: '#0066ff',
      white: '#ffffff',
    },
    space: {
      1: 4,
      2: 8,
      3: 16,
    },
  },
  themes: {
    light: {
      bg: '$white',
      color: '$blue',
    },
  },
  media: {
    sm: { maxWidth: 860 },
    lg: { minWidth: 980 },
  },
});

// 2. Create styled components
const Container = styled(View, {
  backgroundColor: '$bg',
  padding: '$3',
  
  variants: {
    centered: {
      true: {
        alignItems: 'center',
        justifyContent: 'center',
      }
    }
  }
});

const Title = styled(Text, {
  fontSize: 24,
  color: '$color',
  fontWeight: 'bold',
});

// 3. Use in your app
function App() {
  return (
    <TamaguiProvider config={config}>
      <Container centered>
        <Title>Hello Tamagui!</Title>
      </Container>
    </TamaguiProvider>
  );
}

Architecture

@tamagui/core is built around several key systems:

Universal Components: View, Stack, and Text components that work identically on web and React Native
Styling Engine: styled() function for creating components with design tokens, variants, and responsive styles
Configuration System: createTamagui() and TamaguiProvider for setting up design tokens, themes, and media queries
Cross-Platform Optimizations: Atomic CSS generation for web, optimized native views for React Native
Type Safety: Full TypeScript support with type inference for themes, tokens, and component props
React Native Enhancements: Layout measurement, pressability handling, and platform-specific optimizations

Capabilities

Component Creation & Styling

Core component creation and styling capabilities for building reusable UI components with design tokens and variants.

function styled<T extends React.ComponentType<any>>(
  component: T,
  config: StyledOptions
): TamaguiComponent;

interface StyledOptions {
  name?: string;
  variants?: VariantsConfig;
  defaultVariants?: DefaultVariants;
  [key: string]: any; // style properties
}

Component Creation

Configuration & Setup

Configuration system for setting up design tokens, themes, media queries, and the Tamagui provider context.

function createTamagui(config: TamaguiConfig): TamaguiInternalConfig;

interface TamaguiConfig {
  tokens?: Tokens;
  themes?: Record<string, Theme>;
  media?: MediaConfig;
  fonts?: FontConfig;
  animations?: AnimationConfig;
  shorthands?: ShorhandConfig;
  settings?: Settings;
}

declare const TamaguiProvider: React.FC<TamaguiProviderProps>;

interface TamaguiProviderProps {
  config: TamaguiInternalConfig;
  disableInjectCSS?: boolean;
  children?: React.ReactNode;
}

Configuration & Setup

Styling & Theming

Comprehensive theming system with design tokens, responsive styles, and media queries for consistent cross-platform styling.

function useTheme(name?: string): Theme;
function useMedia(): MediaState;

function getToken(path: string): any;
function getTokens(): TokensParsed;

interface Theme {
  [key: string]: string | Variable;
}

interface MediaState {
  [key: string]: boolean;
}

Styling & Theming

React Native Features

React Native-specific enhancements including layout measurement, pressability handling, and platform optimizations.

function useElementLayout(): LayoutState;
function setOnLayoutStrategy(strategy: LayoutStrategy): void;

interface LayoutEvent {
  nativeEvent: {
    layout: {
      x: number;
      y: number;
      width: number;
      height: number;
    };
  };
}

type LayoutStrategy = 'native' | 'web';

React Native Features

Utility Functions

Helper functions for style processing, event handling, and platform detection.

function composeEventHandlers<T extends Function>(
  original?: T,
  next?: T
): T;

function getSplitStyles<T>(
  props: T,
  staticConfig: StaticConfig,
  theme: Theme,
  state: ComponentState,
  options?: GetStylesOptions
): SplitStyles;

// Platform detection constants
declare const isWeb: boolean;
declare const isServer: boolean;
declare const isClient: boolean;
declare const isAndroid: boolean;
declare const isIos: boolean;
declare const isTouchable: boolean;

Utility Functions

Core Components

View Component

Universal view component with full React Native prop support and cross-platform styling.

declare const View: TamaguiComponent<
  TamaDefer,
  TamaguiElement,
  RNTamaguiViewNonStyleProps,
  StackStyleBase,
  {}
>;

interface RNTamaguiViewNonStyleProps extends StackNonStyleProps, RNViewProps {}

Stack Component

Flexbox container component (alias for View) with column flex direction by default.

declare const Stack: TamaguiComponent<
  TamaDefer,
  TamaguiElement,
  RNTamaguiViewNonStyleProps,
  StackStyleBase,
  {}
>;

Text Component

Universal text component with React Native text props and typography variants.

declare const Text: TamaguiComponent<
  TamaDefer,
  TamaguiTextElement,
  RNTamaguiTextNonStyleProps,
  TextStylePropsBase,
  {}
>;

interface RNTamaguiTextNonStyleProps extends TextNonStyleProps, RNTextProps {}

Core Types

interface TamaguiComponent<
  A = TamaDefer,
  B = TamaguiElement,
  C = {},
  D = {},
  E = {}
> extends React.ForwardRefExoticComponent<any> {
  staticConfig: StaticConfig;
}

interface StaticConfig {
  componentName?: string;
  variants?: any;
  defaultVariants?: any;
  accept?: any;
  isText?: boolean;
  isZStack?: boolean;
  validStyles?: any;
}

interface StackStyleBase {
  [key: string]: any;
}

interface TextStylePropsBase {
  [key: string]: any;
}

type TamaDefer = {};
type TamaguiElement = HTMLElement | React.ComponentType<any>;
type TamaguiTextElement = HTMLElement | React.ComponentType<any>;