concept alignitem in category react native

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

5.3.4 Aligning children in a container with alignItems

alignItems defines how to align children along the secondary axis of their container. This property is declared on the parent view and affects its flex children just as flexDirection did. There are four possible values for alignItems: stretch, center, flex-start, and flex-end.

stretch is the default, used in figures 5.17 and 5.18. Each example component is stretched to fill its parent container. Figure 5.19 revisits figure 5.16 and shows what happens with the other options: center, flex-start, and flex-end. Because a precise width isn’t specified for the example components, they only take up as much space horizontally as is necessary to render their contents rather than stretching to fill the space. In the first case, alignItems is set to 'center'. In the second case, alignItems is set to 'flex-start'. And last alignItems is set to 'flex-end'. Use listing 5.8 to change the alignments on each of the examples from listing 5.5.

Listing 5.8 Using non-default alignItems properties

render() {
  return (
    <View style={styles.container}>
      <View style={[styles.flexContainer,
                   {alignItems: 'center'}]}>    #1  
        <Example style={[styles.darkgrey]}>A 50%</Example>
        <Example>B 50%</Example>
      </View>
      <View style={[styles.flexContainer,
                   {alignItems: 'flex-start'}]}>    #2  
        <Example style={[styles.darkgrey]}>C 33%</Example>
        <Example style={{flex: 2}}>D 66%</Example>
      </View>
      <View style={[styles.flexContainer,
                   {alignItems: 'flex-end'}]}>    #3  
        <Example style={[styles.darkgrey]}>E 25%</Example>
        <Example style={{flex: 3}}>F 75%</Example>
      </View>
    </View>
  );
  }

#1   Changes the alignItems property to center
#2   Changes alignItems to flex-start
#3   Changes alignItems to flex-end


!@%STYLE%@!
{"css":"{\"css\": \"font-weight: bold;\"}","target":"[[{\"line\":4,\"ch\":19},{\"line\":4,\"ch\":41}],[{\"line\":9,\"ch\":19},{\"line\":9,\"ch\":45}],[{\"line\":14,\"ch\":19},{\"line\":14,\"ch\":43}]]"}
!@%STYLE%@!

copy

Now that you’ve seen how to use the other alignItems properties and their effects on the default column layout, why don’t you set flexDirection to 'row' and see what happens?

With alignSelf, you can access the alignItems property for individual elements within the container. In essence, alignSelf gives you the ability to override whatever alignment was set on the parent container, so a child object can be aligned independently of its peers. The available options are auto, stretch, center, flex-start, and flex-end. The default value is auto, which takes the value from the parent container’s alignItems setting. The remaining properties affect the layout in the same way as their corresponding properties on alignItems.

In figure 5.20, the parent container doesn’t have alignItems set, so it defaults to stretch. In the first example, the auto value inherits stretch from its parent container. The next four examples lay out exactly as you’d expect. The final example has no alignSelf property set, so it defaults to auto and is laid out the same as the first example.