Dripsy Documentation

Dripsy provides unstyled, responsive UI primitives designed for universal applications running on React Native and Web. It allows you to define themed, responsive designs using a single sx prop, which is memoized under the hood for performance. It is compatible with Expo, Vanilla React Native, and Next.js.

<View sx={{ bg: '$primary', height: [100, 200] }} />

Dripsy provides unstyled, responsive UI primitives for universal React applications. Key features include:

• Responsive Styles: Use arrays or objects in the sx prop.
• Universal Support: Works on Android, iOS, Web, and more.
• Ecosystem Compatibility: Works with Expo, Vanilla React Native, Next.js, Animated, Reanimated, Moti, and @expo/vector-icons.
• Theming: Full theme support including custom theme variants and dark mode / custom color modes.
• Performance: sx prop is memoized; uses Atomic CSS classes with StyleSheet.create under the hood.
• Advanced Styling: Support for Linear Gradient and custom fonts.

Dripsy is designed for high-performance, universal styling with the following capabilities:

• Universal Support: Works with Expo, Vanilla React Native, and Next.js.
• Responsive Design: Supports responsive styles (e.g., using arrays for different breakpoints).
• Theming: Full theme support including custom theme variants and global font editing.
• Performance: The sx prop is memoized automatically, even when written inline. It uses atomic CSS classes on the web while using StyleSheet.create under the hood.
• Color Modes: Built-in support for dark mode and custom color modes.
• Compatibility: Works with Animated, Reanimated, Moti, @expo/vector-icons, and Linear Gradient.

Instead of enforcing strict types globally, you can apply them to specific scales (like space, colors, etc.) by passing an object to onlyAllowThemeValues.

To get the best experience with strict types, it is recommended to use a dictionary with $ prefixes for your scales instead of arrays. This allows TypeScript to provide precise errors and makes refactoring theme structures much easier.

Example of a scale-specific strict configuration:

// ✅ Valid: uses theme key
<View sx={{ padding: '$1' }} />

// ❌ Invalid: uses raw value
<View sx={{ padding: 10  }} />

const theme = makeTheme({
  space: {
    $0: 0,
    $1: 4,
    $2: 8,
    $3: 16,
    $4: 32,
    $5: 64,
    $6: 128,
    $7: 256,
    $8: 512,
  },
  types: {
    onlyAllowThemeValues: {
      space: 'always',
    },
  },
})

You can create semantic aliases for font weights using the fontWeights key in your theme. This allows you to use names like black instead of numeric strings like '900'. The value of the alias must correspond to a weight defined in your customFonts configuration.

Once aliased, you can use these names in the sx prop of components or within theme.text variants.

Unlike Theme UI, Dripsy does not use a colors.modes object within a single theme. Instead, Dripsy uses a React-based approach where you switch the entire theme object passed to the DripsyProvider based on the current color scheme.

To implement this, you should:

1. Create a base theme using makeTheme to define your primary color schema.
2. Create additional theme objects (e.g., themeLight) that match the shape of your base theme.
3. Use a hook like useColorScheme from react-native (or a custom context for user-defined preferences) to detect the mode.
4. Pass the appropriate theme to DripsyProvider based on that detection.

const colorMode = useColorScheme()

return (
  <DripsyProvider theme={colorMode === 'dark' ? theme : themeLight}>
    <App />
  </DripsyProvider>
)

Under strict variant mode (the default):

1. Components with a themeKey: A component is restricted to variants defined under its specific theme key. For example, a <Text /> component can only use variants found in theme.text. Using any other variant will result in a TypeScript error.
2. Components without a themeKey: Components like View that do not have a defined themeKey are permitted to use any nested variant from anywhere in your theme.

Dripsy components support a variant prop to apply a single style preset from your theme. Unlike Theme UI, Dripsy also supports the variants prop, which accepts an array of strings to apply multiple ordered variants to a single component.

• variant: Applies a single variant from the component's associated themeKey.
• variants: Applies multiple variants in the order they appear in the array.

To implement responsive design without manual Dimensions listeners or useState hooks, use an array in the sx prop. Each element in the array applies to a specific breakpoint.

For example, to change a View width from 100% on mobile to 50% on larger screens:

import { View } from 'dripsy'

const ResponsiveBox = () => {
  return <View sx={{ width: ['100%', '50%'] }} />
}