Scribd
Upload
2 views13 pages

3 Styling

React Native uses JavaScript objects for styling components, with properties similar to CSS but in camelCase format. The layout system is based on the CSS flex algorithm, focusing on properties like flexDirection, alignItems, and justifyContent. Various style properties are available for views, text, and images, allowing for extensive customization of component appearance.

Uploaded by

Mahdi Njim
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views13 pages

3 Styling

React Native uses JavaScript objects for styling components, with properties similar to CSS but in camelCase format. The layout system is based on the CSS flex algorithm, focusing on properties like flexDirection, alignItems, and justifyContent. Various style properties are available for views, text, and images, allowing for extensive customization of component appearance.

Uploaded by

Mahdi Njim
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Styling react native views

Styling
React native uses javascript objects to style components

Each react native component have style property where you can pass to it a style

Style are like CSS style but using javascript language example margin-right:10;
becomes marginRight:10;

CSS classes becomes javascript objects


Create stylesheet object
import { StyleSheet} from 'react-native';

const styles = [Link]({});


Height and Width
{height:10,width:10}

flex Dimensions
React native layout system
React native uses css flex algorithm to insure layouts work on all screen sizes.

The three most important properties are : flexDirection,alignItems,justifyContent


View Styles(1/4)
backfaceVisibility

backgroundColor

borderBottomLeftRadius

borderBottomRightRadius

borderBottomWidth

borderColor

borderLeftColor

borderLeftWidth
View Styles(2/4)
borderRadius

borderRightColor

borderRightWidth

borderStyle?: enum('solid', 'dotted', 'dashed')

borderTopColor

borderTopLeftRadius
View Style(3/4)
borderTopRightRadius

borderTopWidth

borderWidth

opacity

margin

padding

zIndex
View Style(4/4)
alignSelf

display?: enum('none', 'flex')

flexWrap?: enum('wrap', 'nowrap')

maxHeight

maxWidth

minHeight

minWidth
Text Style(½)
color

fontFamily

fontSize

fontStyle?: enum('normal', 'italic')

fontWeight?: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800',
'900')

lineHeight

textAlign?: enum('auto', 'left', 'right', 'center', 'justify')


Text Style(2/2)
textDecorationLine?: enum('none', 'underline', 'line-through', 'underline
line-through')

textShadowColor

textShadowRadius

android:textAlignVertical?: enum('auto', 'top', 'bottom', 'center')

ios:fontVariant?: [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums',


'proportional-nums')]

ios:letterSpacing
Image Style
width

height

resizeMode?: enum('cover', 'contain', 'stretch', 'repeat', 'center')


Position property
position:enum(absolute,relative)

Top

right

bottom

Left

You might also like