Working with Flex Direction, Alignment, and Justification in React Native

Course: React Native Training

Topic: Working with Flex Direction, Alignment, and Justification

Course Link: React Native Training Course

Demo Link: Register for a Course Demo

Training Institute: JustAcademy Official Website

1. Introduction to Flexbox in React Native

Flexbox is the primary layout system used in React Native to arrange components inside their parent containers. It helps developers position elements horizontally or vertically, align items, distribute available space, and build responsive interfaces for different screen sizes.

In React Native, three important Flexbox properties are flexDirection, justifyContent, and alignItems. Together, they control the direction of child elements and how those elements are positioned within a container.

React Native Flexbox is similar to CSS Flexbox, but some defaults differ. In React Native, flexDirection defaults to column, so children are arranged vertically unless you specify another direction. Read the official React Native Flexbox documentation.

1.1 What Is Flexbox?

Flexbox is a layout model that arranges child elements along two axes:

• Main axis: The direction in which children are arranged.
• Cross axis: The direction perpendicular to the main axis.

The main axis depends on the value of flexDirection. When the direction is row, the main axis is horizontal. When the direction is column, the main axis is vertical.

1.2 Learning Objectives

• Understand the fundamentals of Flexbox in React Native.
• Learn the four flexDirection values.
• Understand main-axis and cross-axis alignment.
• Use justifyContent to position and distribute children.
• Use alignItems to align children across the cross axis.
• Understand alignSelf, alignContent, flexWrap, and gap.
• Combine Flexbox properties using StyleSheet.create().
• Build responsive layouts for cards, forms, navigation bars, and screens.
• Identify and troubleshoot common alignment problems.

2. Understanding the Main Axis and Cross Axis

Before learning individual properties, it is important to understand how Flexbox determines the main axis and cross axis.

2.1 Main Axis

The main axis is determined by flexDirection. It is the direction in which the children are laid out.

• With flexDirection: 'row', the main axis runs horizontally.
• With flexDirection: 'column', the main axis runs vertically.

2.2 Cross Axis

The cross axis runs perpendicular to the main axis.

• For a row layout, the cross axis is vertical.
• For a column layout, the cross axis is horizontal.

2.3 Main Axis and Cross Axis Comparison

2.4 The Difference Between justifyContent and alignItems

The most important rule to remember is that justifyContent works along the main axis, while alignItems works along the cross axis.

For example, with flexDirection: 'row', justifyContent positions items horizontally and alignItems positions them vertically. With flexDirection: 'column', justifyContent positions items vertically and alignItems positions them horizontally.

3. Understanding flexDirection

The flexDirection property determines the direction in which the children of a container are arranged.

3.1 Syntax

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row'
  }
});

Apply the style to a parent View to control the layout direction of its children.

3.2 The Four flexDirection Values

3.3 Using flexDirection: column

The column direction stacks elements vertically. It is the default direction in React Native.

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

export default function ColumnExample() {
  return (
    <View style={styles.container}>
      <View style={[styles.box, styles.boxOne]}>
        <Text>First</Text>
      </View>
      <View style={[styles.box, styles.boxTwo]}>
        <Text>Second</Text>
      </View>
      <View style={[styles.box, styles.boxThree]}>
        <Text>Third</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    flexDirection: 'column'
  },
  box: {
    width: 120,
    height: 60,
    marginBottom: 10,
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxOne: {
    backgroundColor: '#BBDEFB'
  },
  boxTwo: {
    backgroundColor: '#90CAF9'
  },
  boxThree: {
    backgroundColor: '#64B5F6'
  }
});

Explanation: The three boxes appear one below another because the parent container uses flexDirection: 'column'.

3.4 Using flexDirection: row

The row direction arranges child elements horizontally along the main axis.

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

export default function RowExample() {
  return (
    <View style={styles.container}>
      <View style={[styles.box, styles.boxOne]}>
        <Text>One</Text>
      </View>
      <View style={[styles.box, styles.boxTwo]}>
        <Text>Two</Text>
      </View>
      <View style={[styles.box, styles.boxThree]}>
        <Text>Three</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 20,
    alignItems: 'center'
  },
  box: {
    width: 80,
    height: 60,
    marginRight: 10,
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxOne: {
    backgroundColor: '#BBDEFB'
  },
  boxTwo: {
    backgroundColor: '#90CAF9'
  },
  boxThree: {
    backgroundColor: '#64B5F6'
  }
});

