native-matenative-mate

makeStyles

The canonical way to define themed styles. Called at module level, returns a hook that calls StyleSheet.create() once per theme change.

Signature

ts
1
2
3
function makeStyles<T extends StyleSheet.NamedStyles<T>>(
  factory: (theme: ResolvedTheme) => T
): () => T

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
27
28
29
30
31
32
33
import { makeStyles, useTheme } from '@native-mate/core'

// 1. Call at module level
const useStyles = makeStyles((theme) => ({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
    padding: theme.spacing.lg,
  },
  title: {
    fontSize: theme.typography.size.xl,
    fontWeight: theme.typography.weight.bold,
    color: theme.colors.foreground,
    lineHeight: theme.typography.lineHeight.normal,
  },
  badge: {
    backgroundColor: theme.colors.primary,
    borderRadius: theme.radius.full,
    paddingHorizontal: theme.spacing.sm,
    paddingVertical: theme.spacing.xs,
  },
}))

// 2. Call the hook inside the component
function MyScreen() {
  const styles = useStyles() // memoised — only recreated when theme changes

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello</Text>
    </View>
  )
}

Why not inline StyleSheet.create?

StyleSheet.create() called inside a component re-runs on every render. makeStyles wraps it in useMemo, so the style object is only recreated when the resolved theme actually changes (dark/light switch or preset change).

It also keeps all style definitions co-located with the component in a readable factory pattern, with full type inference from token keys.

Accessing theme alongside styles

tsx
1
2
3
4
5
6
7
8
9
10
function MyComponent() {
  const styles = useStyles()
  const theme = useTheme() // if you need theme values directly

  return (
    <View style={[styles.container, { borderColor: theme.colors.border }]}>
      ...
    </View>
  )
}