Using StyleSheet.create() in React Native

Course: React Native Training

Topic: Using StyleSheet.create() for Styling React Native Applications

Course Link: React Native Training Course

Demo Link: Register for a Course Demo

Training Institute: JustAcademy Official Website

1. Introduction to Styling in React Native

Styling is an essential part of React Native development because it determines how mobile application components look, feel, and respond to different screen sizes. Developers use styles to control colors, spacing, dimensions, text appearance, alignment, borders, shadows, and layouts.

React Native uses JavaScript objects to define styles. Although many property names resemble CSS, React Native styling is not exactly the same as browser CSS. For example, React Native uses camelCase property names such as backgroundColor instead of background-color.

The StyleSheet.create() method provides a structured way to define and organize named styles outside the main component rendering logic. It improves code readability and provides static type checking and editor suggestions when used with supported TypeScript or JavaScript tooling. Read the official StyleSheet documentation.

1.1 What Is StyleSheet.create()?

StyleSheet.create() is a React Native API that accepts an object containing named style definitions and returns a style object that can be referenced by React Native components.

Each key represents a style name, and its value defines the properties associated with that style.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F2F4F7',
    padding: 20
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#222222'
  }
});

In this example, container and title are named styles. They can be applied to components using the style prop.

1.2 Learning Objectives

• Understand the purpose of StyleSheet.create().
• Learn how to import and use the StyleSheet API.
• Create reusable named styles for React Native components.
• Understand common layout, spacing, color, and typography properties.
• Combine multiple styles using arrays.
• Apply conditional and platform-specific styles.
• Use StyleSheet helpers such as hairlineWidth, absoluteFill, and flatten().
• Identify common styling errors and learn how to troubleshoot them.
• Build a practical styled React Native screen.

2. Why Use StyleSheet.create()?

Small React Native components can use inline style objects, but larger applications become difficult to maintain when styling is mixed throughout the component code. StyleSheet.create() helps separate presentation from component structure.

2.1 Better Code Organization

Consider a component with several inline styles:

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

export default function WelcomeScreen() {
  return (
    <View style={{ flex: 1, padding: 20, backgroundColor: '#F2F4F7' }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold', color: '#222222' }}>
        Welcome to React Native
      </Text>
    </View>
  );
}

This works, but repeated inline objects can make a complex component harder to read. Moving the styles into a named stylesheet provides a cleaner structure.

2.2 The Same Component Using StyleSheet.create()

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

export default function WelcomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Welcome to React Native
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F2F4F7'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#222222'
  }
});

The component structure is now easier to understand, and the named styles can be reused within the file.

2.3 Main Benefits

Important: StyleSheet.create() is not a guarantee that an application will automatically become faster. Its primary practical benefits include organization, named styles, and static style checking. Avoid assuming that it always produces a performance improvement over every inline style.

3. Importing and Using the StyleSheet API

Before using StyleSheet.create(), import StyleSheet from the React Native package.

3.1 Import Statement

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

Here, StyleSheet defines the styles, View creates a container, and Text displays text.

3.2 Basic Syntax

const styles = StyleSheet.create({
  styleName: {
    propertyName: value
  },
  anotherStyle: {
    propertyName: value
  }
});

Each style name is a key in the object. Each style definition contains properties supported by the component that will receive it.

3.3 Applying a Named Style

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>My First Styled App</Text>
      <Text style={styles.description}>
        Learning React Native styling.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#FFFFFF'
  },
  heading: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#1565C0'
  },
  description: {
    fontSize: 16,
    color: '#555555',
    marginTop: 10
  }
});

3.4 Understanding the Code

1. Import React and the required React Native components.
2. Define the component using a function.
3. Apply styles.container to the outer View.
4. Apply styles.heading and styles.description to the Text components.
5. Define the named styles using StyleSheet.create().

4. Understanding React Native Style Properties

React Native style objects use JavaScript property names and values. Some properties are similar to CSS, while others have platform-specific behavior or different supported values.

