Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (How To Control Component Size In React Native ?).
In this note series, we will learn how to control component size in React Native. A component’s height and width determine its size on the screen.
So Let’s begin.
Fixed Dimensions
The general way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless and represent density-independent pixels.
Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.
The Preview of the above example is :
Flex Dimensions
We use flex in a component’s style to have the component expand and shrink dynamically based on available space. Normally we will use flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
Flex Dimensions
import React from 'react';
import { View } from 'react-native';
const FlexDimensionsBasics = () => {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
};
export default FlexDimensionsBasics;
The Preview of the above example is :
Conclusion
In this note series, we understood how to control component size in React Native. This note series showed Fixed Dimensions and Flex Dimensions to control the component size in react native.
Thanks for reading! I hope you enjoyed and learned about Fixed Dimensions and Flex Dimensions concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (Understanding Flexbox Layout).
In this article, we will learn about Flexbox layout in React Native. We will discuss the different props of Flexbox layout for styling a component in React Native.
A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. We will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.
A famous quote about learning is :
” Wisdom is not a product of schooling but of the lifelong attempt to acquire it. “
So Let’s begin.
1. flex
” flex will define how our items are going to “fill” over the available space along our main axis. Space will be divided according to each element’s flex property.“
In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga.
When flex is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1. flex: <positive number> equates to flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.
When flex is 0, the component is sized according to width and height, and it is inflexible.
When flex is -1, the component is normally sized according to width and height. However, if there’s not enough space, the component will shrink to its minWidth and minHeight.
flexGrow, flexShrink, and flexBasis work the same as in CSS.
In the following example, the red, yellow, and green views are all children in the container view that has flex: 1 set. The red view uses flex: 1 , the yellow view uses flex: 2, and the green view uses flex: 3 . 1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.
2. flexDirection
‘column’/’column-reverse’/’row’/’row-reverse’
Defines the direction of the main axis. Opposite to the web, React Native default flexDirection is column which makes sense, most mobile apps much more vertically oriented.
Determines the distribution of children along the primary axis. justifyContent describes how to align children within the main axis of their container (parent container). The default value is flex-start.
4. alignItems
‘flex-start’, ‘flex-end’, ‘center’, ‘stretch‘
Align items along the cross axis. So in a default view, it will control the horizontal alignment of items. alignItems describes how to align children along the cross axis of their container (parent container). alignItems is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis. The default value is stretch.
For instance, if the parent has a flexDirection set to row. Then the opposite axis is the column. The alignItems will then align the children based on the value provided in vertical(column) axis.
Align an item along the cross axisoverwriting his parent alignItem property. alignSelf can apply the property to a single child within a parent element, instead of applying it to all the children.
alignSelfhas the same options and effect as alignItems but instead of affecting the children within a container, we can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems. The default value is auto.
6. flexWrap
‘wrap’, ‘nowrap’, ‘wrap-reverse’
Controls whether flex items are forced on a single line or can be wrapped on multiple lines. The default value is nowrap.
Defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using flexWrap. The default value is flex-start.
8. position
‘relative’/’absolute’
The position type of an element defines how it is positioned within its parent.
position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
If we want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
If we want to position a child relative to something that is not its parent, don’t use styles for that. Use the component tree.
For example, Think of our container as a line of people. And we are telling each person to stand 5 meters behind the person in front of him (marginTop: 5). If this person is set to relative he will respect the line and will position himself relatively to the person in front of him. If this person is set to absolute he will ignore all of the people in the line and will position himself as if the line was empty, 5 meters from where the line (his parent container) starts.
9. zIndex
zIndex controls which components display on top of others. Normally, we don’t use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if we have animations or custom modal interfaces where we don’t want this behavior.
It works like the CSS z-index property – components with a larger zIndex will render on top. Think of the z-direction like it’s pointing from the phone into our eyeball.
On iOS, zIndex may require Views to be siblings of each other for it to work as expected.
In the following example the zIndex of the yellow square to 1.
10. Flex Basis, Grow, and Shrink
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children. flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s flexGrow values.
flexShrinkdescribes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed. flexShrink accepts any floating point value >= 0, with 1 being the default value. A container will shrink its children weighted by the children’s flexShrink values.
flexBasis is an axis-independent way of providing the default size of an item along the main axis. Setting the flexBasis of a child is similar to setting the width of that child if its parent is a container with flexDirection: row or setting the height of a child if its parent is a container with flexDirection: column. The flexBasis of an item is the default size of that item, the size of the item before any flexGrow and flexShrink calculations are performed.
11. Width and Height
The width property specifies the width of an element’s content area. Similarly, the height property specifies the height of an element’s content area.
Both width and height can take the following values:
auto (default value) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
pixels Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
percentage Defines the width or height in percentage of its parent’s width or height, respectively.
That’s all about in this article.
Conclusion
In this article, We understood about Flexbox layout in React Native. We also discussed the different basic props of Flexbox layout for styling a component in React Native.
Thanks for reading ! I hope you enjoyed and learned about the Flexbox layout concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
