https://github.com/pjjanak/react-native-nested-stylesheets

Extends React Native's StyleSheet Object to allow for nesting of styles
https://github.com/pjjanak/react-native-nested-stylesheets

Last synced: about 1 month ago
JSON representation

Extends React Native's StyleSheet Object to allow for nesting of styles

• Host: GitHub
• URL: https://github.com/pjjanak/react-native-nested-stylesheets
• Owner: pjjanak
• License: mit
• Created: 2015-03-31T17:13:39.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-05-10T19:49:57.000Z (over 7 years ago)
• Last Synced: 2024-08-16T17:53:06.738Z (5 months ago)
• Language: JavaScript
• Size: 152 KB
• Stars: 78
• Watchers: 2
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-nested-stylesheet ★67 - Nestable stylesheets for react-native. (Components / UI)
• awesome-react-native - react-native-nested-stylesheet ★67 - Nestable stylesheets for react-native. (Components / UI)
• awesome-reactnative-ui - react-native-nested-stylesheets
• awesome-reactnative-ui - react-native-nested-stylesheets
• awesome-react-native - react-native-nested-stylesheet ★67 - Nestable stylesheets for react-native. (Components / UI)
• awesome-react-native-ui - react-native-nested-stylesheet ★54 - Nestable stylesheets for react-native. (Components / UI)
• awesome-react-native - react-native-nested-stylesheet ★67 - Nestable stylesheets for react-native. (Components / UI)

README

        
# react-native-nested-stylesheet

Nestable stylesheets for react-native.

## Installation

`npm install react-native-nested-stylesheet`

## Usage notes

This plugin will allow you to create styles of the following format:

```

...

namespace: {

	styleA: {...},

	styleB: {...},

},

...

```

With the plain `StyleSheet` API you can only create stylesheets with one level. It should noted that `NestedStyleSheet` does not create cascading selectors. This is merely to allow namespacing of styles (e.g. containing the styles for all items in a specific `ListView`).

Note: You are only allowed to include other objects within a nested style. You cannot define rules at the namespace level.

## Usage Example

```

var React = require('react-native');

var NestedStyleSheet = require('react-native-nested-stylesheet');

var {

	View,

	Text,

	Image,

} = React;

var styles = NestedStyleSheet.create({

	cells: {

		container: {

			flex: 1,

			flexDirection: 'row',

			alignItems: 'center',

		},

		thumbnail: {

			width: 53,

			height: 81,

		},

		content: {

			flex: 1,

		},

	},

});

var Demo = React.createClass({

	render: function() {

		return (

			

				

					...

				

			

		);

	},

});

module.exports = Demo;

```