Explanation: The boxes appear side by side because the parent uses flexDirection: 'row'. The alignItems property centers the boxes along the vertical cross axis.

3.5 Using flexDirection: row-reverse

The row-reverse value reverses the main-axis arrangement compared with row. It is useful for specialized layouts, although right-to-left languages and internationalized interfaces should be designed with layout direction in mind.

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row-reverse',
    alignItems: 'center'
  }
});

3.6 Using flexDirection: column-reverse

The column-reverse value arranges children in reverse vertical order.

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column-reverse'
  }
});

Use reverse directions only when the visual ordering is intentional. Changing visual order does not change the order in which children are declared in the component's source code, so consider accessibility and interaction expectations.

3.7 When Should You Use Each Direction?

• Use column for login forms, settings screens, and vertical sections.
• Use row for horizontal button groups, icon-and-text layouts, and toolbars.
• Use row-reverse or column-reverse only when the reversed visual arrangement is appropriate.

4. Understanding justifyContent

The justifyContent property aligns or distributes children along the main axis of a Flexbox container.

Its effect depends on the value of flexDirection. For a row, it affects horizontal placement. For a column, it affects vertical placement.

4.1 Syntax

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center'
  }
});

4.2 Common justifyContent Values

4.3 Using justifyContent: flex-start

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'flex-start'
  }
});

Children are placed at the beginning of the main axis. In a normal left-to-right row layout, they start from the left side of the container.

4.4 Using justifyContent: flex-end

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'flex-end'
  }
});

Children are placed at the end of the main axis. In a normal left-to-right row, they move toward the right side of the container.

4.5 Using justifyContent: center

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center'
  }
});

Children are grouped in the center of the main axis. If the main axis is horizontal, the group is horizontally centered. If the main axis is vertical, the group is vertically centered.

4.6 Using justifyContent: space-between

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

The first child is placed at the start and the last child at the end. Any available remaining space is distributed between adjacent children.

This property is often useful for placing a screen title on one side and an action button on the other.

4.7 Using justifyContent: space-around

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around'
  }
});

Each child receives space around it. The spaces at the two outer edges are half the size of the spaces between neighboring items when the remaining space is distributed evenly.

4.8 Using justifyContent: space-evenly

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-evenly'
  }
});

The remaining space is distributed evenly between items and at the beginning and end of the container.

4.9 Important Note About Available Space

Spacing values such as space-between, space-around, and space-evenly are most noticeable when the container has extra space along its main axis. If the children fill the container or the container has no extra space, the result may look different from what you expect.

5. Understanding alignItems

The alignItems property aligns children along the cross axis of the parent container. It is often used with justifyContent to control both dimensions of a layout.

5.1 Syntax

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center'
  }
});

5.2 Common alignItems Values

5.3 Using alignItems: flex-start

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'flex-start'
  }
});

In a row layout, children align toward the top of the cross axis. In a column layout, they align toward the cross-axis start, which is normally the left side in a left-to-right layout.

5.4 Using alignItems: flex-end

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'flex-end'
  }
});

In a row layout, children align toward the bottom of the cross axis. In a column layout, they align toward the cross-axis end.

5.5 Using alignItems: center

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center'
  }
});

When flexDirection is row, children are vertically centered. When flexDirection is column, children are horizontally centered.

5.6 Using alignItems: stretch

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    alignItems: 'stretch'
  },
  child: {
    padding: 12
  }
});

The child can stretch across the container's cross axis when it does not have a fixed width in a column layout. If the child already has a fixed width, stretch may not change its width.

5.7 Using alignItems: baseline

The baseline value aligns children according to their text baselines. It can be useful when text elements have different font sizes and should appear aligned along the same text line.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'baseline'
  },
  smallText: {
    fontSize: 14
  },
  largeText: {
    fontSize: 28,
    fontWeight: 'bold'
  }
});

6. Combining flexDirection, justifyContent, and alignItems

These three properties work together to control a container's layout. Understanding their relationship is one of the most important skills in React Native UI development.

6.1 Example: Centering a Component in Both Directions

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

