native-matenative-mate

useTheme

Access the full resolved theme — colours, spacing, radius, typography, and animation — from any component inside ThemeProvider.

Usage

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useTheme } from '@native-mate/core'

function PriceTag({ amount }: { amount: number }) {
  const theme = useTheme()

  return (
    <View
      style={{
        backgroundColor: theme.colors.success,
        borderRadius: theme.radius.sm,
        paddingHorizontal: theme.spacing.sm,
        paddingVertical: theme.spacing.xs,
      }}
    >
      <Text
        style={{
          color: theme.colors.successForeground,
          fontSize: theme.typography.size.sm,
          fontWeight: theme.typography.weight.semibold,
        }}
      >
        ${amount.toFixed(2)}
      </Text>
    </View>
  )
}

Return type

ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface ResolvedTheme {
  colors: Record<string, string>   // all color tokens, resolved to hex
  spacing: Record<string, number>
  radius: Record<string, number>
  typography: {
    size: Record<string, number>
    weight: Record<string, string>
    lineHeight: Record<string, number>
  }
  animation: {
    speed: { fast: number; normal: number; slow: number }
    easing: { standard: number[]; decelerate: number[]; spring: SpringConfig }
  }
  colorScheme: 'light' | 'dark'
}

Rules

  • Must be called inside a component wrapped by ThemeProvider
  • Re-renders when theme changes (dark/light or preset change)
  • For styles, prefer makeStyles — it memoises the StyleSheet
  • Use useTheme directly when you need a value conditionally (e.g. an animation colour)