Headless Dripsy with useSx


import { useSx } from 'dripsy'


If you want to use the sx prop with a custom component, such as from another library, try the useSx hook.

import { Button } from 'react-native-paper'
export default function HeadlessButton() {
const sx = useSx()
return <Button labelStyle={sx({ color: '$primary' })} />

The sx function will return a memoized value, so you can use it in render directly.

It also is optimized for Web performance.


useSx is especially useful for styling components with props other than style.

For example, you can use it for contentContainerStyle on FlatList:

const sx = useSx()
return (
contentContainerStyle={sx({ paddingX: '$3' })}


You can wrap your own components to give them theme styling and intellisense.

For example, you can make a custom ScrollView component:

Don't actually do this with ScrollView; Dripsy already implements contentContainerSx under the hood for you. This example only uses ScrollView as an illustration.

import { useSx, ScrollView } from 'dripsy'
import type { SxProp } from 'dripsy'
type ScrollProps = Omit<
React.ComponentProps<typeof ScrollView>,
type DripsyScrollProps = ScrollProps & {
contentContainerSx?: SxProp,
export function DripsyScrollView({
}: DripsyScrollProps) {
const sx = useSx()
return (
contentContainerStyle={contentContainerSx && sx(contentContainerSx)}

Use your custom component

You can now use your custom DripsyScrollView:

bg: '$primary',