export default function CenteredScreen() {
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <Text style={styles.title}>Welcome</Text>
        <Text>Your content is centered.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#F2F4F7'
  },
  card: {
    padding: 24,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    alignItems: 'center'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10
  }
});

Explanation:

• flex: 1 allows the outer container to fill the available space offered by its parent.
• flexDirection: 'column' makes the main axis vertical.
• justifyContent: 'center' centers the card vertically along the main axis.
• alignItems: 'center' centers the card horizontally along the cross axis.
• The card uses its own alignItems property to center its internal content.

6.2 Example: Horizontal Navigation Bar

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

export default function NavigationBar() {
  return (
    <View style={styles.navbar}>
      <Text style={styles.brand}>MyApp</Text>
      <Text style={styles.action}>Profile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  navbar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 14,
    backgroundColor: '#1565C0'
  },
  brand: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#FFFFFF'
  },
  action: {
    fontSize: 16,
    color: '#FFFFFF'
  }
});

Explanation: The row direction places the brand and profile label side by side. space-between moves them toward opposite ends, while alignItems centers them vertically.

6.3 Example: Vertical Login Form

const styles = StyleSheet.create({
  form: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'stretch',
    padding: 20
  },
  field: {
    marginBottom: 16
  },
  button: {
    alignSelf: 'flex-end'
  }
});

This layout stacks form fields vertically, allows them to stretch across the available width when appropriate, and places the button at the cross-axis end.

7. Understanding alignSelf

The alignSelf property controls the cross-axis alignment of an individual child. It overrides the parent's alignItems setting for that child.

7.1 Example

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

export default function AlignSelfExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.item}>Default alignment</Text>
      <Text style={[styles.item, styles.centered]}>
        Centered item
      </Text>
      <Text style={[styles.item, styles.end]}>
        End-aligned item
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'flex-start'
  },
  item: {
    padding: 12,
    marginBottom: 10,
    backgroundColor: '#BBDEFB'
  },
  centered: {
    alignSelf: 'center'
  },
  end: {
    alignSelf: 'flex-end'
  }
});

7.2 Common alignSelf Values

• auto — uses the parent's alignItems behavior.
• flex-start — aligns the child at the start of the cross axis.
• flex-end — aligns the child at the end of the cross axis.
• center — centers the child along the cross axis.
• stretch — stretches the child when its cross-axis size allows it.

Use alignSelf when only one child needs different alignment. If all children need the same alignment, adjust the parent's alignItems property instead.

8. Understanding alignContent

The alignContent property controls the distribution of multiple rows or columns of wrapped children along the cross axis. It is most useful when flexWrap is enabled and children occupy more than one line.

8.1 Example Using flexWrap

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

const items = ['One', 'Two', 'Three', 'Four', 'Five', 'Six'];

export default function WrappedItems() {
  return (
    <View style={styles.container}>
      {items.map((item) => (
        <Text key={item} style={styles.item}>
          {item}
        </Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 220,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignContent: 'space-between',
    justifyContent: 'space-around',
    padding: 10,
    backgroundColor: '#F2F4F7'
  },
  item: {
    width: 90,
    padding: 12,
    margin: 4,
    textAlign: 'center',
    backgroundColor: '#BBDEFB'
  }
});

Explanation: flexWrap allows the items to form multiple rows when they do not fit on a single line. justifyContent distributes children along each row's main axis, while alignContent distributes the wrapped lines along the cross axis.

8.2 Common alignContent Values

Important: alignContent is not the same as alignItems. alignItems aligns individual children within a line, whereas alignContent distributes multiple lines across the cross axis.

9. Using flexWrap and Gap

Flexbox layouts sometimes need to wrap child elements onto multiple rows or columns. The flexWrap property controls whether children remain on one line or can wrap when space is insufficient.

9.1 flexWrap Values

• nowrap — keeps children on a single line, which is the default.
• wrap — allows children to move onto additional lines.
• wrap-reverse — wraps children in the reverse cross-axis direction.

9.2 Example: Wrapping Category Buttons

const styles = StyleSheet.create({
  categories: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
    padding: 16
  },
  category: {
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 20,
    backgroundColor: '#E3F2FD'
  }
});

The gap property creates spacing between items without requiring a margin on each child. React Native also supports rowGap and columnGap in supported versions and environments. Check the documentation for the React Native version used by your project.

9.3 Difference Between Gap and Margin

10. Understanding flex and Available Space

The flex property helps children share the available space along the main axis. It is useful when building layouts where elements should expand proportionally instead of relying only on fixed dimensions.

10.1 Example: Equal-Width Columns

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

export default function EqualColumns() {
  return (
    <View style={styles.container}>
      <View style={[styles.column, styles.first]}>
        <Text>Column 1</Text>
      </View>
      <View style={[styles.column, styles.second]}>
        <Text>Column 2</Text>
      </View>
      <View style={[styles.column, styles.third]}>
        <Text>Column 3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    gap: 8,
    padding: 12
  },
  column: {
    flex: 1,
    padding: 12,
    alignItems: 'center'
  },
  first: {
    backgroundColor: '#BBDEFB'
  },
  second: {
    backgroundColor: '#90CAF9'
  },
  third: {
    backgroundColor: '#64B5F6'
  }
});

