1. Introduction

Styling is an important part of mobile application development. It helps developers create attractive, organized, and user-friendly application interfaces.

In React Native, styling is different from traditional HTML and CSS. React Native uses JavaScript objects to define styles and provides Flexbox for arranging components.

In this tutorial, we will learn:

• React Native styling fundamentals.

• StyleSheet and inline styling.

• Flexbox layout.

• flexDirection, justifyContent, and alignItems.

• Width, height, margin, and padding.

• Screen dimensions.

• Responsive mobile layouts.

• Practical application screen design.

2. What Is Styling in React Native?

Styling means controlling the appearance and layout of application components.

For example, developers can control:

• Background colors.

• Text colors and font sizes.

• Component width and height.

• Margins and padding.

• Borders and border radius.

• Component alignment.

• Screen layout.

React Native uses JavaScript objects for styling instead of traditional CSS files.

Example:

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

export default function App() {
  return (
    <View
      style={{
        backgroundColor: 'blue',
        padding: 20,
      }}
    >
      <Text style={{ color: 'white', fontSize: 20 }}>
        Welcome to React Native
      </Text>
    </View>
  );
}

In this example:

• backgroundColor changes the container background.

• padding creates internal spacing.

• color changes the text color.

• fontSize controls text size.

3. Understanding StyleSheet in React Native

React Native provides StyleSheet.create() to organize styles in a separate JavaScript object.

It makes code cleaner and easier to maintain.

Example:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>
        Learn React Native Styling
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f5f9',
    justifyContent: 'center',
    alignItems: 'center',
  },

  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1e40af',
  },
});

Explanation

1. Import StyleSheet from React Native.

2. Create styles using StyleSheet.create().

3. Define reusable style properties.

4. Apply styles using style={styles.container}.

5. Reuse the same styles in multiple components when appropriate.

4. Common React Native Styling Properties

Background Color

<View style={{ backgroundColor: '#2563eb' }}>

Text Color

<Text style={{ color: 'white' }}>
  Welcome
</Text>

Font Size

<Text style={{ fontSize: 24 }}>
  React Native
</Text>

Font Weight

<Text style={{ fontWeight: 'bold' }}>
  Important Text
</Text>

Width and Height

<View
  style={{
    width: 200,
    height: 100,
    backgroundColor: 'blue',
  }}
/>

Border Radius

<View
  style={{
    width: 150,
    height: 100,
    backgroundColor: 'orange',
    borderRadius: 15,
  }}
/>

Margin and Padding

<View
  style={{
    margin: 10,
    padding: 20,
    backgroundColor: 'lightblue',
  }}
>
  <Text>Hello World</Text>
</View>

Important: React Native layout dimensions generally use density-independent points rather than CSS pixels.

5. What Is Flexbox in React Native?

Flexbox is a layout system used to arrange components inside a container.

It helps developers create flexible layouts that adjust to different screen sizes.

For example, Flexbox can arrange:

• Cards horizontally.

• Buttons vertically.

• Images beside text.

• Content in the center of a screen.

• Multiple components with equal spacing.

React Native uses Flexbox by default for layout.

The default flexDirection in React Native is column, unlike standard web CSS where the default is row.

6. Understanding flexDirection

The flexDirection property controls the direction in which child components are arranged.

There are four main values.

1. column

Arranges components from top to bottom.

<View style={{ flexDirection: 'column' }}>
  <View style={{ width: 60, height: 60, backgroundColor: 'red' }} />
  <View style={{ width: 60, height: 60, backgroundColor: 'blue' }} />
  <View style={{ width: 60, height: 60, backgroundColor: 'green' }} />
</View>

2. row

Arranges components from left to right.

<View style={{ flexDirection: 'row' }}>
  <View style={{ width: 60, height: 60, backgroundColor: 'red' }} />
  <View style={{ width: 60, height: 60, backgroundColor: 'blue' }} />
  <View style={{ width: 60, height: 60, backgroundColor: 'green' }} />
</View>

3. row-reverse

Arranges components from right to left.

