Flexbox layout (flexDirection, justifyContent, alignItems) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the layout direction of this React Native Flexbox?

Consider this React Native style applied to a container:

{
  flexDirection: 'row'
}

How will the child elements be arranged visually?

React Native

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

export default function App() {
  return (
    <View style={{ flexDirection: 'row', borderWidth: 1, padding: 10 }}>
      <Text>A</Text>
      <Text>B</Text>
      <Text>C</Text>
    </View>
  );
}

A Children are arranged horizontally, side by side from left to right.

B Children are stacked vertically, one on top of another.

C Children overlap each other in the same position.

D Children are arranged in a grid with two columns.

💡 Hint

flexDirection controls the main axis direction of children.

In React Native Flexbox, flexDirection: 'row' arranges children horizontally from left to right.

❓ rendering

intermediate

How does justifyContent: 'space-between' affect child elements?

Given this style:

{
  flexDirection: 'row',
  justifyContent: 'space-between'
}

How will the children be spaced inside the container?

React Native

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

export default function App() {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between', borderWidth: 1, padding: 10 }}>
      <Text>A</Text>
      <Text>B</Text>
      <Text>C</Text>
    </View>
  );
}

A Children are centered with equal space around each child.

B Children are evenly spaced with equal space between them and edges.

C Children are grouped together at the start with no space between.

D Children are spaced so the first is at start, last at end, and equal space between others.

💡 Hint

justifyContent controls spacing along the main axis.

space-between places first child at start, last child at end, and equal space between children.

❓ rendering

advanced

What is the vertical alignment of children with alignItems: 'center'?

Given this style:

{
  flexDirection: 'row',
  alignItems: 'center',
  height: 100
}

How will the children be aligned vertically inside the container?

React Native

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

export default function App() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', height: 100, borderWidth: 1 }}>
      <Text style={{ fontSize: 20 }}>A</Text>
      <Text style={{ fontSize: 30 }}>B</Text>
      <Text style={{ fontSize: 40 }}>C</Text>
    </View>
  );
}

A Children are aligned at the bottom edge of the container.

B Children are vertically centered within the container.

C Children are aligned at the top edge of the container.

D Children stretch to fill the container height.

💡 Hint

alignItems controls alignment on the cross axis.

alignItems: 'center' centers children vertically when flexDirection is 'row'.

🧠 Conceptual

advanced

Which flexDirection value stacks children vertically from bottom to top?

In React Native Flexbox, which flexDirection value arranges children vertically but starts from the bottom going up?

A 'column-reverse'

B 'row'

C 'column'

D 'row-reverse'

💡 Hint

The '-reverse' suffix reverses the order along the main axis.

flexDirection: 'column-reverse' stacks children vertically but in reverse order, bottom to top.

❓ accessibility

expert

How to ensure keyboard navigation order matches visual order in reversed flexDirection?

If a container uses flexDirection: 'row-reverse' to visually reverse children order, what should you do to keep keyboard navigation logical and accessible?

A Use <code>accessibilityElementsHidden</code> on all children except the first.

B Wrap children in a <code>ScrollView</code> to fix navigation order.

C Manually set <code>tabIndex</code> or focus order to match visual order.

D No action needed; keyboard navigation automatically matches visual order.

💡 Hint

Visual order and keyboard order can differ when using reversed flex directions.

When using reversed flexDirection, keyboard navigation order may not match visual order, so manually setting focus order or tabIndex is needed for accessibility.