Each column uses flex: 1, allowing the available horizontal space to be shared equally, after accounting for other layout constraints such as padding and gap.

10.2 Example: Unequal Space Distribution

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row'
  },
  small: {
    flex: 1
  },
  medium: {
    flex: 2
  },
  large: {
    flex: 3
  }
});

When the children are able to grow along the main axis, the flex values create a relative distribution of available space. The exact rendered sizes also depend on constraints and other layout properties.

11. Flexbox Layout Examples for Real Applications

11.1 Example: Profile Header

A profile header often places an avatar beside a name and description.

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

export default function ProfileHeader() {
  return (
    <View style={styles.container}>
      <View style={styles.avatar}>
        <Text style={styles.avatarText}>A</Text>
      </View>
      <View style={styles.details}>
        <Text style={styles.name}>Alex Morgan</Text>
        <Text style={styles.description}>
          React Native Developer
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    gap: 12
  },
  avatar: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#1565C0',
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarText: {
    fontSize: 22,
    color: '#FFFFFF',
    fontWeight: 'bold'
  },
  details: {
    flex: 1,
    flexDirection: 'column'
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  description: {
    fontSize: 14,
    color: '#626262',
    marginTop: 4
  }
});

This layout uses a horizontal row for the avatar and details, then a vertical column for the name and description.

11.2 Example: Card with a Bottom-Aligned Button

const styles = StyleSheet.create({
  card: {
    minHeight: 220,
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    justifyContent: 'space-between'
  },
  cardContent: {
    gap: 8
  },
  actionRow: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  }
});

When the card has sufficient height, space-between places the content group and action row toward opposite ends of the main axis. Avoid fixed heights when the content may vary significantly or require text scaling.

11.3 Example: Centered Loading Message

const styles = StyleSheet.create({
  loadingScreen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  loadingText: {
    marginTop: 12,
    fontSize: 16,
    color: '#555555'
  }
});

This pattern is commonly used to center a loading indicator and its message within the available screen area.

11.4 Example: Footer Actions

const styles = StyleSheet.create({
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#E0E0E0'
  }
});

This arrangement works well for footer actions placed at opposite ends of a row.

12. Responsive Layouts and Screen Sizes

React Native applications run on devices with different dimensions and aspect ratios. Flexbox makes it possible to create layouts that adapt to the space available rather than relying exclusively on fixed widths and heights.

12.1 Use flex Instead of Unnecessary Fixed Dimensions

For example, using flex: 1 for a content area can allow it to fill available space while a header and footer occupy only the space they need.

const styles = StyleSheet.create({
  screen: {
    flex: 1
  },
  header: {
    padding: 16
  },
  content: {
    flex: 1,
    padding: 16
  },
  footer: {
    padding: 16
  }
});

12.2 Adjusting Layout Based on Window Width

The useWindowDimensions hook provides current window dimensions and updates when the window size changes.

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

export default function ResponsiveLayout() {
  const { width } = useWindowDimensions();
  const isWide = width >= 600;

  return (
    <View style={[
      styles.container,
      isWide && styles.wideContainer
    ]}>
      <View style={styles.card}>
        <Text style={styles.title}>
          {isWide ? 'Wide Layout' : 'Compact Layout'}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  wideContainer: {
    paddingHorizontal: 40,
    alignItems: 'center'
  },
  card: {
    width: '100%',
    maxWidth: 600,
    padding: 20,
    backgroundColor: '#FFFFFF',
    borderRadius: 12
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold'
  }
});