<View style={{ flexDirection: 'row-reverse' }}>
  <Text>One</Text>
  <Text>Two</Text>
  <Text>Three</Text>
</View>

4. column-reverse

Arranges components from bottom to top.

<View style={{ flexDirection: 'column-reverse' }}>
  <Text>One</Text>
  <Text>Two</Text>
  <Text>Three</Text>
</View>

7. Understanding justifyContent

The justifyContent property controls how child components are positioned along the main axis.

Common values:

• flex-start

• flex-end

• center

• space-between

• space-around

• space-evenly

Example:

<View
  style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 20,
  }}
>
  <Text>Home</Text>
  <Text>Profile</Text>
  <Text>Settings</Text>
</View>

In this example, the available space is distributed between the three components.

8. Understanding alignItems

The alignItems property controls the alignment of child components along the cross axis.

Common values:

• flex-start

• flex-end

• center

• stretch

• baseline

Example:

<View
  style={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }}
>
  <Text>Centered Content</Text>
</View>

The content is centered along both axes because the container uses a column layout.

Remember:

• justifyContent aligns items along the main axis.

• alignItems aligns items along the cross axis.

The direction of these axes depends on flexDirection.

9. Understanding the flex Property

The flex property controls how available space is distributed among child components.

Example:

<View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ flex: 1, backgroundColor: 'red' }} />
  <View style={{ flex: 2, backgroundColor: 'blue' }} />
  <View style={{ flex: 3, backgroundColor: 'green' }} />
</View>

Here:

• First component receives 1 part.

• Second component receives 2 parts.

• Third component receives 3 parts.

Total parts = 6.

Therefore, the available space is divided proportionally.

10. Understanding Width and Height

Width and height control the dimensions of components.

Example:

<View
  style={{
    width: 250,
    height: 150,
    backgroundColor: '#2563eb',
  }}
/>

You can also use percentage dimensions relative to the parent container.

<View style={{ width: '100%', height: 200 }}>
  <View
    style={{
      width: '50%',
      height: '100%',
      backgroundColor: 'orange',
    }}
  />
</View>

Here, the inner component takes 50% of the parent's width.

11. Understanding Margin and Padding

Margin and padding are used to create spacing.

Margin

Margin creates space outside a component.

<View style={{ margin: 20 }}>
  <Text>Student Card</Text>
</View>

Padding

Padding creates space inside a component.

<View style={{ padding: 20, backgroundColor: '#dbeafe' }}>
  <Text>Student Details</Text>
</View>

Individual Spacing Properties

<View
  style={{
    marginTop: 10,
    marginBottom: 20,
    marginLeft: 15,
    marginRight: 15,
    paddingHorizontal: 20,
    paddingVertical: 10,
  }}
>
  <Text>Spacing Example</Text>
</View>

12. Understanding Screen Dimensions

Different mobile devices have different screen widths and heights.

For example:

• Small Android phones.

• Large Android phones.

• Tablets.

• Foldable devices.

• iPhones.

React Native provides the useWindowDimensions() Hook to access the current application window dimensions.

Example:

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

export default function App() {
  const { width, height } = useWindowDimensions();

  return (
    <View style={{ padding: 20 }}>
      <Text>Screen Width: {width}</Text>
      <Text>Screen Height: {height}</Text>
    </View>
  );
}

The Hook automatically updates when the application window changes size.

Understanding Dimensions API

React Native also provides the Dimensions API.

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

For responsive React components, prefer useWindowDimensions() because it updates when the window size changes.

13. Creating Responsive Layouts

Responsive layouts adjust their design according to the available screen size.

For example:

• Small screens can display one card per row.

• Larger screens can display multiple cards per row.

• Text and spacing can adapt to the available width.

Example:

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

