Styling

Components use CSS styles + FlexBox layout.

Layout Styles

property type supported?
width number | percentage
height number | percentage
top number | percentage
left number | percentage
right number | percentage
bottom number | percentage
minWidth number | percentage
maxWidth number | percentage
minHeight number | percentage
maxHeight number | percentage
margin number | percentage
marginVertical number | percentage
marginHorizontal number | percentage
marginTop number | percentage
marginBottom number | percentage
marginLeft number | percentage
marginRight number | percentage
padding number | percentage
paddingVertical number | percentage
paddingHorizontal number | percentage
paddingTop number | percentage
paddingBottom number | percentage
paddingLeft number | percentage
paddingRight number | percentage
borderWidth number | percentage
borderTopWidth number | percentage
borderRightWidth number | percentage
borderBottomWidth number | percentage
borderLeftWidth number | percentage
position absolute | relative
flexDirection row | row-reverse | column | column-reverse
flexWrap wrap | nowrap
justifyContent flex-start | flex-end | center | space-between | space-around
alignItems flex-start | flex-end | center | stretch
alignSelf auto | flex-start | flex-end | center | stretch
overflow visible | hidden | scroll
flex number
flexGrow number
flexShrink number
flexBasis number
aspectRatio number ⛔️
zIndex number
backfaceVisibility visible | hidden ⛔️
backgroundColor Color
borderColor Color
borderTopColor Color
borderRightColor Color
borderBottomColor Color
borderLeftColor Color
borderRadius number | percentage
borderTopLeftRadius number | percentage
borderTopRightRadius number | percentage
borderBottomLeftRadius number | percentage
borderBottomRightRadius number | percentage
borderStyle solid | dotted | dashed
borderWidth number | percentage
borderTopWidth number | percentage
borderRightWidth number | percentage
borderBottomWidth number | percentage
borderLeftWidth number | percentage
opacity number

Shadow Styles

property type supported?
shadowColor Color
shadowOffset { width: number, height: number }
shadowOpacity number
shadowRadius number | percentage

Type Styles

property type supported?
color Color
fontFamily string
fontSize number
fontStyle normal | italic
fontWeight string | number
textDecorationLine none | underline | double | line-through
textShadowOffset { width: number, height: number }
textShadowRadius number
textShadowColor Color
textTransform none | uppercase | lowercase
letterSpacing number
lineHeight number
textAlign auto | left | right | center | justify
writingDirection auto | ltr | rtl ⛔️
opacity number
percentage points | percentages

Styles Specific To react-sketchapp

Some properties are Sketch specific and won't work cross-platform but give you a better control over your components.

property type supported?
shadowSpread number
shadowInner boolean

Examples

Styles can be passed to components as plain objects, or via StyleSheet.

import { View, StyleSheet } from 'react-sketchapp';

// inline props
<View
  style={{
    backgroundColor: 'hotPink',
    width: 300,
  }}
/>

// plain JS object
const style = {
  backgroundColor: 'hotPink',
  width: 300,
}

<View style={style} />

// StyleSheet
const styles = StyleSheet.create({
  foo: {
    backgroundColor: 'hotPink',
    width: 300,
  }
})

<View style={styles.foo} />
<View style={[styles.foo, styles.bar]} />

You can use variables in your styles just like a standard React application:

const colors = {
  Haus: '#F3F4F4',
  Night: '#333',
  Sur: '#96DBE4',
  Peach: '#EFADA0',
  Pear: '#93DAAB',
};

<View>
  {Object.keys(colors).map(name => (
    <View
      key={name}
      style={{
        flex: 1,
        backgroundColor: colors[name],
      }}
    />
  ))}
</View>;