tachyons-react-native v1.0.4

Tachons for React Native

Tachons for React Native brings functional styling to react-native. This module uses naming convention defined by Tachons and comes with theming support.

Advantages

• Less code
• No need to maintain a separate stylesheet
• No need to find a proper name for every component you want to style
• Looking at a component tells you exactly how it looks, it's all in one place.
• And more

Theming Support

theme.js

import { addTheme, setTheme } from 'tachyons-react-native'

// the first theme is considered to be the default theme
addTheme('light', {
  primary: '#19AEA2',
  primaryText: '#464646',
  secondary: '#464646',
  ternary: '#F8FAFE',
  accent: '#FF5762',
  divider: '#D1D1D1',
  shadow: '#F8F7F7',
  page: '#F0f0F0',
  card: '#FFFFFF',
  success: '#7CBB00',
  error: '#F65314',
  navigation: '#565A5C',
  title: '#474747',
  subtitle: '#82898D',
  description: '#595959',
  placeholder: '#A2A4A5',
  border: '#DADADE',
  transparent: 'transparent'
})

// second theme if you need
addTheme('dark', {
  primary: '#464646',
  .... 
})

// call setTheme to set default theme
setTheme('dark')

App.js

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

import './theme'
import { styles as s } from 'tachyons-react-native'

export default class App extends React.Component {
  render () {
    return (
      <View style={[s.flex, s.alignCenter, s.justifyCenter, s.primaryBg]}>
        <Text style={[s.tc, s.b, s.i, s.ba, s.primaryText]}>Open up App.js to start working on your app!</Text>
      </View >
    )
  }
}

Live theme switching using withTheme

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

import './theme'
import { styles as s, withTheme } from 'tachyons-react-native'

export default withTheme(class App extends React.Component {
  render () {
    return (
      <View style={[s.flex, s.alignCenter, s.justifyCenter, s.primaryBg]}>
        <Text style={[s.tc, s.b, s.i, s.ba, s.primaryText]}>Open up App.js to start working on your app!</Text>
        <TouchableOpacity onPress={() => this.props.setTheme(this.props.theme === 'dark' ? 'light' : 'dark')}>
          <Text>Toggle Theme</Text>
        </TouchableOpacity>
      </View >
    )
  }
})

Theme Based Styles

Sample Styles (Primary)

Style Guide

FLEX

RESIZE

BORDER

COLOR

POSITION

WIDTH

FONT

HEIGHT

LETTER

LINE

OVERFLOW

OPACITY

PADDING

MARGIN

TEXT

Z-INDEX