react-native-restyle-sheet

restyle-sheet provides flexible way to define Theming, Dynamic styles & Media Query support for React Native

Features

• Media Query Support
• Easy way to define Dynamic Style & Theming (No inline style)
• useMediaQuery hooks
• Fully typed with TypeScript

https://user-images.githubusercontent.com/22383818/226711571-9a310e32-7e3d-499c-a04a-898028be49ec.mp4

PlayGround

Check out the codeSandbox playGround link

Install

yarn add react-native-restyle-sheet
# or
npm install --save react-native-restyle-sheet

Usage

1. First We need to initialize Style Sheet

// theme.js

import { createStyleSheet } from 'react-native-restyle-sheet';

export const lightTheme = {
  themeId: 'light',
  colors: {
    main: 'green',
    primary: '#00235B',
    secondary: '#E21818',
    tertiary: '#FFDD83',
    quatenary: '#98DFD6',
  },
};

const breakpoints = {
  small: 0,
  medium: 500,
  large: 800,
  // you can define custom device size also
};

export const { ReStyleSheet, changeTheme } = createStyleSheet({
  theme: lightTheme,
  breakpoints,
});

2. Then use ReStyleSheet like this anywhere in your app with theme & breakpoints:

import React from 'react';
import { View, Text } from 'react-native';
import { ReStyleSheet } from './theme';

const useStyle = ReStyleSheet(({ theme, breakpoints }) => ({
  header: {
    fontWeight: 'bold',
    fontSize: 20,
    color: theme.colors.tertiary,
    [breakpoints.only('medium')]: {
      color: theme.colors.primary,
    },
  },
}));

const Demo = () => {
  const { styles } = useStyle();
  return (
    <>
      <View>
        <Text style={styles.header}>Hello World</Text>
      </View>
    </>
  );
};

Define dynamic style

we can pass any dynamic values in useStyle hooks returned by ReStyleSheet

const useStyle = ReStyleSheet(() => ({
  header: {
    fontSize: 20,
    color: (props) => props?.activeColor,
  },
}));

const Demo = () => {
  const [color, setColor] = React.useState('red');
  const { styles } = useStyle({ activeColor: color });

  const toggleColor = () => {
    setColor(color === 'red' ? 'green' : 'red');
  };

  return (
    <View>
      <Text style={styles.header}>Hello World</Text>
      <Pressable onPress={toggleColor}>
        <Text>Toggle Color</Text>
      </Pressable>
    </View>
  );
};

Change Theme

1. To change the Theme we can use changeTheme() method anywhere in our app

// theme.js

import { createStyleSheet } from 'react-native-restyle-sheet';

const lightTheme = {
  themeId: 'lightTheme',
  colors: {
    ...
  },
};

const darkTheme = {
  themeId: 'darkTheme',
  colors: {
    ...
  },
};

const breakpoints = {
 ...
};

export const { ReStyleSheet, changeTheme } = createStyleSheet({
  theme: lightTheme,
  breakpoints,
});

export const toggleTheme = () => {
  changeTheme((themId) => (themId === 'darkTheme' ? lightTheme : darkTheme));
};

Override Media Query

If multiple breakpoints are applicable similar to css rule the bottom breakpoint will get priority.
For example we are in a "small" device so here breakpoints.only('small') & breakpoints.down('medium') both are applicable

// Example 1
const useStyle = ReStyleSheet(({ breakpoints }) => ({
  header: {
    backgroundColor: 'black',
    [breakpoints.only('large')]: {
      backgroundColor: 'red',
    },
    [breakpoints.only('small')]: {
      backgroundColor: 'green',
    },
    // in "small" device header background will be "blue"
    [breakpoints.down('medium')]: {
      backgroundColor: 'blue',
    },
  },
}));

// Example 2
const useStyle = ReStyleSheet(({ breakpoints }) => ({
  header: {
    backgroundColor: 'black',
    [breakpoints.only('large')]: {
      backgroundColor: 'red',
    },
    [breakpoints.down('medium')]: {
      backgroundColor: 'blue',
    },
    // in "small" device header background will be "green"
    [breakpoints.only('small')]: {
      backgroundColor: 'green',
    },
  },
}));

breakpoints API

| Methods | Arguments |Required | Returns | | ------------- |:-------------:| -------------| -------------| | breakpoints.up(size) | size (string) |true |MediaQuery key (string) | | breakpoints.down(size) | size (string) |true | MediaQuery key (string) | | breakpoints.only(size) | size (string) |true | MediaQuery key (string) |

useMediaQuery Hooks

It returns the device size based on breakpoints

import { useMediaQuery } from 'react-native-restyle-sheet';

const Demo = () => {
  const devicetype = useMediaQuery()
  console.log(devicetype) // For Example: small

  ....
};

It also accepts custom breakpoints and returns boolean value

const isTablet = useMediaQuery({ min: 400, max: 800 });
const isExtraLarge = useMediaQuery({ min: 1200 });
const isExtraSmall = useMediaQuery({ Max: 576 });

console.log(isTablet); //false

License

MIT