Stack & Text
The base views of @tamagui/core.
Stack and Text are functionally equivalent to React Native View
and Text
, they just accept the superset of props that Tamagui supports.
Props
See the Props docs for the full list of properties.
Usage
You can use them directly:
import { Stack, Text } from 'tamagui' // or '@tamagui/core'export default () => (<Stack margin={10}><Text color="$color">Hello</Text></Stack>)
Or use them with styled to create your own base level design system:
import { Stack, styled } from 'tamagui' // or '@tamagui/core'export const Circle = styled(Stack, {borderRadius: 100_000_000,variants: {pin: {top: {position: 'absolute',top: 0,},},centered: {true: {alignItems: 'center',justifyContent: 'center',},},size: {'...size': (size, { tokens }) => {return {width: tokens.size[size] ?? size,height: tokens.size[size] ?? size,}},},} as const,})
Inline styles and styled()
both are optimized by the compiler, so you can author styles using them both depending on the use case.
Only for web
When set a defaultFont
is defined int your Tamagusi.config.ts` and its set to be one of key values found inthe correct part of the design system, you basically d