styled()

Turn any React Native component into a Dripsy component.

Import

import { styled } from 'dripsy'

Style

import { View } from 'react-native'
const StyledView = styled(View)({
flex: 1,
bg: '$primary',
})

Composition

You can also recursively use styled on Dripsy components:

import { View } from 'react-native'
const StyledView = styled(View)({
flex: 1,
bg: '$primary',
})
const ExtraStyledView = styled(StyledView)({
bg: '$secondary',
})

Advanced Usage

import { styled } from 'dripsy'
import { View } from 'react-native'
const StyledView = styled(View)({
flex: 1,
bg: '$primary',
})
// This uses the theme.layout.container styles!
const StyledView2 = styled(View, {
// this lets you use theme.layout.container styles
themeKey: 'layout',
defaultVariant: 'container',
})({
flex: 1,
bg: '$primary',
})

Factory Function

You can also pass props like styled-components

const DripsyView = styled(View)((props) => ({
color: props.success ? 'success' : '$primary',
}))

And then use it in your component:

return <DripsyView success />

Override the original styles with sx, if you'd like:

return <DripsyView success sx={{ height: 300 }} />

TypeScript

You can also add TypeScript types with autocompletion:

const DripsyView = styled(View)((props: { success: boolean }) => ({
color: props.success ? 'success' : '$primary',
}))