concept color in category react native

This is an excerpt from Manning's book React Native in Action. Login to get full access to this book.

Note that in the styling of headerText, you pass an rgba value to color. If you aren’t familiar with RGBA, the first three values make up the RGB color values, and the last value represents the alpha or opacity (red, blue, green, alpha). You pass in an alpha value of 0.25, or 25%. You also set the font weight to 100, which will give the text a thinner weight and look.

Listing 4.2 also shows how to specify multiple styles by supplying an array of style properties. Remember when doing this that the last style passed in will override the previous style if there’s a duplicate property. For example, if an array of styles like this is supplied, the last value for color will override all the previous values:

style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}

copy

In this example, the color will be red.

Figure 5.2 iOS-specific examples of how to apply ShadowPropTypesIOS styles to View components. Example 1 has a shadow applied but no opacity set, which causes the drop shadow to not be displayed. Example 2 has the same shadow effect but with opacity set to 1. Example 3 has a slightly larger shadow, and example 4 has the same size shadow with a shadow radius. Example 5 has the same shadow size, but opacity is changed from 1 to 0.2. Example 6 changes the color of the shadow. Example 7 shows the shadow applied in only one direction, and example 8 shows the shadow applied in the opposite direction.