_Styl_ is a high-order function that receives any component that supports the style prop, and returns a function that expects a plain object stylesheet. It will return a styled React component with the same props of the original component:

`jsx
import styl from "react-native-styl"
import { ScrollView } from "react-native"

const Wrapper = styl(ScrollView)({
padding: 16
})




`

Easily create dynamic stylesheets. Use a callback function to access the component props when creating the styles:

`jsx
import styl from "react-native-styl"
import { Text } from "react-native"

const ColoredText = styl(Text)(({ props }) => ({
color: props.color,
}))

Lorem ipsum
`

Wrap your application with the Provider and every component will also have access to the theme in the callback function:

`jsx
import { styl, Provider as StyleProvider } from "react-native-styl"
import { Text } from "react-native"

const Theme = ({ children }) => (

{children}

)

const ThemeColorText = styl(Text)(({ theme }) => ({
color: theme.primary
}))

Lorem ipsum
`

The useTheme hook let you access the currently active theme.

`jsx
import { useTheme, Provider as StyleProvider } from 'react-native-styl'

const Main = ({ children }) => {
const theme = useTheme()

return Foo
}

const App = () => {
return (



Given that _styl_ accepts any component that supports the style prop, every component created by the library can be styled again. It will inherit the original component style that can be extended:

`jsx
import styl from "react-native-styl"
import { Text } from "react-native"

const BaseText = styl(Text)({
color: 'red',
padding: 16,
})

const ExtendedText = styl(BaseText)({
color: 'green',
})

Lorem ipsum
`

Render a new styled component passing a valid React component to as prop:

`jsx
import styl from "react-native-styl"
import { Text, TouchableOpacity } from "react-native"

const Base = styl(Text)({
padding: 16
})

null}>
TouchableOpacity

`

The first argument of react-native-styl accepts any valid React component. This means it's possible to pass a custom function component:

`jsx
import styl from "react-native-styl"
import { Text } from "react-native"

const PresetComp = styl((props) => (

))({ padding: 16 })

Lorem ipsum
`

react-native-styl fully supports TypeScript for both theme definitions and custom props.

Theme definition:
The first step is to create a declarations file (e.g.: theme.d.ts), with the following content:

`jsx
// import original module declarations
import 'react-native-styl'

// and extend it
declare module 'react-native-styl' {
export interface DefaultTheme {
colors: {
main: string
secondary: string
}
}
}
`

#### Custom props:

Define the component props and pass it to the main function:

`jsx
import styl from "react-native-styl"
import { Text } from "react-native"

interface TitleProps {
color: string
}

const Title = styl(Text)(({ props }) => ({
color: props.color,
}))


`

#### as prop

Typescript is not yet supported Help is needed to implement it.

`jsx
import styl from 'react-native-styl'
import * as RN from 'react-native'

const UI = {
View: styl(RN.View),
Text: styl(RN.Text),
}

const Title = UI.Text({ color: 'red' })
`