4.1 Background and Text Colors

const styles = StyleSheet.create({
  screen: {
    backgroundColor: '#F5F5F5'
  },
  heading: {
    color: '#1565C0'
  },
  warning: {
    color: 'red'
  }
});

Common color formats include named colors, hexadecimal values, and supported RGB or RGBA strings. Use readable color names or a centralized color palette when building larger applications.

4.2 Font Properties

4.3 Example of Typography Styles

const styles = StyleSheet.create({
  title: {
    fontSize: 28,
    fontWeight: '700',
    color: '#17202A',
    textAlign: 'center',
    letterSpacing: 0.5
  },
  subtitle: {
    fontSize: 16,
    fontWeight: '400',
    color: '#626262',
    textAlign: 'center'
  }
});

4.4 Dimensions and Spacing

React Native uses numeric dimensions for many layout and spacing properties. These values generally represent density-independent units rather than CSS pixels.

const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 100,
    margin: 12,
    padding: 16,
    borderWidth: 1
  }
});

• width sets the width of a component.
• height sets its height.
• margin adds space outside the component's border.
• padding adds space inside the component's border.
• borderWidth controls border thickness.

4.5 Border Properties

const styles = StyleSheet.create({
  card: {
    borderWidth: 1,
    borderColor: '#D6DCE5',
    borderRadius: 12,
    backgroundColor: '#FFFFFF'
  }
});

Use borderRadius to create rounded corners and borderColor to define the border color. Verify the appearance on target devices, especially when using transparent backgrounds or nested elements.

5. Layout Styling with Flexbox

React Native uses Flexbox as its primary layout system. StyleSheet.create() can define layout properties that control how components are arranged inside their parent containers.

5.1 The flex Property

const styles = StyleSheet.create({
  screen: {
    flex: 1
  }
});

Setting flex: 1 commonly allows a component to occupy the available space within its parent, provided the parent layout allows it.

5.2 Flex Direction

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

• row arranges children horizontally.
• column arranges children vertically and is the default flex direction in React Native.

5.3 Main-Axis and Cross-Axis Alignment

const styles = StyleSheet.create({
  centeredContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

justifyContent controls alignment along the main axis. alignItems controls alignment along the cross axis.

5.4 Common Flexbox Properties

6. Organizing Styles for Reusability

A well-organized stylesheet uses meaningful names and groups related visual properties. Instead of using generic names everywhere, choose names that communicate the role of the style.

6.1 Meaningful Style Names

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    padding: 16
  },
  primaryButton: {
    backgroundColor: '#1565C0',
    padding: 14,
    borderRadius: 8
  },
  primaryButtonText: {
    color: '#FFFFFF',
    fontWeight: '700',
    textAlign: 'center'
  }
});

Names such as screenContainer, primaryButton, and primaryButtonText are more descriptive than names such as style1, box2, or text3.

6.2 Reusing Styles in Multiple Components

Styles defined within a module can be reused by any component in that module. For reuse across different files, export a stylesheet or a shared design-token module when that fits the project architecture.

// styles.js
import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 16,
    backgroundColor: '#F5F7FA'
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#17202A'
  }
});

// HomeScreen.js
import React from 'react';
import { View, Text } from 'react-native';
import { styles } from './styles';

export default function HomeScreen() {
  return (
    <View style={styles.screen}>
      <Text style={styles.heading}>Home Screen</Text>
    </View>
  );
}

6.3 Creating a Centralized Color Palette

For larger applications, storing repeated design values in one place can make updates easier.

// colors.js
export const colors = {
  primary: '#1565C0',
  background: '#F5F7FA',
  surface: '#FFFFFF',
  text: '#17202A',
  mutedText: '#626262',
  border: '#D6DCE5',
  danger: '#C62828'
};

// styles.js
import { StyleSheet } from 'react-native';
import { colors } from './colors';

export const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: colors.background,
    padding: 16
  },
  heading: {
    fontSize: 24,
    fontWeight: '700',
    color: colors.text
  }
});