export default function App() {
  const { width } = useWindowDimensions();

  const isLargeScreen = width >= 600;

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>
        Responsive Layout
      </Text>

      <View
        style={[
          styles.cardContainer,
          {
            flexDirection: isLargeScreen ? 'row' : 'column',
          },
        ]}
      >
        <View style={styles.card}>
          <Text>Card One</Text>
        </View>

        <View style={styles.card}>
          <Text>Card Two</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },

  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },

  cardContainer: {
    gap: 15,
  },

  card: {
    flex: 1,
    minHeight: 120,
    backgroundColor: '#dbeafe',
    borderRadius: 12,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

When the window width is at least 600 points, the cards appear horizontally. On narrower screens, they appear vertically.

14. Understanding flexWrap

The flexWrap property controls whether child components move onto another line when there is not enough space.

Example:

<View
  style={{
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
  }}
>
  <View style={{ width: 100, height: 80, backgroundColor: 'red' }} />
  <View style={{ width: 100, height: 80, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 80, backgroundColor: 'green' }} />
  <View style={{ width: 100, height: 80, backgroundColor: 'orange' }} />
</View>

This is useful for:

• Product grids.

• Category lists.

• Image galleries.

• Dashboard cards.

15. Complete Practical Project: Responsive Student Dashboard

Now let's create a practical student dashboard using React Native styling, Flexbox, dimensions, and responsive layouts.

Project Objective:

Build a dashboard that displays:

• Dashboard heading.

• Student information.

• Total courses.

• Completed lessons.

• Pending assignments.

• Responsive dashboard cards.

Use the appropriate entry screen for your project, such as app/index.tsx in an Expo Router project or App.js in a suitable project template.

Complete Code

import React from 'react';

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

export default function App() {
  const { width } = useWindowDimensions();

  const isTablet = width >= 600;

  const dashboardData = [
    {
      id: '1',
      title: 'Total Courses',
      value: '12',
      color: '#dbeafe',
    },
    {
      id: '2',
      title: 'Completed Lessons',
      value: '45',
      color: '#dcfce7',
    },
    {
      id: '3',
      title: 'Pending Tasks',
      value: '08',
      color: '#fef3c7',
    },
    {
      id: '4',
      title: 'Certificates',
      value: '05',
      color: '#f3e8ff',
    },
  ];

  return (
    <ScrollView
      style={styles.screen}
      contentContainerStyle={styles.content}
    >
      <View style={styles.header}>
        <Text style={styles.heading}>
          Student Dashboard
        </Text>

        <Text style={styles.subtitle}>
          Welcome back, Rahul!
        </Text>
      </View>

      <View style={styles.profile}>
        <Text style={styles.profileName}>
          Rahul Sharma
        </Text>

        <Text style={styles.profileCourse}>
          React Native Development
        </Text>
      </View>

      <Text style={styles.sectionTitle}>
        Dashboard Overview
      </Text>

      <View
        style={[
          styles.cardContainer,
          {
            flexDirection: isTablet ? 'row' : 'column',
            flexWrap: isTablet ? 'wrap' : 'nowrap',
          },
        ]}
      >
        {dashboardData.map(item => (
          <View
            key={item.id}
            style={[
              styles.card,
              {
                backgroundColor: item.color,
                width: isTablet ? '48%' : '100%',
              },
            ]}
          >
            <Text style={styles.cardValue}>
              {item.value}
            </Text>

            <Text style={styles.cardTitle}>
              {item.title}
            </Text>
          </View>
        ))}
      </View>

      <View style={styles.footer}>
        <Text style={styles.footerText}>
          Keep Learning, Keep Growing!
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },

  content: {
    padding: 20,
    paddingBottom: 40,
  },

  header: {
    marginBottom: 25,
  },

  heading: {
    fontSize: 26,
    fontWeight: 'bold',
    color: '#1e293b',
  },

  subtitle: {
    fontSize: 16,
    color: '#64748b',
    marginTop: 8,
  },

  profile: {
    backgroundColor: '#2563eb',
    padding: 22,
    borderRadius: 15,
    marginBottom: 25,
  },

  profileName: {
    color: '#ffffff',
    fontSize: 22,
    fontWeight: 'bold',
  },

  profileCourse: {
    color: '#dbeafe',
    fontSize: 15,
    marginTop: 8,
  },

  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15,
    color: '#1e293b',
  },

  cardContainer: {
    gap: 12,
  },

  card: {
    minHeight: 120,
    padding: 20,
    borderRadius: 12,
    justifyContent: 'center',
  },

  cardValue: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#0f172a',
  },

  cardTitle: {
    fontSize: 15,
    color: '#475569',
    marginTop: 8,
  },

  footer: {
    marginTop: 30,
    alignItems: 'center',
  },

  footerText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#2563eb',
  },
});

