npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-styl

v1.2.6

Published

<h1 align="center"> <img width="400" src="https://user-images.githubusercontent.com/4838076/81743123-187d6680-9499-11ea-91c5-952dc9bee4e7.png" alt="styl" />

Downloads

408

Readme

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

const Title = styl(Text)({ color: 'blue' })

const App = () => <Title>Styl</Title>

Motivation

  • Keep the stylesheet simple: the recommended approach to writing stylesheets in React Native still needs too much boilerplate and it's a pain to maintain; styl provides a simple API where you'll be able to write the same stylesheets you are used to – with fewer lines of code;

  • Performance: no magic or tricks here, styl just maps the stylesheet (which can come from inline-style, the function argument or even props) to the style prop in the component: one of the most performative ways to write styles in React Native;

  • Versatility: styl uses the context API to bring full theme support, which can be used throughout the application; components can also be easily extended and styled overrided when needed;

  • Ultralightweight: about 1kb.

Usage

To get started using react-native-styl, first install the package:

yarn add react-native-styl or npm i react-native-styl

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

More examples in examples/src.


Benchmark

Internal tests rendering 5k views and 10k views into a Scrollview, styl shows to be one of the most performative ways to write stylesheets in React Native, losing only to the native approaches. The results below are the average of 5 complete renders measured in milliseconds:

| Library | Rendering 5k Views | Rendering 10k Views | | :-------------------- | :----------------: | :-----------------: | | StyleSheet | 2068ms | 4095ms | | Inline-style | 2317ms | 4507ms | | react-native-styl | 2754ms | 5432ms | | Styled-components | 3102ms | 6460ms |

See the tests in examples/src

Others benchmarks that are worth mentioning:

Inspiration:

This package was inspired by people's work on the following projects:

Special thanks to:

License:

MIT License © Danilo Woznica