Styling
Components use CSS styles + flexbox layout.
Layout Styles
property | type | supported? |
---|---|---|
shadowColor | Color | โ |
shadowOffset | { width: number, height: number } | โ |
shadowOpacity | number | โ |
shadowSpread | number | โ |
shadowRadius | number | โ |
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 | โ |
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 | percentage | โ |
aspectRatio | number | โ |
zIndex | number | โ |
backfaceVisibility | visible | hidden | โ๏ธ |
backgroundImage | string | {uri: string} | โ |
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 | โ |
Type Styles
property | type | supported? |
---|---|---|
Color | Color | โ |
fontFamily | string | โ |
fontSize | number | โ |
fontStyle | normal | italic | solid | โ |
fontWeight | 'normal' | 'bold' | '100' | '200' | ... | '900' | โ |
textDecorationLine | none | underline | line-through | โ |
textShadowOffset | { width: number, height: number } | โ |
textShadowRadius | number | โ |
textShadowColor | Color | โ |
letterSpacing | number | percentage | โ |
lineHeight | auto | number | percentage | โ |
textAlign | auto | left | right | center | justify | โ |
writingDirection | auto | ltr | rtl | โ๏ธ |
opacity | number | โ |
percentage | points | percentages | โ |
Styles can be passed to components as plain objects.
import { View, StyleSheet } from 'react-figma';
// 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>;