react-native-css-stylesheet

Create responsive design with the help of css queries

Installation

``bash
npm install react-native-css-stylesheet
`

Usage

Define styles using CssStyleSheet.create() instead of StyleSheet.create()

`js
import React from "react";
import { Text, View } from "react-native";

import CssStyleSheet from "react-native-css-stylesheet";

const Example = () => {
return (

Example

);
};

const { styles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});
`

Styling Options

$3

| Unit | Description | Example |
| ------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ |
| s | scales size in a linear manner relative to screen width | 7.5s |
| vs | scales size in a linear manner relative to screen height | 9vs |
| ms | scales size in a linear manner relative to screen width. factor is resize factor. Default is 0.5 | 7ms or 7ms0.25 |
| mvs | scales size in a linear manner relative to screen height. factor is resize factor. Default is 0.5 | 9ms or 9ms0.75 |
| rem | size relative to the default font size | 1rem |
| vw | size relative to the window width | 1.02vw |
| vh | size relative to the window height | 10vh |
| vmin | size relative to the shortest dimension compared between window width and height | 10vmin |
| vmax | size relative to the largest dimension compared between window width and height | 10vmax |

> Note:
>
> 1. size can be any positive number (including decimal) for s, vs, ms, and mvs
> 2. size can be any positive number ranging from 0 to 100 (including decimal) for rem, vw, vh, vmin, and vmax
> 3. factor can be any positive number ranging from 0 and 1 (including decimal)

$3

| Query | Supported Values | Description | Example |
| ------------------------ | ------------------------------------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------- |
| (orientation: ) | portrait or landscape | Matches the orientation with the provided value | 1. (orientation: landscape)
2. (orientation: portrait) |
| (min-width: ) | custom size or number | Matches the minimum window width with the provided value. | 1. (min-width: 320)
2. (min-width: 10s) |
| (max-width: ) | custom size or number | Matches the maximum window width with the provided value. | 1. (max-width: 600)
2. (max-width: 10rem) |
| (min-height: ) | custom size or number | Matches the minimum window height with the provided value. | 1. (min-height: 600)
2. (min-height: 15vs) |
| (max-height: ) | custom size or number | Matches the maximum window height with the provided value. | 1. (max-height: 1200)
2. (max-height: 25mvs0.75) |

> Note:
>
> 1. Brackets around queries are compulsory.
> 2. Any custom size defined in the above section will work, but using units like vw, vh, vmin, or vmax would always result in true since they are relative to the window with and height.

#### Grouping Queries

| Keyword | Description | Example |
| --------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
| and | Applies the styles if queries preceding and succeeding to the keyword and is true. | (orientation: landscape) and (min-width:320) |
| , | Applies the styles if either of the queries preceding and succeeding to the keyword , is true. | (min-height: 600) , (min-width:320) |
| () | Create group of queries if you have more than one conditional keyword | ((orientation: landscape) and (min-width:320)),((orientation: portrait) and (min-height:600)) |

API

$3

A function which returns computed styles on the basis of media queries specified.

#### Arguments

1. styles (_object_) : A style object either the normal or with custom properties and queries.

#### Return

- cssStyleSheet (_object_)

- styles (_object_): A style object which is generated during application start. See basic example above.

- responsiveStyles (_Function_): A function to regenerate the styles during run time. When used inside a component, it will generate a new style object every time the component updates. See example below.

#### Example

`js
import React from "react";
import { Text, View } from "react-native";

import CssStyleSheet from "react-native-css-stylesheet";

const Example = () => {
const styles = responsiveStyles();
return (

Example

);
};

const { responsiveStyles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});
`

$3

Hook which returns recalculated styles every time there is a dimension change.

#### Arguments

1. responsiveStyles (_Function_) : responsiveStyles function returned from create function.

#### Return

- styles (_object_): An object which is recalculated every time dimension change happens. See example below.

#### Example

`js
import React from "react";
import { Text, View } from "react-native";

import CssStyleSheet, { useCssStyleSheet } from "react-native-css-stylesheet";

const ResponsiveFunctionExample = () => {
const styles = useCssStyleSheet(responsiveStyles);
return (

ResponsiveFunctionExample

);
});

const { responsiveStyles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});

export default ResponsiveFunctionExample;

`

$3

Link a style sheet with a component using the higher-order component pattern. It does not modify the component passed to it; instead, it returns a new component with a cssStyleSheet prop. This prop contains the responsive style object which gets recalculated every time there is a dimension change detected. This props can be used as a normal style object.

- It adds a cssStyleSheet prop.
- It forwards refs to the inner component.

#### Arguments

1. responsiveStyles (_Function_) : responsiveStyles function returned from create function.

2. Component (_React Element_) : The component that will be wrapped

#### Return

- Component (_React Element_): The new component created.

#### Example

`js
import React from "react";
import { Text, View } from "react-native";

import CssStyleSheet, { withCssStyleSheet } from "react-native-css-stylesheet";

class ClassWithoutStyleSheet extends React.Component {
render() {
const { cssStyleSheet } = this.props;
return (

ResponsiveClassExample

);
}
}

const { responsiveStyles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});

const ResponsiveClassExample = withCssStyleSheet(responsiveStyles, ClassWithoutStyleSheet);

export default ResponsiveClassExample;

/**
* OR
* export default withCssStyleSheet(responsiveStyles, ClassWithoutStyleSheet);
*/
``

Todo

- [ ] Add Examples screenshot/gif
- [ ] Nested queries support
- [ ] Platform based media queries

License

MIT