This approach improves consistency and makes it easier to update an application's visual theme.

7. Combining Multiple Styles

React Native components accept a style object or an array of styles. When an array is used, styles are applied in order, and later styles take precedence when they define the same property.

7.1 Combining Two Styles

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

export default function StyledText() {
  return (
    <View>
      <Text style={[styles.text, styles.highlight]}>
        Combined styles
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    color: '#222222'
  },
  highlight: {
    color: '#1565C0',
    fontWeight: 'bold'
  }
});

The text receives properties from both styles. The color from highlight overrides the color from text, while the font size remains 18.

7.2 Overriding a Style with an Inline Object

<Text style={[styles.heading, { color: '#C62828' }]}>
  Important Message
</Text>

The inline style is applied after the named style, so its color overrides the color defined in styles.heading.

7.3 Conditional Styles

Conditional styles allow a component to change its appearance based on state or props.

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

export default function ToggleButton() {
  const [active, setActive] = useState(false);

  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => setActive(!active)}
        style={[
          styles.button,
          active && styles.activeButton
        ]}
      >
        <Text style={styles.buttonText}>
          {active ? 'Active' : 'Inactive'}
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  button: {
    backgroundColor: '#777777',
    padding: 14,
    borderRadius: 8
  },
  activeButton: {
    backgroundColor: '#2E7D32'
  },
  buttonText: {
    color: '#FFFFFF',
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

When active is true, styles.activeButton is included in the style array. When it is false, the conditional expression contributes no style.

8. Working with Dimensions and Responsive Layouts

Mobile applications run on devices with different screen sizes, orientations, and display densities. Responsive layout techniques help the interface adapt to those differences.

8.1 Prefer Flexible Layouts

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 16
  },
  content: {
    width: '100%',
    maxWidth: 600,
    alignSelf: 'center'
  }
});

Flexible dimensions, appropriate maximum widths, and Flexbox layouts can be more adaptable than fixed widths for entire screens.

8.2 Using the Dimensions API

The Dimensions API can provide the current window dimensions. For layout that must respond to changes such as rotation or window resizing, use the documented change-aware approach or React Native's useWindowDimensions hook.

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

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  wideContainer: {
    paddingHorizontal: 40
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold'
  }
});

Use responsive breakpoints based on the needs of the interface and test them on real devices. A single width threshold is only an example, not a universal rule.

8.3 Handling Text and Content Overflow

• Avoid fixed heights for containers that hold variable-length text.
• Use ScrollView or FlatList when content may exceed available screen space.
• Check long labels, translated text, and accessibility font scaling.
• Use flex properties and flexible widths where appropriate.
• Test both portrait and landscape layouts if the application supports both.

9. Platform-Specific Styles with StyleSheet.create()

Some visual properties behave differently on Android and iOS. StyleSheet.create() can be combined with the Platform module to define styles appropriate to each platform.

9.1 Importing Platform

import { StyleSheet, Platform } from 'react-native';

9.2 Applying Platform.select()

const styles = StyleSheet.create({
  card: {
    padding: 20,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.15,
        shadowRadius: 5
      },
      android: {
        elevation: 4
      },
      default: {}
    })
  }
});

The shared card properties apply across platforms. iOS receives shadow-related properties, while Android uses elevation. Always test visual results on both platforms because rendering may differ.

9.3 When to Use Platform-Specific Styling

• When shadow or elevation rendering differs.
• When spacing needs a small platform-specific adjustment.
• When system UI conventions require a different visual treatment.
• When a platform has a supported style property that the other platform does not use.

Keep platform-specific styling limited to genuine differences. Avoid duplicating an entire stylesheet when only a few properties need adjustment.

10. StyleSheet Helpers and Utilities

In addition to create(), the StyleSheet API provides other useful utilities. Always refer to the current React Native documentation for exact behavior and availability.

10.1 StyleSheet.hairlineWidth