The width threshold is only an example. Choose breakpoints according to your design and test the layout with different device sizes, text lengths, and orientations.

12.3 Responsive Layout Best Practices

• Prefer flexible sizing for main content regions.
• Use padding and gap for consistent spacing.
• Prevent text from being clipped when it wraps onto multiple lines.
• Test layouts in portrait and landscape when both are supported.
• Consider accessibility font scaling and translated text.
• Use ScrollView or FlatList when content may exceed the available screen height.

13. Common Flexbox Mistakes and Troubleshooting

13.1 Confusing justifyContent with alignItems

Problem: A developer expects justifyContent to center a child horizontally, but the child moves vertically.

Cause: The parent uses flexDirection: 'column', so the main axis is vertical.

Solution: Check the parent's flexDirection first. Remember that justifyContent follows the main axis and alignItems follows the cross axis.

13.2 Forgetting the Parent's Available Space

Problem: A child does not move to the center even though justifyContent is set to center.

Cause: The parent may not have extra space along the main axis.

Solution: Check the parent dimensions and layout. A screen container often needs flex: 1 so it can occupy available space.

13.3 alignItems: stretch Does Not Work

Problem: A child does not stretch across the container.

Cause: The child has a fixed dimension on the cross axis, or the parent does not have the expected available space.

Solution: Review the child's width or height and remove fixed cross-axis dimensions if stretching is desired.

13.4 Children Overflow Horizontally

Problem: Items extend beyond the screen width.

Possible causes: Fixed widths, excessive margins, long text, or too many children in a row.

Solution: Use flexible sizing, consider flexWrap, adjust gap and padding, and test with longer content.

13.5 space-between Does Not Create Visible Gaps

Problem: Items appear close together despite using space-between.

Cause: There may be little or no remaining space along the main axis.

Solution: Check the parent dimensions and the children's total size. If you need a fixed gap between adjacent children, use the gap property where supported.

13.6 Incorrect Use of alignContent

Problem: alignContent does not change the position of individual items.

Cause: alignContent distributes wrapped lines rather than individual children.

Solution: Use alignItems to align individual children within a line and use alignContent when multiple wrapped lines need to be distributed across the cross axis.

13.7 Unexpected Reverse Ordering

Problem: Items appear in the opposite order from their source order.

Cause: The container uses row-reverse or column-reverse.

Solution: Confirm that reverse ordering is intentional and test navigation, reading order, and accessibility behavior.

14. Best Practices for Flexbox Layouts

1. Understand the axes: Identify the main axis and cross axis before choosing alignment properties.
2. Start with the correct direction: Use row for horizontal layouts and column for vertical layouts.
3. Combine properties intentionally: Use justifyContent for main-axis placement and alignItems for cross-axis placement.
4. Use descriptive styles: Keep layout rules in named StyleSheet.create() definitions when appropriate.
5. Prefer flexible sizing: Avoid unnecessary fixed dimensions that make interfaces difficult to adapt.
6. Use gap where supported: It can simplify spacing between children and wrapped items.
7. Use alignSelf sparingly: Apply it when one child needs a different alignment from its siblings.
8. Understand wrapping: Use flexWrap and alignContent when the layout needs multiple lines.
9. Check available space: Space distribution depends on the dimensions and constraints of the parent.
10. Design for accessibility: Support readable text, appropriate touch targets, and content that can grow.
11. Test multiple devices: Verify layout behavior on Android and iOS and with different window sizes.
12. Keep code maintainable: Use the simplest combination of properties that achieves the desired layout.

15. Practical Project: Build a Profile Dashboard Layout

Project Objective: Build a simple dashboard screen using Flexbox. The screen should include a horizontal header, a row of summary cards, a vertical information section, and a bottom action area.

15.1 Project Requirements

• Create a full-screen container.
• Use row direction for the header and summary cards.
• Use column direction for the main content.
• Use justifyContent to distribute header and footer elements.
• Use alignItems to align elements across the cross axis.
• Use flex to distribute available space among the cards.
• Use gap for consistent spacing between components.

