0% found this document useful (0 votes)
18 views14 pages

Styling, Layout

This document discusses styling and layout in React Native. It covers: - Components can be styled with the style prop, which accepts plain objects, StyleSheet objects, or arrays. - Common text properties like color, font styles, and alignment. - Background fill and image options. - Border properties. - Size properties for fixed, flexible, and percentage dimensions. - Flexbox container and item properties for layout. - Positioning and overflow clipping. - The StyleSheet class for creating and combining styles. - Transform properties for modifying appearance.

Uploaded by

Lunas Bin
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
0% found this document useful (0 votes)
18 views14 pages

Styling, Layout

This document discusses styling and layout in React Native. It covers: - Components can be styled with the style prop, which accepts plain objects, StyleSheet objects, or arrays. - Common text properties like color, font styles, and alignment. - Background fill and image options. - Border properties. - Size properties for fixed, flexible, and percentage dimensions. - Flexbox container and item properties for layout. - Positioning and overflow clipping. - The StyleSheet class for creating and combining styles. - Transform properties for modifying appearance.

Uploaded by

Lunas Bin
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
You are on page 1/ 14

Styling & Layout

1 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 All components accept style prop, which can be:
 A plain JavaScript object
 A reference to a style created by StyleSheet.create(…)
 Array of styles (last style has precedence)

 Applied to elements individually (no equivalence to CSS


selectors)
 No className prop

2 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Example
function App() {
return <View style={{ flex: 1 }}>
<Text style={styles.redText}>Text 1</Text>
<Text style={[
styles.redText,
styles.grayBg,
{ fontSize: 20 }
]}>Text 2</Text>
</View>
}

const styles = StyleSheet.create({


redText: {color: 'red' },
grayBg: { backgroundColor: 'gray' }
});

3 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Text
 Properties match how CSS works on the web
 Properties:
 color
 fontFamily, fontSize, fontStyle, fontWeight,
fontVariant
 letterSpacing, lineHeight, textAlign,
textAlignVertical
 textShadowColor, textShadowOffset,
textShadowRadius, textTransform

4 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Background
 Properties:
 backgroundColor

 How to fill the background with an image?


 <ImageBackground> component

5 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Border
 Properties:
 borderWidth, borderLeftWidth,
borderTopWidth,…
 borderColor, borderLeftColor,
borderTopColor,…
 borderRadius, borderTopLeftRadius,…
 borderStyle

6 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Size
 Fixed dimensions
 width, height with numeric values (number of pixels)

 Flex dimensions
 flex with numeric values (ratio of taken space)

 Percentage dimensions
 width, height with percentage values (portion of parent)
 minWidth, maxWidth, minHeight, maxHeight
 Require parent with defined size

7 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Flexbox Layout: Container Properties
 flexDirection (column, row, column-
reverse, row-reverse): direction the
children of a node are laid out
 direction (ltr, rtl): direction children and
text in a hierarchy should be laid out
 justifyContent (flex-start, flex-
end, center, space-between, space-
around, space-evenly): how to align
children within the main axis
 alignItems (stretch, flex-start,
flex-end, center, baseline): how to align
children along the cross axis
 flexWrap (wrap, nowrap, wrap-reverse):
whether items are wrapped into multiple lines
 alignContent (flex-start, flex-end,
center, stretch, space-between,
space-around): distribution of lines along the
cross axis when items are wrapped to multiple
lines
8 AC3040: Mobile Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Flexbox Layout: Item Properties
 flex
 flexBasis, flexGrow, flexShrink
 alignSelf: like alignItems for container
 width, height

 Flexbox playground:
 https://yogalayout.com/playground

9 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Position
 position: how an element is positioned within its
parent
 relative: element is offset to the normal position based on
the values of top, right, bottom, left
 absolute: element is positioned absolutely based on the
values of top, right, bottom, left

 zIndex: components with larger value display on top of


others

10 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Overflow
 overflow: how children are measured and displayed
 visible: children not clipped, no scrollbar
 hidden: children clipped
 scroll: scrollbar shown

visible hidden scroll

11 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
StyleSheet class
 create() method
 compose() method
 const App = () => <View style={lightApp}>
...</View>;
const page = StyleSheet.create({
app: { ... },
});
const themes = StyleSheet.create({
light: { ... },
});
const lightApp = StyleSheet.compose(
page.app, themes.light);
 flatten() method

12 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Transforms
 Allow to modify the appearance of components using 2D or 3D
transformations
 Use transform style property
 Supported transforms:
 rotateX, rotateY, rotateZ, rotate
 skewX, skewY
 translateX, translateY
 scaleX, scaleY, scale
 perspective
 matrix
 Example:
 <Text style={{transform: [
{ scale: 2},
{ skewX: "45deg" },
{ rotate: "0.2rad" },
{ translate: -20 }
]}}>…</Text>

13 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercises
 Implement the following screens:

14 AC3040: Mobile Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology

You might also like