StyleSheet.hairlineWidth represents a thin line width suited to the underlying platform's display density. It can be useful for separators and subtle borders.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#CCCCCC'
  }
});

Its value can vary between devices and platforms, so do not assume it always has the same numeric value.

10.2 StyleSheet.absoluteFill

StyleSheet.absoluteFill is a predefined style for filling a containing area with absolute positioning. It is useful for overlays.

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFill,
    backgroundColor: 'rgba(0, 0, 0, 0.35)'
  }
});

Make sure the parent container and stacking behavior are suitable for the overlay. Absolute positioning does not automatically create a modal or handle accessibility and touch behavior.

10.3 StyleSheet.absoluteFillObject

StyleSheet.absoluteFillObject provides the absolute-fill positioning values as an object that can be spread and customized.

const styles = StyleSheet.create({
  partialOverlay: {
    ...StyleSheet.absoluteFillObject,
    top: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  }
});

10.4 StyleSheet.flatten()

StyleSheet.flatten() combines an array of style objects into a single style object. It can be useful when a style must be inspected or combined programmatically, but it is not required for normal rendering with style arrays.

import { StyleSheet } from 'react-native';

const combinedStyle = StyleSheet.flatten([
  { fontSize: 16, color: '#222222' },
  { color: '#1565C0', fontWeight: 'bold' }
]);

console.log(combinedStyle);
// Includes fontSize: 16, color: '#1565C0',
// and fontWeight: 'bold'.

For ordinary components, this is usually sufficient:

<Text style={[styles.text, styles.highlight]}>
  Styled text
</Text>

Using the style array directly is generally simpler than flattening styles manually.

11. Understanding StyleSheet.create() and Inline Styles

Both StyleSheet.create() and inline style objects are valid ways to apply styles in React Native. The best choice depends on how complex and reusable the styling is.

11.1 Example of Inline Styling

<Text style={{ fontSize: 18, color: '#1565C0' }}>
  Hello React Native
</Text>

11.2 Example of Named Styling

const styles = StyleSheet.create({
  greeting: {
    fontSize: 18,
    color: '#1565C0'
  }
});

<Text style={styles.greeting}>
  Hello React Native
</Text>

Use StyleSheet.create() for the main reusable style definitions and inline objects when a small dynamic adjustment makes the code clearer.

12. Styling Buttons and Interactive Components

Buttons and other interactive elements need clear visual feedback, readable text, and sufficient touch areas. React Native provides components such as Pressable that can be styled using StyleSheet.create().

12.1 Creating a Styled Button

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

