@shipt/react-native-tachyons

react-native-tachyons

Installation

# with npm
npm i --save @shipt/react-native-tachyons

# with yarn
yarn add @shipt/react-native-tachyons

Configuration

You can compose your own styles and pass them into the build process as desired.

// styleConfig.js

import { build } from '@shipt/react-native-tachyons';
import { StyleSheet } from 'react-native';

// define your rem
const rem = 16;

// define your color palette
const colors = {
  white: '#ffffff',
  black: '#000000'
};

// define your style shorthands
const styles = {
  'gutter-h': { paddingLeft: '1rem', paddingRight: '1rem' },
  'gutter-v': { paddingTop: '1rem', paddingBottom: '1rem' },
  'some-style': { height: 100, width: '100%' }
};

// Run build
build({
  rem,
  colors,
  styles,
  StyleSheet // React Native's StyleSheet is required
});

And then...

// another file
import T from '@shipt/react-native-tachyons';
// ... other imports

function MyComponent() {
  return <View style={T('flx-i gutter-h bg-white')} />;
}

export default MyComponent;

Composing with custom styles dynamically

If you find yourself wanting to override some styles with something custom in some places in your app. Just throw them in the function call with your string of shorthands.

import T from '@shipt/react-native-tachyons'
// ... other imports

const customStyle = StyleSheet.create({
  MyComponent: {
    width: 234
  }
})

function MyComponent() {
  return <View style={T('flx-i gutter-h bg-white', customStyle.MyComponent)} />
}

// Also, it's just a function, so it can be abstracted in any way you see fit
function MyCleanerComponent(props) {
  const style = props.active
    ? T('flx-i gutter-h bg-white', customStyle.MyComponent)
    : T('flx-i gutter-h bg-black', customStyle.MyComponent)

  return <View style={style} />
}

export default MyComponent
export default MyCleanerComponent

Styled Components Syntax

import { View, Text } from 'react-native';
import { styled } from '@shipt/react-native-tachyons';
// ... other imports

const staticStyles = StyleSheet.create({
  Button: {
    width: 253
  }
});

const ButtonContainer = styled(View, staticStyles.Button)`flx-i gutter ${props => (props.primary ? 'green' : 'white')}`;
const ButtonContent = styled(Text)`white`;

export function Button(props) {
  const dynamicStyle = {
    height: props.active ? 51 : 47
  };

  return (
    <ButtonContainer primary={props.primary} style={dynamicStyle}>
      <ButtonContent>{props.text}</ButtonContent>
    </ButtonContainer>
  );
}

Styled Components Babel Plugin

Checkout our babel-plugin

Gotchas

Usage with Animated.createAnimatedComponent

We haven't tracked down the exact issue nor can we reliably replicate, BUT, occasionally RN will throw a nasty error if you use Animated.createAnimatedComponent with a styled component. The solution style your component prior to using Animated.createAnimatedComponent.

// GOOD
const Component = styled(View)`absolute`;

const AnimatedComponent = React.createAnimatedComponent(Component);

// BAD
const AnimatedView = React.createAnimatedComponent(View);

const AnimatedComponent = styled(AnimatedView)`absolute`;