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:

javascript

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>;

Styling

Styling

Layout Styles

Shadow Styles

Type Styles

Styles Specific To react-sketchapp

Examples

Styles Specific To `react-sketchapp`