rn-styler v0.5.1

Get started

Getting started with rn-styler

What's New?

0.4.0: -Updated useStyler hook: syntax changed, now accepts and returns an array.

0.3.4: -Updated react native version (0.68.0)

0.3.3: -Added out of the box stylized components using useStyler hook

0.3.2:
-Added position class: enum'absolute', 'relative'.
-Added display class: enum'flex', 'none'.
-Added overflow class: enum'visible', 'hidden', 'scroll'.
-Added zIndex computed property: accepts number.
-Added left, right, top, bottom computed properties: accepts number, string(percents),wp(number), hp(number).

0.2.8:
-Introducing useColors hook.

Installation

Install this library with npm:

npm i rn-styler

or using yarn:

yarn add rn-styler

Usage

useStyler hook

Use useStyler hook into your application, to give styles to your components.

Argument must be a single array, with inside arrays of a React Component plus a string with the desired style. It also return an array with the same number array length provided as first and unique argument.

import { View, Text, Pressable } from 'react-native';

const App = () => {
  const [MainView, BlueButton, TextButton] = useStyler([
    [View, 'bg-#c22 flex-1 justify-center items-center'],
    [Pressable, 'rounded-hp(3) w-wp(60) h-wp(20) bg-#22c items-center justify-center',],
    [Text, 'text-white font-bold font-size-hp(1.7) text-center'],
  ]);

  return (
    <MainView>
      <BlueButton>
        <TextButton>I'm a styled pressable button</TextButton>
      </BlueButton>
    </MainView>
  );
}

Theme

Import ThemeProvider wrapper and define some options by passing an object to theme prop.

import {ThemeProvider} from 'rn-styler';

...

<ThemeProvider
    theme={options}
  >
    <App />
  </ThemeProvider>

• See how to configure your theme options here below

Options

Colors

Pass an object with the custom colors you will need use along your application:

import {ThemeProvider} from 'rn-styler';

const options = {
    colors: {
        navyBlue: '#000080',
    }
}

...

<ThemeProvider
    theme={options}
  >
    <App />
</ThemeProvider>

And use with useStyler hook in your components:

const App = () => {
    const [ViewNavyBlue] = useStyler([
        [View, 'bg-navyBlue',]
    ])

    return (
        <ViewNavyBlue>
            ....
        </ViewNavyBlue>
    )
};

useColors hook

Use useColors hook to get all colors configured in your ThemeProvider.

import { useColors } from 'rn-styler';

const App = () => {
    const colors = useColors();

    return (
        <CustomText color={colors.navyBlue}>
            ....
        </CustomText>
    )
};

Custom Properties

Pass an object with the custom properties you will re-use along your application:

import {ThemeProvider} from 'rn-styler';

const options = {
    properties: {
        customShadow: {
          shadowColor: "#000",
          shadowOffset: {
            width: 0,
            height: 12,
          },
          shadowOpacity: 0.58,
          shadowRadius: 16.00,
          elevation: 24,
        },
        'background-red-fontSize-big-custom-class': {
          backgroundColor: 'red',
          fontSize: 20,
        }
    }
}

...

<ThemeProvider
    theme={options}
  >
    <App />
</ThemeProvider>

And use with useStyler hook in your components:

const App = () => {
    const [CustomView] = useStyler([
        [View, 'customShadow background-red-fontSize-big-custom-class']
    ]);

    return (
        <CustomView>
            ....
        </CustomView>
    )
};

Available Computed Properties

Available computed properties needs a dash following by the desired value

NOTE: wp(number) and hp(number) will calculate the window's width and height. Example: If your device width is 390px, wp(50) will return 195. Also hp(number) its based on device height.

Margin

Padding

Height

Min Height

Max Height

Width

Min Width

Max Width

Left

Right

Top

Bottom

Border Radius

Border Width

Background Color

Color

Font Size

Flex

Flex Shrink

Flex Grow

Aspect Ratio

Z Index

Available predefined properties

Direction

Direction

Display

Display

Flex

Align Content

Align Items

Align Self

Flex Direction

Flex Wrap

Justify Content

Font

Font Weight

Position

Position

Overflow

Overflow

Text

Text Align

Constants

Colors