export default function CustomButton() {
  return (
    <View style={styles.container}>
      <Pressable
        style={styles.button}
        onPress={() => console.log('Button pressed')}
        accessibilityRole="button"
        accessibilityLabel="Continue"
      >
        <Text style={styles.buttonText}>Continue</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  button: {
    backgroundColor: '#1565C0',
    paddingVertical: 14,
    paddingHorizontal: 20,
    borderRadius: 8,
    alignItems: 'center'
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

12.2 Interactive Feedback

Pressable supports a style callback that receives the pressed state. This can be used to change the appearance during interaction.

<Pressable
  onPress={handlePress}
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed
  ]}
>
  <Text style={styles.buttonText}>Submit</Text>
</Pressable>

Define the related styles in the stylesheet:

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#1565C0',
    padding: 14,
    borderRadius: 8
  },
  buttonPressed: {
    opacity: 0.75
  },
  buttonText: {
    color: '#FFFFFF',
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

Ensure interactive elements have accessible labels, appropriate roles, clear feedback, and touch areas suitable for mobile users.

13. Styling Forms and TextInput

Form components require consistent spacing, readable labels, visible borders, and helpful error messages. StyleSheet.create() makes it easier to maintain a consistent form design.

13.1 Example Form

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

export default function LoginForm() {
  const [email, setEmail] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login</Text>
      <Text style={styles.label}>Email Address</Text>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Enter your email"
        keyboardType="email-address"
        autoCapitalize="none"
        style={styles.input}
        accessibilityLabel="Email address"
      />
      <Pressable
        style={styles.button}
        onPress={() => console.log('Email submitted')}
      >
        <Text style={styles.buttonText}>Continue</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  title: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#17202A'
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 8
  },
  input: {
    borderWidth: 1,
    borderColor: '#C8D0DA',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    marginBottom: 16
  },
  button: {
    backgroundColor: '#1565C0',
    padding: 14,
    borderRadius: 8
  },
  buttonText: {
    color: '#FFFFFF',
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

13.2 Form Styling Best Practices

• Use readable labels and placeholders.
• Maintain consistent spacing between inputs.
• Make error messages easy to identify.
• Ensure text remains readable when font scaling is enabled.
• Test keyboard behavior on Android and iOS.
• Do not rely on color alone to communicate validation errors.

14. Common StyleSheet.create() Errors and Troubleshooting

14.1 Forgetting to Import StyleSheet

Problem: The application reports that StyleSheet is undefined.

Solution: Import it from React Native.

import { StyleSheet } from 'react-native';

14.2 Using the Wrong Property Name

Problem: A style does not behave as expected because the property name uses CSS syntax.

Incorrect:

background-color: '#FFFFFF'

Correct:

backgroundColor: '#FFFFFF'

React Native uses camelCase property names in JavaScript style objects.

14.3 Using CSS Strings for Numeric Values

Problem: A dimension or spacing property is supplied using an unsupported CSS-style string.

Incorrect:

padding: '20px'

Correct:

padding: 20

For many dimensions, React Native expects numeric values. Some properties support strings such as percentage dimensions, so consult the relevant style-property documentation rather than assuming every property accepts the same value types.

14.4 Applying a Style That Does Not Exist

Problem: The component references styles.heading, but the stylesheet defines title.

Solution: Make the style reference and the object key match.

const styles = StyleSheet.create({
  heading: {
    fontSize: 24,
    fontWeight: 'bold'
  }
});

// Apply the correct key:
<Text style={styles.heading}>Heading</Text>

14.5 Incorrect Style Array Order

Problem: A style does not display the expected color or spacing.

Cause: A later style overrides a property from an earlier style.

<Text style={[styles.primary, styles.secondary]}>
  Example
</Text>

Review the array order and check which style defines the property you want to keep.

14.6 Invalid Font Weight

Problem: A font weight is not accepted or does not render as expected.

Solution: Use supported font-weight values such as '400', '500', '600', '700', or 'bold', depending on the font and platform support.

14.7 Content Is Not Centered

Problem: A component uses justifyContent or alignItems but does not appear centered.

Solution: Check the parent container's dimensions, flexDirection, and layout constraints. Alignment properties operate within the available parent layout; they do not automatically make a component fill the screen.

14.8 Shadows Look Different on Android and iOS

Problem: A shadow is visible on one platform but not on the other.

Solution: Use platform-appropriate properties such as Android elevation and iOS shadow properties. Test the rendered component on both platforms.

15. Best Practices for Using StyleSheet.create()

1. Use descriptive names: Name styles according to their purpose, such as screenContainer, cardTitle, and primaryButton.
2. Keep styles organized: Group related styles and move shared design values into suitable modules.
3. Avoid unnecessary duplication: Reuse styles when multiple components share the same visual treatment.
4. Use consistent design tokens: Centralize repeated colors, spacing values, and typography where appropriate.
5. Combine styles carefully: Remember that later styles in a style array override earlier styles for matching properties.
6. Use flexible layouts: Prefer Flexbox and responsive dimensions where fixed dimensions would cause overflow.
7. Support accessibility: Ensure readable contrast, appropriate touch targets, and usable text scaling.
8. Test on both platforms: Check visual differences on Android and iOS.
9. Keep dynamic values clear: Use style arrays or small inline objects when values depend on state or props.
10. Check documentation: Verify the supported properties and value types for each component.
11. Avoid unnecessary complexity: Do not introduce helper utilities when a straightforward named style is sufficient.
12. Review the rendered UI: A syntactically valid style can still create poor spacing, clipping, or low contrast.

16. Practical Project: Build a Styled Profile Card

Project Objective: Create a reusable profile card using StyleSheet.create() with a heading, descriptive text, a status label, and an interactive button.

16.1 Project Requirements

• Create a screen with a light background.
• Display a profile card with rounded corners.
• Use a separate style for the heading and description.
• Show an active or inactive status.
• Change the status when the button is pressed.
• Use a conditional style for the active state.
• Keep the style definitions organized in one stylesheet.

16.2 Complete Example

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

export default function ProfileCard() {
  const [active, setActive] = useState(false);

  return (
    <View style={styles.screen}>
      <View style={styles.card}>
        <Text style={styles.title}>User Profile</Text>
        <Text style={styles.description}>
          Manage your account and preferences.
        </Text>
        <Text
          style={[
            styles.status,
            active ? styles.activeStatus : styles.inactiveStatus
          ]}
        >
          {active ? 'Status: Active' : 'Status: Inactive'}
        </Text>
        <Pressable
          style={[
            styles.button,
            active && styles.buttonActive
          ]}
          onPress={() => setActive(!active)}
          accessibilityRole="button"
          accessibilityLabel="Toggle profile status"
        >
          <Text style={styles.buttonText}>
            {active ? 'Deactivate' : 'Activate'}
          </Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#F2F4F7'
  },
  card: {
    padding: 20,
    borderRadius: 14,
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#E0E4E8'
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#17202A',
    marginBottom: 10
  },
  description: {
    fontSize: 16,
    color: '#626262',
    lineHeight: 23,
    marginBottom: 18
  },
  status: {
    fontSize: 15,
    fontWeight: '600',
    marginBottom: 16
  },
  activeStatus: {
    color: '#2E7D32'
  },
  inactiveStatus: {
    color: '#757575'
  },
  button: {
    padding: 14,
    borderRadius: 8,
    backgroundColor: '#1565C0',
    alignItems: 'center'
  },
  buttonActive: {
    backgroundColor: '#2E7D32'
  },
  buttonText: {
    color: '#FFFFFF',
    fontWeight: '700',
    fontSize: 16
  }
});

16.3 Project Explanation

• The screen and card use separate named styles.
• The status text changes according to the active state.
• A conditional style changes the status color.
• The button's background changes when the profile is active.
• The styles remain separate from the component's main structure.

16.4 Project Extension Tasks

1. Add a profile image using the Image component.
2. Create a reusable button component that accepts a style prop.
3. Add validation messages to a form.
4. Use a shared color palette in a separate file.
5. Add responsive spacing for wider screens.
6. Test the design on Android and iOS.

17. Practice Exercises

Beginner Exercises

1. Create a stylesheet with container, title, and description styles.
2. Build a card with padding, backgroundColor, borderRadius, and borderWidth.
3. Style a Text component using fontSize, fontWeight, and color.
4. Center a component using Flexbox.
5. Create a button using Pressable and StyleSheet.create().

Intermediate Exercises

1. Combine two named styles using a style array.
2. Build an active/inactive component using conditional styles.
3. Create a reusable stylesheet module and import it into another screen.
4. Use Platform.select() for platform-specific shadow styling.
5. Create a form with styled TextInput components and validation messages.

Advanced Exercises

1. Build a responsive dashboard with reusable cards.
2. Create a shared design-token module for colors and spacing.
3. Implement a light and dark appearance using separate theme values.
4. Use useWindowDimensions to adapt the layout to different window widths.
5. Review a complex screen and refactor repeated inline styles into named styles.

18. Interview Questions and Answers

Q1. What is StyleSheet.create() in React Native?

Answer: It is a React Native API that accepts an object of named styles and returns a style object for use with components.

Q2. Why do developers use StyleSheet.create()?

Answer: It helps organize styles, improves readability, encourages reuse, and supports static style checking and editor suggestions with suitable tooling.

Q3. How do you import StyleSheet?

Answer: Use import { StyleSheet } from 'react-native';.

Q4. How do you apply a named style?

Answer: Apply it through a component's style prop, for example <View style={styles.container} />.

Q5. Is React Native styling exactly the same as CSS?

Answer: No. Many concepts are similar, but React Native uses JavaScript style objects and has different property names, supported values, and layout behavior.

Q6. What is the difference between margin and padding?

Answer: Margin adds space outside a component's border, while padding adds space inside the border between the content and the component's edges.

Q7. How do you combine multiple styles?

Answer: Pass an array of styles, such as style={[styles.base, styles.active]}. Later styles take precedence when the same property is defined more than once.

Q8. How can you apply conditional styling?

Answer: Use a conditional expression in a style array, such as style={[styles.button, active && styles.activeButton]}.

Q9. What does flex: 1 commonly do?

Answer: It allows a component to take a flexible share of available space within its parent layout, depending on the surrounding layout constraints.

Q10. What is StyleSheet.hairlineWidth?

Answer: It represents a thin line width adapted to the underlying platform's display density and is useful for subtle borders and separators.

Q11. What is StyleSheet.flatten()?

Answer: It combines an array of style objects into one style object. Most ordinary component rendering can use a style array directly.

Q12. What is StyleSheet.absoluteFill?

Answer: It is a predefined absolute-positioning style that fills the containing area and can be useful for overlays.

Q13. Can styles depend on state or props?

Answer: Yes. Components can combine named styles with conditional styles or small inline objects whose values depend on state or props.

Q14. Why might a style look different on Android and iOS?

Answer: Some style properties render differently or are platform-specific. Shadows are a common example, with elevation used on Android and shadow-related properties commonly used on iOS.

Q15. Does StyleSheet.create() guarantee better performance?

Answer: No. Its main practical benefits are organization, named styles, and type checking with supported tooling. Performance depends on the component and application implementation.

19. Quick Revision Checklist

• Understand the purpose and syntax of StyleSheet.create().
• Import StyleSheet from react-native.
• Create named styles and apply them with the style prop.
• Use camelCase property names.
• Understand colors, typography, spacing, borders, and dimensions.
• Use Flexbox for alignment and layout.
• Combine styles using arrays and understand precedence.
• Apply conditional styles based on state or props.
• Use flexible layouts to support different screen sizes.
• Use Platform.select() when a visual difference requires platform-specific styling.
• Understand hairlineWidth, absoluteFill, and flatten().
• Keep styles reusable, descriptive, accessible, and easy to maintain.
• Test the rendered interface on Android and iOS.

20. Official Documentation and Learning Resources

• React Native StyleSheet Documentation — learn about create(), flatten(), hairlineWidth, and other StyleSheet utilities.
• React Native Style Documentation — understand style properties, style arrays, and component styling.
• React Native Flexbox Documentation — learn layout direction, alignment, and flexible sizing.
• React Native Platform-Specific Code — learn how to adapt styles and implementations for different platforms.
• React Native useWindowDimensions — learn how to respond to window-size changes.
• React Native Training Course at JustAcademy — explore course information.
• Register for a JustAcademy Course Demo — access the demo registration page.
• JustAcademy Official Website — explore additional courses and learning resources.

21. Conclusion

StyleSheet.create() is an important part of writing organized and maintainable React Native applications. It allows developers to define named styles separately from component structure, reuse styling rules, and apply consistent visual patterns across screens.

By understanding style properties, Flexbox, style arrays, conditional styling, responsive layouts, and platform-specific adjustments, developers can create interfaces that are readable, accessible, and adaptable to different mobile devices.

Practice these concepts by building reusable cards, forms, buttons, and responsive screens. For more structured learning, explore the React Native Training Course at JustAcademy and visit the course demo registration page.