Flexbox

Kamil Szymkowski
Unpacking React Native
2 min readJan 22, 2020

Flexbox is a set of CSS rules, which are used together to specify the layout of UI elements on the web. The flexbox implemented in React Native is indistinguishable from its web counterpart, with a few exceptions having to do with what values of particular properties are set as default.

UI Containers

React Native allows for 9 different types of UI containers.

<View>

The most fundamental component for building a UI style.

View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

<ScrollView>

All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen.

You can scroll both vertically and horizontally.

<FlatList>

The FlatList only renders elements that are currently showing on the screen, not all the elements at once.

Optional horizontal mode.

<SectionList>

Use it if you want to render a set of data broken into logical sections, maybe with section headers.

Like <FlatList>, the <SectionList> only render elements that are currently showing on the screen.

<VirtualizedList>

This should only really be used if you need more flexibility than FlatList provides.

Poorly documanted and less convenient to use.

<Modal>

The Modal component is a simple way to present content above an enclosing view.

<Alert>

Launches an alert dialog with the specified title and message.

<SaveAreaView>

<SaveAreaView> automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views on iOS devices with iOS version 11 or later. Moreover, Safe Area’s paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

<KeyboardAvoidingView>

<KeyboardAvoidingView> automatically adjust either its height, position, or bottom padding to make space for the keyboard.

Children Alignment

Children Size

flex

The flex property is applied to the container’s children to specify what proportion of available space should they occupy.

flexGrow

flexShrink

flexBasis

--

--