Advanced & Dynamic Component Styling for React Native
npm install react-look-native
Docs • Getting Started
Also available for React
React.createClassNew to Look?
Make sure to check out the the Getting Started guide which provides a full guide on how to use Look. From installation, over configuration and up to even developer tooling.
1. Getting Started
* 1.1. Installation
* 1.2. First Component
* 1.3. Stateless Components
* 1.4. Mixins & Plugins
* 1.5. DevTools
2. API Reference
* 2.1. look
* 2.2. StyleSheet
* create
* combineStyles
* 2.3. LookRoot
3. Registry
* 3.1. Plugins
* Mixin
* Stateful Value
* Stateful Selector
* 3.1.1 DevTools
* Style Logger
* 3.2 Mixins
* Before / After
* Blank
* Contains
* Empty
* Extend
* First Letter
* Stateful Conditions
* Substr
4. Guides
* 4.1. Upgrading Look
* 4.2. Configuring Look
* 4.3. Build your own: Mixin
* 4.4. Build your own: Plugin
5. FAQ
``sh`
npm install react-look-native --save`javascript
import React, { View, Text, Component, PropTypes } from 'react-native'
import look, { StyleSheet } from 'react-look-native'
class Header extends Component {
static defaultProps = { size: 24 };
static propTypes = { size: PropTypes.number.isRequired };
state = { status: 'active' };
render() {
return (
// Styles are basically applied using the style property
// Same way as React Native does by default
{this.props.title}
)
}
}
// generates objects for each selector
const styles = StyleSheet.create({
header: {
color: 'red',
// You can also use mixins with the same selector.
// They'll get split intelligently and evaluated on render
'status=active': {
backgroundColor: 'green',
'size>=20': {
backgroundColor: 'pink'
}
}
},
title: {
fontWeight: 800,
// use functions to inject props, state or context values
fontSize: (props, state, context) => props.size * state.zoom
}
})
export default look(Header)
``
Finally you only need to wrap your application with LookRoot.javascript
import { Presets, LookRoot } from 'react-look-native'
import React, { AppRegistry, Component } from 'react-native'
import Header from './Header'
// A simple basic app just showing the Header with "Hello World"
const App = () =>
// We ust create another container to wrap our App
const Container = () => (
)
AppRegistry.registerComponent('native', () => Container)
``