native-matenative-mate

useBreakpoint

Returns the current responsive breakpoint based on screen width. Useful for adapting layouts on tablets and larger screens.

Breakpoints

BreakpointMin widthTypical device
"sm"0pxPhone (default)
"md"768pxLarge phone / small tablet
"lg"1024pxTablet / iPad Pro

Usage

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useBreakpoint } from '@native-mate/core'

function ProductGrid() {
  const bp = useBreakpoint()

  const columns = bp === 'lg' ? 4 : bp === 'md' ? 3 : 2

  return (
    <FlatList
      numColumns={columns}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <ProductCard item={item} />}
    />
  )
}

Conditional styles

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ResponsiveContainer({ children }) {
  const bp = useBreakpoint()
  const isTablet = bp !== 'sm'

  return (
    <View style={{
      maxWidth: isTablet ? 600 : undefined,
      alignSelf: isTablet ? 'center' : 'stretch',
      padding: isTablet ? 24 : 16,
    }}>
      {children}
    </View>
  )
}