concept margin in category react native

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

Pay particular attention to the style that centers the text. You got lucky by using margin: 10. If you used padding: 10, the background of the text component would occlude the underlying border stroke of the View component (see figure 4.7).

Figure 4.7 This is what figure 4.6 would look like if the centeredText style used padding: 10 instead of margin: 10 to position the text. The small circles highlight the points at which the bounding box of the Text component overlaps the border of the View component.

By default, a Text component inherits the background color of its parent component. Because the bounding box of the Text component is a rectangle, the background overlaps the nice rounded corners. Obviously, using the margin property solves the problem, but it’s also possible to remedy the situation another way. You could add backgroundColor: 'transparent' to the centeredText style. Making the text component’s background transparent allows the underlying border to show through and look normal again, as in figure 4.6.

You can think of margins as the distance between elements, but padding represents the space between the content of the element and the border of the same element. When padding is specified, it allows the content of the component to not be flush against the border. In figure 4.9, the backgroundColor property bleeds through the component’s edges up to the border, which is the space defined by padding. The available properties available for padding are padding, paddingLeft, paddingRight, paddingTop, and paddingBottom. If only the main padding property is set without another, more-specific value such as paddingLeft or paddingTop, then that value is passed to all sides of the component (top, right, bottom, and left). If both padding and a more-specific padding property are specified, such as paddingLeft, then the more-specific padding property takes precedence. This behavior is exactly like borders and margins.

Rather than create a new example to show how padding is different than margins, let’s reuse the code from listing 4.11 and make a few tweaks. Change the margin styles on the example components to padding styles, and add a border around the Text components and change their background color. Figure 4.11 shows what you’ll end up with.

Listing 4.12 Modifying listing 4.11 to replace margins with padding

import React, { Component } from 'react';

...

       <View style={styles.container}>
        <View style={styles.exampleContainer}>
           <Example style={{}}>    #1  
               <CenteredText>A</CenteredText>
            </Example>
        </View>
        <View style={styles.exampleContainer}>
            <Example style={{paddingTop: 50}}>    #2  
                <CenteredText>B</CenteredText>
            </Example>
        </View>
        <View style={styles.exampleContainer}>
            <Example style={{paddingTop: 50, paddingLeft: 10}}>    #3  
                <CenteredText>C</CenteredText>
            </Example>
        </View>
        <View style={styles.exampleContainer}>
            <Example style={{paddingLeft: -10, paddingTop: -10}}>    #4  
                <CenteredText>D</CenteredText>
            </Example>
        </View>
    </View>

...

    },
    centeredText: {
       textAlign: 'center',
       margin: 10,
       borderWidth: 1,    #5  
       backgroundColor: 'lightgrey'
    }
});

#1   Example A: unchanged, with no margins or padding
#2   Example B: marginTop changed to paddingTop
#3   Example C: marginTop and marginLeft changed to paddingTop and paddingLeft, respectively
#4   Example D: marginLeft and marginTop changed to paddingLeft and marginTop, respectively. The negative values remain.
#5   Adds a border and background color to the Text component


!@%STYLE%@!
{"css":"{\"css\": \"font-weight: bold;\"}","target":"[[{\"line\":11,\"ch\":29},{\"line\":11,\"ch\":39}],[{\"line\":16,\"ch\":29},{\"line\":16,\"ch\":39}],[{\"line\":21,\"ch\":47},{\"line\":21,\"ch\":57}],[{\"line\":39,\"ch\":36},{\"line\":39,\"ch\":46}],[{\"line\":40,\"ch\":51},{\"line\":40,\"ch\":61}],[{\"line\":11,\"ch\":29},{\"line\":11,\"ch\":39}],[{\"line\":16,\"ch\":29},{\"line\":16,\"ch\":39}],[{\"line\":21,\"ch\":47},{\"line\":21,\"ch\":57}],[{\"line\":39,\"ch\":36},{\"line\":39,\"ch\":46}],[{\"line\":40,\"ch\":51},{\"line\":40,\"ch\":61}],[{\"line\":16,\"ch\":45},{\"line\":16,\"ch\":56}],[{\"line\":21,\"ch\":29},{\"line\":21,\"ch\":40}],[{\"line\":40,\"ch\":66},{\"line\":40,\"ch\":77}],[{\"line\":41,\"ch\":51},{\"line\":41,\"ch\":62}],[{\"line\":16,\"ch\":45},{\"line\":16,\"ch\":56}],[{\"line\":21,\"ch\":29},{\"line\":21,\"ch\":40}],[{\"line\":40,\"ch\":66},{\"line\":40,\"ch\":77}],[{\"line\":41,\"ch\":51},{\"line\":41,\"ch\":62}],[{\"line\":11,\"ch\":29},{\"line\":11,\"ch\":39}],[{\"line\":16,\"ch\":29},{\"line\":16,\"ch\":39}],[{\"line\":21,\"ch\":47},{\"line\":21,\"ch\":57}],[{\"line\":39,\"ch\":36},{\"line\":39,\"ch\":46}],[{\"line\":40,\"ch\":51},{\"line\":40,\"ch\":61}],[{\"line\":33,\"ch\":7},{\"line\":33,\"ch\":22}],[{\"line\":34,\"ch\":7},{\"line\":34,\"ch\":35}]]"}
!@%STYLE%@!

copy

Figure 4.11 Changing the margin styles from the previous example to padding styles. Example A, with no padding, looks the same as when no margins are applied. Example B shows the component with paddingTop applied. Example C is the same, but it also applies paddingLeft. Example D applies negative padding values to paddingTop and paddingLeft, which are ignored.

Unlike margins, which specify the space between the component and its parent component, padding applies from the border of the component to its children. In example B, padding is calculated from the top border, which pushes the Text component B down from the top border. Example C adds a paddingLeft value, which also pushes the Text component C inward from the left border. Example D applies negative padding values to paddingTop and paddingLeft.

In listing 4.13, the flexDirection property is specified as 'row', so the blocks are in a row across the screen. React Native uses an open source, cross-platform layout library called Yoga (https://yogalayout.com). Yoga implements the flexbox layout mode, which you often see in CSS and is used frequently in React Native. We’ll spend a lot of time in the next chapter talking about flexbox. Margins, padding, and position are all great layout tools, but flexbox is the tool you’ll use most often.