15.2 Complete Example

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

export default function DashboardScreen() {
  return (
    <View style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.brand}>My Dashboard</Text>
        <Text style={styles.profile}>Profile</Text>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.heading}>Overview</Text>

        <View style={styles.cardsRow}>
          <View style={[styles.card, styles.cardBlue]}>
            <Text style={styles.cardTitle}>Courses</Text>
            <Text style={styles.cardValue}>05</Text>
          </View>
          <View style={[styles.card, styles.cardGreen]}>
            <Text style={styles.cardTitle}>Completed</Text>
            <Text style={styles.cardValue}>03</Text>
          </View>
        </View>

        <View style={styles.infoSection}>
          <Text style={styles.sectionTitle}>Recent Activity</Text>
          <Text style={styles.description}>
            Continue learning and review your progress.
          </Text>
        </View>

        <Pressable
          style={styles.button}
          onPress={() => console.log('Continue learning')}
          accessibilityRole="button"
        >
          <Text style={styles.buttonText}>Continue Learning</Text>
        </Pressable>
      </ScrollView>

      <View style={styles.footer}>
        <Text style={styles.footerText}>Home</Text>
        <Text style={styles.footerText}>Courses</Text>
        <Text style={styles.footerText}>Settings</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F2F4F7'
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 18,
    backgroundColor: '#1565C0'
  },
  brand: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#FFFFFF'
  },
  profile: {
    fontSize: 15,
    color: '#FFFFFF'
  },
  content: {
    padding: 16,
    gap: 18
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#17202A'
  },
  cardsRow: {
    flexDirection: 'row',
    gap: 12
  },
  card: {
    flex: 1,
    padding: 16,
    borderRadius: 12
  },
  cardBlue: {
    backgroundColor: '#BBDEFB'
  },
  cardGreen: {
    backgroundColor: '#C8E6C9'
  },
  cardTitle: {
    fontSize: 14,
    color: '#333333'
  },
  cardValue: {
    fontSize: 26,
    fontWeight: 'bold',
    marginTop: 8,
    color: '#17202A'
  },
  infoSection: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    gap: 8
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  description: {
    fontSize: 15,
    lineHeight: 22,
    color: '#626262'
  },
  button: {
    padding: 14,
    borderRadius: 8,
    backgroundColor: '#1565C0',
    alignItems: 'center'
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold'
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderTopWidth: 1,
    borderTopColor: '#E0E0E0'
  },
  footerText: {
    fontSize: 14,
    color: '#333333'
  }
});

15.3 Project Explanation

• The outer screen uses flex: 1 to fill the available space.
• The header uses row, space-between, and center alignment.
• The summary cards use row direction and flex: 1 for equal flexible widths.
• The main content uses a vertical structure with consistent gaps.
• The footer uses space-around to distribute its labels.
• ScrollView allows the content to scroll when it exceeds the available screen height.

15.4 Project Extension Tasks

1. Add a third summary card and verify the row layout on narrow devices.
2. Use flexWrap to make summary cards wrap when space is insufficient.
3. Add a profile avatar beside the user's name.
4. Use alignSelf to position a single action button.
5. Adapt the layout for wider screens using useWindowDimensions.
6. Test the dashboard with longer labels and accessibility font scaling.

16. Practice Exercises

16.1 Beginner Exercises

1. Create three boxes arranged vertically using column.
2. Change the layout to row and observe how the children move.
3. Use row-reverse and column-reverse to explore reverse ordering.
4. Center a child along the main axis using justifyContent.
5. Center a child along the cross axis using alignItems.

16.2 Intermediate Exercises

1. Create a navigation bar using row and space-between.
2. Build a form using column and stretch alignment.
3. Use alignSelf to position one child differently from its siblings.
4. Use flexWrap to create a multi-row set of category buttons.
5. Compare space-between, space-around, and space-evenly with the same children.

16.3 Advanced Exercises

1. Build a responsive dashboard with equal-width cards.
2. Create a flexible footer that distributes actions across a row.
3. Use useWindowDimensions to change a layout for wider screens.
4. Build a card layout that handles long text without overflow.
5. Refactor a screen to use reusable styles defined with StyleSheet.create().

