Using Dripsy

Dripsy is an almost-drop-in replacement for React Native's UI components.

Change your imports from react-native to dripsy.

Before

import { View, Text } from 'react-native'

After

import { View, Text, H1, P } from 'dripsy'

Use the sx prop instead of style to use themed and responsive styles:

<View
sx={{
height: [100, 400],
backgroundColor: '$primary',
marginX: 10,
}}
/>

Instead of marginHorizontal, use marginX or mx, as seen on the theme-ui docs.

👀 What does Dripsy look like

Create a theme

export const theme = makeTheme({
colors: {
$text: '#000',
$background: '#fff',
$primary: 'tomato',
},
space: {
// recommended: set 0 first, then double for consistent nested spacing
$0: 0,
$1: 4,
$2: 8,
$3: 16,
$4: 32,
$5: 64,
$6: 128,
$7: 256,
},
fontSizes: {
$0: 12,
$1: 14,
$2: 16,
$3: 18,
$4: 24,
$5: 28,
$6: 32,
},
text: {
h1: {
fontSize: '$2', // 16px, from `fontSizes` above
},
p: {
fontSize: '$0', // 12px from `fontSizes`
mb: '$3', // 8px from `space`
},
},
})

...and build a beautiful, responsive UI

<Text
sx={{
color: '$primary',
padding: ['$1', '$3'], // [4px, 16px] from theme.space
}}
>
Themed color!
</Text>

...you can even use "HTML" elements

import { H1, H2, P, A } from 'dripsy'
const Header = () => (
<H1
sx={{
color: '$text', // #000 from theme.colors
fontSize: '$2', // 24px from theme.fontSizes
}}
>
Header!
</H1>
)

Credit to Evan Bacon for @expo/html-elements, used above!

sx Factory

If you need fine-grained theme usage, you can pass a function to sx:


The function receives your app's theme (with Intellisense) and should return the sx style.