Practical Project Explanation

1. useWindowDimensions() detects the available window width.

2. isTablet determines whether the available width meets the tablet breakpoint.

3. ScrollView allows the dashboard to scroll vertically.

4. StyleSheet.create() organizes the styles.

5. flexDirection changes the dashboard layout.

6. flexWrap allows cards to occupy multiple rows.

7. map() generates dashboard cards from an array.

8. gap provides consistent spacing between cards.

9. borderRadius creates rounded dashboard cards.

10. padding and margin maintain visual spacing.

16. Common Styling Mistakes

Mistake 1: Forgetting the Parent Flex Property

Incorrect:

<View style={{ justifyContent: 'center' }}>
  <Text>Hello</Text>
</View>

If the parent has no available height, there may be no extra space in which to center the content.

Correct:

<View style={{ flex: 1, justifyContent: 'center' }}>
  <Text>Hello</Text>
</View>

Mistake 2: Confusing justifyContent and alignItems

Remember that their behavior depends on the main and cross axes.

For a column layout, justifyContent aligns vertically and alignItems aligns horizontally.

Mistake 3: Using Fixed Width for Every Device

A fixed width may overflow on smaller devices.

Use percentages, Flexbox, and available window dimensions where appropriate.

Mistake 4: Forgetting ScrollView

Long screens may overflow when using a fixed screen container.

Use ScrollView when the content needs vertical scrolling.

Mistake 5: Using Incorrect Style Property Names

Incorrect:

<View style={{ background_color: 'blue' }} />

Correct:

<View style={{ backgroundColor: 'blue' }} />

React Native style properties use camelCase.

17. Best Practices for React Native Styling

• Use StyleSheet.create() to organize reusable styles.

• Use Flexbox for flexible layouts.

• Use useWindowDimensions() for responsive screen calculations.

• Avoid unnecessary fixed widths and heights.

• Use ScrollView for screens with content that exceeds the available viewport.

• Maintain consistent margins and padding.

• Use meaningful style names.

• Test layouts on different screen sizes.

• Consider larger system font settings and accessibility.

• Keep component structure separate from styling wherever practical.

18. Conclusion

React Native styling allows developers to create attractive and responsive mobile application interfaces.

In this tutorial, we learned how to use StyleSheet, Flexbox, flexDirection, justifyContent, alignItems, dimensions, margin, padding, and responsive layouts.

The practical Student Dashboard project demonstrates how these concepts work together in a real mobile application.

Practise changing the Flexbox properties, adjusting card sizes, and testing the dashboard on different device widths.

19. Frequently Asked Questions

Q1. What is Flexbox in React Native?

Flexbox is a layout system used to arrange components inside a container.

Q2. What is the default flexDirection in React Native?

The default value is column.

Q3. What is the difference between justifyContent and alignItems?

justifyContent aligns items along the main axis, while alignItems aligns them along the cross axis.

Q4. What is StyleSheet.create()?

It is a React Native API used to organize and create reusable style definitions.

Q5. What is useWindowDimensions()?

It is a Hook that provides the current application window's width, height, scale, and font scale. It updates when the window dimensions change.

Q6. What is the difference between margin and padding?

Margin creates space outside a component, while padding creates space inside a component.

Q7. What is flex: 1?

It allows a component to grow and occupy available space along its parent's main axis.

Q8. What is a responsive layout?

A responsive layout adapts its arrangement and sizing to the available screen dimensions.

Q9. What is flexWrap?

It allows child components to move onto additional lines when there is insufficient space.

Q10. Why should we use ScrollView?

ScrollView allows users to scroll through content that does not fit within the visible screen area.