react-native-style-shorthand

Small utility to style components in shothanded way.

Motivation

It's really comfortable to style an app in css-like way with react-native, but I sometimes feel quite tired of writing styles such like backgroundColor, marginBottom, borderWidth repeatedly for hundred times.

That's why I made this small module to prevent myself from repeating it.

What is this?

This is some set of higher order and pre-defined components which would help you to do styling in more efficient way.

For example, we usually do something like this when we give some style for our components.

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

const style = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 20,
    backgroundColor: 'royalblue',
  },
})

export default function App() {
  return (
    <View style={style.container}>
      <Text style={style.text}>RNSS</Text>
    </View>
  )
}

With pre-defined components from react-native-style-shorthand (RNSS), now we can apply the same style in this way.

import React from 'react'
import { View, Text } from 'react-native-style-shorthand'

export default function App() {
  return (
    <View f={1} jc='center' ai='center'>
      <Text c='#fff' ftsz={20} bgc='royalblue'>
        RNSS
      </Text>
    </View>
  )
}

Every component accepts shothanded style props as a part of it's props, and renders as if they're given as style prop.

Here is an example for pairs of style prop and it's corresponding shorthand, check out catalog.md to get the list of all available shorthands.

| Style | Shorthand | | :------------- | :-------- | | flex | f | | justifyContent | jc | | alignItems | ai | | margin | m | | padding | p | | width | w | | height | h |

Install

$ npm install react-native-style-shorthand --save

Compatible with

• react-native >= v0.72
• expo >= v49.0

and also works with react-native-web.

Usage

Pre-defined components

As shown above, RNSS exports pre-defined components for all the atomic components from react-native.

You can easily import and use them to work with style shorthands.

import React from 'react'

import { Text, View, ScrollView, SafeAreaView } from 'react-native-style-shorthand'

const LongView: React.FC = ({ children }) => (
  <View jc='center' ai='center' h={1200}>
    {children}
  </View>
)

export default function App() {
  return (
    <SafeAreaView f={1} bgc='#aaa'>
      <ScrollView>
        <LongView>
          <Text c='blue' bgc='#fff'>
            Long View
          </Text>
        </LongView>
      </ScrollView>
    </SafeAreaView>
  )
}

Working with contentContainerStyle

Since some components accept style prop as contentContainerStyle for it's inner view , RNSS provides a special prop contentContainerSS for convinience.

The style shorthand object given for contentContainerSS prop will be automatically restored into regular style object and will be passed to contentContainerStyle prop.

import React from 'react'

import { Text, ScrollView } from 'react-native-style-shorthand'

export default function App() {
  return (
    <ScrollView f={1} bgc='#fff' contentContainerSS={{ bgc: 'blue' }}>
      <Text>contentContainerSS</Text>
    </ScrollView>
  )
}

Working with Ref

You could pass ref object as usual you do.

If you use TypeScript and want to type the ref object, there is an utility RefType to extract the type of it's inner component.

import React from 'react'

import { ScrollView } from 'react-native-style-shorthand'

import type { RefType } from 'react-native-style-shorthand'

export default function App() {
  // ref: React.MutableRefObject<ScrollView>
  const ref = React.useRef<RefType<typeof ScrollView>>(null)

  return <ScrollView ref={ref} />
}

Contibuting

Always welcome for any contributing!

1. Install dependencies for the module itself

$ cd react-native-style-shorthand
$ npm ci

Then run npm start to launch tsc compiler with --watch option.

2. Install dependencies for example project

$ cd example
$ npm ci

Then run npm start to launch metro bundler from expo.

3. Update some code and see if it works in example app

Then run npm test at the root directory to run tests by jest.

(Tests are currently only available for general functions and hooks.)