5 Styling in depth

Chapter 4 introduced styling React Native components. It showed how to style View and Text components, styles you’ll likely use every day and that mostly affect the look of a component. This chapter continues the discussion and goes into more depth with platform-specific styles; drop shadows; manipulating components with transformations such as translation, rotation, scaling, and skewing; and dynamically laying out components with flexbox.

Some of these topics may feel familiar. You used platform-specific styles and flexbox in several of the examples in chapter 4. We didn’t cover them in detail, but you saw them in a few code listings.

This chapter expands on those topics. Transformations give you the power to manipulate components in two or three dimensions. You can translate components from one position to another, rotate components, scale components to different sizes, and skew components. Transforms are useful in their own right, but they will play a much bigger role in chapter 7, which discusses animation in detail.

5.1 Platform-specific sizes and styles

5.1.1 Pixels, points, and DPs

5.1.2 Creating drop shadows with ShadowPropTypesIOS and Elevation

5.1.3 Putting it into practice: drop shadows in the ProfileCard

5.2 Using transformations to move, rotate, scale, and skew components

5.2.1 3D effects with perspective

5.2.2 Moving elements along the x- and y-axes with translateX and translateY

5.2.3 Rotating elements with rotateX, rotateY, and rotateZ (rotate)

5.2.4 Setting visibility when rotating an element more than 90°

5.2.5 Scaling objects on the screen with scale, scaleX, and scaleY

5.2.6 Using the scale transform to create a thumbnail of the ProfileCard

5.2.7 Skewing elements along the x- and y-axes with skewX and skewY

5.2.8 Transformation key points

5.3 Using flexbox to lay out components

5.3.1 Altering a component’s dimensions with flex

5.3.2 Specifying the direction of the flex with flexDirection

5.3.3 Defining how space is used around a component with justifyContent

5.3.4 Aligning children in a container with alignItems

5.3.5 Overriding the parent container’s alignment with alignSelf

5.3.6 Preventing clipped items with flexWrap

Summary