17. Interview Questions and Answers

Q1. What is Flexbox in React Native?

Answer: Flexbox is the layout system used to arrange children within a container, control alignment, and distribute available space.

Q2. What is flexDirection?

Answer: It defines the direction in which children are arranged. Common values are column, row, column-reverse, and row-reverse.

Q3. What is the default flexDirection in React Native?

Answer: The default is column, which arranges children vertically.

Q4. What is the main axis?

Answer: The main axis is the direction in which the children are arranged. It is determined by flexDirection.

Q5. What is the cross axis?

Answer: The cross axis is perpendicular to the main axis.

Q6. What does justifyContent do?

Answer: It aligns or distributes children along the main axis of their container.

Q7. What does alignItems do?

Answer: It aligns children along the cross axis of their container.

Q8. What is the difference between justifyContent and alignItems?

Answer: justifyContent works on the main axis, while alignItems works on the cross axis. Their horizontal or vertical effect depends on flexDirection.

Q9. What does space-between do?

Answer: It places the first and last children at opposite ends and distributes remaining space between adjacent children.

Q10. What is the difference between space-around and space-evenly?

Answer: space-around distributes space around items, giving outer edges half the spacing between items. space-evenly gives equal spacing between items and at both ends.

Q11. What is alignSelf?

Answer: It overrides the parent's alignItems setting for one specific child.

Q12. What is alignContent?

Answer: It distributes multiple wrapped rows or columns along the cross axis. It is most useful when flexWrap creates multiple lines.

Q13. What does flexWrap do?

Answer: It determines whether children can wrap onto additional lines when they cannot fit on one line.

Q14. How do you center a component horizontally and vertically?

Answer: For a typical column container, use flex: 1, justifyContent: 'center', and alignItems: 'center'. The result depends on the parent having available space.

Q15. Why might justifyContent appear not to work?

Answer: The parent may not have extra space along its main axis, or the developer may be expecting it to work on the cross axis.

Q16. How does flex: 1 help with layout?

Answer: It allows a child to occupy a flexible share of available space, subject to the parent's dimensions and other layout constraints.

Q17. When should you use gap instead of margin?

Answer: Use gap for consistent spacing between children when supported. Use margin when an individual component needs its own outer spacing.

Q18. How do you create a horizontal navigation bar?

Answer: Use flexDirection: 'row', justifyContent: 'space-between', and alignItems: 'center' for a common layout with content at opposite ends.

18. Quick Revision Checklist

• Understand the main axis and cross axis.
• Remember that React Native defaults to flexDirection: 'column'.
• Know the four flexDirection values.
• Use justifyContent to align or distribute children along the main axis.
• Use alignItems to align children along the cross axis.
• Understand flex-start, flex-end, center, space-between, space-around, and space-evenly.
• Know when to use alignSelf for one child.
• Understand alignContent for wrapped lines.
• Use flexWrap for multi-line layouts.
• Use flex and gap to create adaptable layouts.
• Check the parent container's available space when alignment does not work as expected.
• Test layouts on different screen sizes and with long text.

19. Official Documentation and Learning Resources

• React Native Flexbox Documentation — learn about direction, alignment, justification, wrapping, and flexible sizing.
• React Native Layout Props — review the available layout properties and their supported values.
• React Native Style Documentation — learn how to apply and organize component styles.
• React Native StyleSheet Documentation — understand how to create named style definitions.
• React Native useWindowDimensions — learn how to adapt layouts to window-size changes.
• React Native Training Course at JustAcademy — explore the training course details.
• Register for a JustAcademy Course Demo — access the course demo registration page.
• JustAcademy Official Website — explore additional courses and learning resources.

20. Conclusion

Flexbox is a fundamental part of React Native layout development. Understanding flexDirection helps you arrange elements in the correct direction, justifyContent controls how children are positioned along the main axis, and alignItems controls their alignment along the cross axis.

Additional properties such as alignSelf, alignContent, flexWrap, gap, and flex help build more adaptable interfaces. By combining these properties carefully, developers can create navigation bars, forms, profile cards, dashboards, and responsive screens with clear and maintainable layouts.

Practice by changing one property at a time and observing how the layout changes. For structured learning, explore the React Native Training Course at JustAcademy and visit the course demo registration page.