react-native-css-stylesheet

Create responsive design with the help of css queries

Installation

npm install react-native-css-stylesheet

Usage

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

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

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

const Example = () => {
	return (
		<View style={styles.container}>
			<Text style={styles.text}>Example</Text>
		</View>
	);
};

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

Styling Options

Size with custom units

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

Queries

| Query | Supported Values | Description | Example | | ------------------------ | ------------------------------------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------- | | (orientation: <value>) | portrait or landscape | Matches the orientation with the provided value | 1. (orientation: landscape) 2. (orientation: portrait) | | (min-width: <value>) | custom size or number | Matches the minimum window width with the provided value. | 1. (min-width: 320) 2. (min-width: 10s) | | (max-width: <value>) | custom size or number | Matches the maximum window width with the provided value. | 1. (max-width: 600) 2. (max-width: 10rem) | | (min-height: <value>) | custom size or number | Matches the minimum window height with the provided value. | 1. (min-height: 600) 2. (min-height: 15vs) | | (max-height: <value>) | 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 | | --------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | | <query> and <query> | Applies the styles if queries preceding and succeeding to the keyword and is true. | (orientation: landscape) and (min-width:320) | | <query> , <query> | Applies the styles if either of the queries preceding and succeeding to the keyword , is true. | (min-height: 600) , (min-width:320) | | (<queries>) | 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

create (styles)

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

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

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

const Example = () => {
	const styles = responsiveStyles();
	return (
		<View style={styles.container}>
			<Text style={styles.text}>Example</Text>
		</View>
	);
};

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

useCssStyleSheet (responsiveStyles)

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

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 (
		<View style={styles.container}>
			<Text style={styles.text}>ResponsiveFunctionExample</Text>
		</View>
	);
});

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

export default ResponsiveFunctionExample;

withCssStyleSheet (responsiveStyles, Component)

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

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 (
			<View style={cssStyleSheet.container}>
				<Text style={cssStyleSheet.text}>ResponsiveClassExample</Text>
			</View>
		);
	}
}

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