React Native Mantine › Theming

Responsive Utilities

Breakpoint utilities: largerThan and smallerThan

Import: import { Responsive Utilities } from 'react-native-mantine';

Usage

import { useTheme } from 'react-native-mantine';
import { StyleSheet } from 'react-native';

function MyComponent() {
  const theme = useTheme();

  const styles = StyleSheet.create({
    container: {
      padding: theme.spacing.sm,
      // On medium and larger screens, use more padding
      [theme.fn.largerThan('md')]: {
        padding: theme.spacing.lg,
      },
      // On large and larger screens, even more padding
      [theme.fn.largerThan('lg')]: {
        padding: theme.spacing.xl,
      },
    },
    mobileOnly: {
      display: 'flex',
      // Hide on medium screens and above
      [theme.fn.largerThan('md')]: {
        display: 'none',
      },
    },
    desktopOnly: {
      display: 'none',
      // Show on medium screens and above
      [theme.fn.largerThan('md')]: {
        display: 'flex',
      },
    },
  });

  return <View style={styles.container}>...</View>;
}

// Breakpoints: xs (0), sm (576), md (768),
//              lg (992), xl (1200)

Source on GitHub · npm