A micro-library for React Native developers whose goal is to write stylesheets

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:

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

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

<Wrapper indicatorStyle="black">
  <View />
</Wrapper>

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

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

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

<ColoredText color="red">Lorem ipsum</ColoredText>

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

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

const Theme = ({ children }) => (
  <StyleProvider theme={{ primary: 'blue' }}>
    {children}
  </StyleProvider>
)

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

<ThemeColorText>Lorem ipsum</ThemeColorText>

The useTheme hook let you access the currently active theme.

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

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

  return <Text style={{ color: theme.brand }}>Foo</Text>
}

const App = () => {
  return (
    <StyleProvider theme={{ color: { brand: 'blue' } }}>
      <Main />
    </StyleProvider>
  )
}

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:

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',
})

<ExtendedText>Lorem ipsum</ExtendedText>

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

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

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

<Base as={TouchableOpacity} onPress={() => null}>
  <Text>TouchableOpacity</Text>
</Base>

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

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

const PresetComp = styl((props) => (
  <Text ellipsizeMode="tail" numberOfLines={1} {...props} />
))({ padding: 16 })

<PresetComp>Lorem ipsum</PresetComp>

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:

// 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:

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

interface TitleProps {
   color: string
}

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

<Title color="blue">Lorem ipsum</Title>

as prop

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

Create a custom library to suit your own goals:

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' })