Flex vs flexGrow vs flexShrink vs flexBasis in React Native?

Flexbox Layout and Properties in React Native

In React Native, layout is implemented using Flexbox layout technology. This approach primarily controls component size and positioning through properties such as flex, flexGrow, flexShrink, and flexBasis. Below is a detailed comparison of these properties.

1. flex

The flex property serves as a shorthand for flexGrow, flexShrink, and flexBasis. It accepts one to three values to define component expansion, contraction behavior, and base size.

• When a single value is provided, it applies to flexGrow, with flexShrink defaulting to 1 and flexBasis defaulting to 0%.
• When two values are provided, the first sets flexGrow and the second sets flexShrink, while flexBasis remains at 0%.
• When three values are provided, they correspond directly to flexGrow, flexShrink, and flexBasis respectively.

For example, flex: 1 indicates the component expands to fill remaining space, with a shrink factor of 1 and a base size of 0%.

2. flexGrow

The flexGrow property determines how a component expands within the parent container's remaining space. Its default value is 0, meaning the component does not consume additional space if available.

For example, in a container with two child components—one set to flexGrow: 1 and the other with no or zero value—the component with flexGrow: 1 occupies all remaining space.

3. flexShrink

The flexShrink property defines the component's contraction ratio when space is insufficient. The default value is 1, indicating the component shrinks proportionally to fit the parent container.

For example, if the parent container cannot accommodate all child components, the component with flexShrink: 1 reduces its size accordingly.

4. flexBasis

The flexBasis property specifies the component's default size before scaling. It can take specific values like 10%, 50px, or auto (which adapts based on content size). The default value is auto.

For example, setting flexBasis: 100px ensures the component maintains a 100px size before scaling, then adjusts based on flexGrow and flexShrink.

Example Application Scenario

Consider a horizontally arranged container with three child elements: the first should have a fixed width of 100px, the second should fill the remaining space, and the third should display its content size. This can be implemented as follows:

jsx
<View style={{ flexDirection: 'row', height: 50 }}>
  <View style={{ width: 100, backgroundColor: 'red' }} />
  <View style={{ flex: 1, backgroundColor: 'green' }} />
  <View style={{ flexBasis: 'auto', backgroundColor: 'blue' }} />
</View>

Here, the first element uses a fixed width for layout, the second element fills remaining space via flex: 1, and the third element maintains content width using `flexBasis: 'auto'.

Conclusion

By appropriately utilizing flex, flexGrow, flexShrink, and flexBasis, developers can achieve complex layout requirements, ensuring interfaces maintain optimal layout performance across various screen sizes and orientations.