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.

Practice

1. What does the flexDirection property control in a React Native Flexbox layout?

easy

A. The border style of the container

B. The color of the container background

C. The main axis direction of child elements (row or column)

D. The font size of text inside the container

Solution

1. Step 1: Understand flexDirection role

   flexDirection sets whether children are laid out horizontally (row) or vertically (column).

2. Step 2: Compare options

   Only The main axis direction of child elements (row or column) describes this behavior correctly. Other options relate to unrelated styles.

3. Final Answer:

   The main axis direction of child elements (row or column) -> Option C

4. Quick Check:

   flexDirection controls layout direction [OK]

Hint: Remember: flexDirection sets row or column layout [OK]

Common Mistakes:

• Confusing flexDirection with justifyContent or alignItems
• Thinking flexDirection changes colors or fonts
• Assuming flexDirection controls spacing

2. Which of the following is the correct syntax to set a container's children to be arranged in a column in React Native?

easy

A. style={{flexDirection: 'row'}}

B. style={{flexDirection: 'column'}}

C. style={{justifyContent: 'column'}}

D. style={{alignItems: 'column'}}

Solution

1. Step 1: Identify correct property for layout direction

   The property to set layout direction is flexDirection.

2. Step 2: Check correct value for vertical layout

   To arrange children vertically, use value 'column'. style={{flexDirection: 'column'}} matches this exactly.

3. Final Answer:

   style={{flexDirection: 'column'}} -> Option B

4. Quick Check:

   flexDirection: 'column' sets vertical layout [OK]

Hint: Use flexDirection with 'row' or 'column' for layout [OK]

Common Mistakes:

• Using justifyContent or alignItems to set direction
• Using invalid values like 'column' for justifyContent
• Mixing quotes or syntax errors in style object

3. Given this React Native code snippet, what will be the horizontal alignment of the child boxes inside the container?

  <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'flex-start'}}>
    <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
  </View>

medium

A. Children are aligned to the left horizontally and centered vertically

B. Children are aligned to the right horizontally and stretched vertically

C. Children are spaced evenly horizontally and aligned at the bottom vertically

D. Children are centered horizontally and aligned at the top vertically

Solution

1. Step 1: Analyze flexDirection and justifyContent

   flexDirection: 'row' means children are laid out horizontally. justifyContent: 'center' centers children along this horizontal main axis.

2. Step 2: Analyze alignItems

   alignItems: 'flex-start' aligns children at the top along the vertical cross axis.

3. Final Answer:

   Children are centered horizontally and aligned at the top vertically -> Option D

4. Quick Check:

   Row + justifyContent center + alignItems flex-start = Children are centered horizontally and aligned at the top vertically [OK]

Hint: Remember: justifyContent aligns main axis, alignItems cross axis [OK]

Common Mistakes:

• Mixing up justifyContent and alignItems axes
• Assuming 'flex-start' aligns horizontally in row direction
• Ignoring flexDirection effect on axes

4. Identify the error in this React Native Flexbox style and fix it:

  <View style={{flexDirection: 'column', justifyContent: 'left', alignItems: 'center'}}>
    <Text>Hello</Text>
  </View>

medium

A. Change justifyContent: 'left' to justifyContent: 'flex-start'

B. Change flexDirection: 'column' to flexDirection: 'row'

C. Remove alignItems property

D. Change justifyContent: 'left' to justifyContent: 'center'

Solution

1. Step 1: Check valid values for justifyContent

   justifyContent accepts values like 'flex-start', 'center', 'flex-end', not 'left'. 'left' is invalid and causes error.

2. Step 2: Correct the invalid value

   Replace 'left' with 'flex-start' to align children at the start of the main axis.

3. Final Answer:

   Change justifyContent: 'left' to justifyContent: 'flex-start' -> Option A

4. Quick Check:

   Use 'flex-start' instead of 'left' for justifyContent [OK]

Hint: Use flex-start, center, flex-end for justifyContent values [OK]

Common Mistakes:

• Using 'left' or 'right' instead of flex-start/flex-end
• Confusing justifyContent with alignItems values
• Removing needed alignment properties

5. You want to create a React Native layout where three boxes are stacked vertically, spaced evenly with equal space above the first and below the last box, and all boxes aligned to the center horizontally. Which style properties should you use on the container?

hard

A. {flexDirection: 'column', justifyContent: 'space-around', alignItems: 'center'}

B. {flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start'}

C. {flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-end'}

D. {flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}

Solution

1. Step 1: Set vertical stacking

   Use flexDirection: 'column' to stack boxes vertically.

2. Step 2: Space boxes evenly with equal space around

   justifyContent: 'space-around' places equal space above, between, and below children.

3. Step 3: Center boxes horizontally

   alignItems: 'center' centers children along the horizontal cross axis.

4. Final Answer:

   {flexDirection: 'column', justifyContent: 'space-around', alignItems: 'center'} -> Option A

5. Quick Check:

   Column + space-around + center aligns as required [OK]

Hint: Use space-around for equal spacing above and below [OK]

Common Mistakes:

• Using flexDirection: 'row' for vertical stacking
• Using space-between which lacks space above first and below last
• Misaligning boxes horizontally with wrong alignItems