concept parent container in category react native

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

Figure 4.10 Examples of applying margins to components. In iOS, example A has no margins applied. Example B has a top margin applied. Example C has top and left margins. Example D has both negative top and negative left margins. In Android, negative margins behave a bit differently: the component is clipped by the parent container.

If you have a View element with a height of 300 and a width of 300, and a child View element with a property of flex: 1, then the child view will completely fill the parent view. If you decide to add another child element with a flex property of flex: 1, each view will take up equal space in the parent container. The flex number is only important relative to the other flex items occupying the same space.

5.3.5 Overriding the parent container’s alignment with alignSelf

Figure 5.20 How each alignSelf property affects the layout when its parent container’s alignItems property is set to the default value of stretch

So far, all the flex properties have been applied to the parent container. alignSelf is applied directly to an individual flex child.

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.

Listing 5.9 Using alignSelf to override the parent’s alignItems

import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';

export default class App extends Component<{}> {
    render() {
        return (
            <View style={styles.container}>
                <FlexContainer style={[]}>
                    <Example align='auto'>auto</Example>    #1  
                    <Example align='stretch'>stretch</Example>    #2  
                    <Example align='center'>center</Example>    #3  
                    <Example align='flex-start'>flex-start</Example>    #4  
                    <Example align='flex-end'>flex-end</Example>    #5  
                    <Example>default</Example>    #6  
                </FlexContainer>
            </View>
        );
    }
}

const FlexContainer = (props) => (
    <View style={[styles.flexContainer,props.style]}>
        {props.children}
    </View>
);

const Example = (props) => (
    <View style={[styles.example,
                  styles.lightgrey,
                  {alignSelf: props.align || 'auto'},    #7  
                  props.style
    ]}>
        <Text>
            {props.children}
        </Text>
    </View>
);

const styles = StyleSheet.create({
    container: {
        marginTop: 50,
        alignItems: 'center',
        flex: 1
    },
    flexContainer: {
        backgroundColor: '#ededed',
        width: 120,
        height: 180,
        borderWidth: 1,
        margin: 10
    },
    example: {
        height: 25,
        marginBottom: 5,
        backgroundColor: '#666666'
    },
});

#1   Sets alignSelf to auto, which picks up the parent container’s value of stretch
#2   Sets alignSelf explicitly to stretch
#3   Sets alignSelf to center
#4   Sets alignSelf to flex-start
#5   Sets alignSelf to flex-end
#6   The default value for alignSelf is auto.
#7   Uses the align property to set the Example component’s alignItems style


!@%STYLE%@!
{"css":"{\"css\": \"font-weight: bold;\"}","target":"[[{\"line\":8,\"ch\":29},{\"line\":8,\"ch\":41}],[{\"line\":9,\"ch\":29},{\"line\":9,\"ch\":44}],[{\"line\":10,\"ch\":29},{\"line\":10,\"ch\":43}],[{\"line\":11,\"ch\":29},{\"line\":11,\"ch\":47}],[{\"line\":12,\"ch\":29},{\"line\":12,\"ch\":45}],[{\"line\":29,\"ch\":18},{\"line\":29,\"ch\":52}]]"}
!@%STYLE%@!

copy