Styling Text, Images, Borders, and Backgrounds in React Native

Course: React Native Training

Topic: Styling Text, Images, Borders, and Backgrounds

Course Link: React Native Training Course

Demo Link: Register for a Free Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to Styling in React Native

Styling is an essential part of React Native development because it controls how application elements look and how users interact with them. Text styling improves readability, image styling helps display visual content, borders define component boundaries, and backgrounds create visual separation between different sections of an application.

React Native uses JavaScript objects to define styles. These styles are similar to CSS, but they use camelCase property names and platform-specific rules. For example, React Native uses backgroundColor instead of CSS's background-color.

1.1 Why Styling Is Important

• Readability: Appropriate font sizes, weights, and colors make text easier to understand.
• Visual hierarchy: Headings, subtitles, and descriptions can be distinguished clearly.
• Consistency: Reusable style definitions help maintain a uniform design across screens.
• Usability: Well-designed layouts help users identify buttons, cards, images, and important information.
• Brand identity: Colors, typography, and visual elements create a recognizable application design.
• Responsive presentation: Flexible dimensions and layouts help components adapt to different screen sizes.

1.2 Common Ways to Apply Styles

React Native supports several common approaches to styling components.

1.3 Basic Styling Example

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native</Text>
      <Text style={styles.description}>
        Learn how to style mobile applications.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F5F7FA',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#202938',
  },
  description: {
    marginTop: 10,
    fontSize: 16,
    color: '#596579',
  },
});

In this example, the View provides the main layout, while the two Text components display a heading and description. The styles control spacing, font size, font weight, text color, and background color.

2. Styling Text in React Native

Text styling controls the appearance, readability, and alignment of written content. React Native provides the Text component for displaying text. Text-specific style properties include fontSize, fontWeight, fontStyle, color, textAlign, lineHeight, and letterSpacing.

2.1 The Text Component

The Text component is used for titles, paragraphs, labels, captions, button text, prices, and other written content. Unlike a web page, where text can often appear directly inside many HTML elements, React Native text should generally be rendered inside a Text component.

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

export default function TextExample() {
  return (
    <View>
      <Text>This is a simple text example.</Text>
    </View>
  );
}

2.2 fontSize

The fontSize property controls the size of the characters. React Native style dimensions are generally density-independent units rather than web CSS pixels.

const styles = StyleSheet.create({
  smallText: {
    fontSize: 12,
  },
  normalText: {
    fontSize: 16,
  },
  heading: {
    fontSize: 28,
  },
});

Use a clear type scale rather than choosing unrelated sizes throughout the application. For example, body text might use 16 units, secondary text 14 units, and screen headings 26 to 32 units. These are starting points, not universal rules.

2.3 color

The color property changes the text color. React Native supports named colors and common CSS-style color formats, including hexadecimal values, RGB, and RGBA.

const styles = StyleSheet.create({
  primaryText: {
    color: '#1D4ED8',
  },
  secondaryText: {
    color: '#64748B',
  },
  errorText: {
    color: '#DC2626',
  },
  mutedText: {
    color: 'rgba(30, 41, 59, 0.65)',
  },
});

Choose foreground and background colors with sufficient contrast. Avoid using color as the only way to communicate an error or status; include a descriptive message or icon when appropriate.

2.4 fontWeight

The fontWeight property controls how thick or bold text appears. Common values include '400', '500', '600', '700', and 'bold'. The available appearance can depend on the selected font and operating system.

const styles = StyleSheet.create({
  regularText: {
    fontWeight: '400',
  },
  mediumText: {
    fontWeight: '500',
  },
  boldText: {
    fontWeight: '700',
  },
});

Use heavier weights to establish hierarchy, such as making headings bold while keeping long paragraphs at a regular weight.

2.5 fontStyle

The fontStyle property is commonly used to display text in normal or italic style.

const styles = StyleSheet.create({
  normal: {
    fontStyle: 'normal',
  },
  italic: {
    fontStyle: 'italic',
  },
});

2.6 textAlign

The textAlign property controls horizontal text alignment within the available text area. Common values include 'left', 'center', 'right', and 'justify'. Rendering of justified text may differ between platforms.

const styles = StyleSheet.create({
  leftAligned: {
    textAlign: 'left',
  },
  centered: {
    textAlign: 'center',
  },
  rightAligned: {
    textAlign: 'right',
  },
});

Center alignment is useful for short titles, onboarding screens, and empty states. Left alignment is often easier to read for longer paragraphs in left-to-right languages.

2.7 lineHeight

The lineHeight property controls the vertical distance between lines of text. Appropriate line height makes paragraphs more comfortable to read.

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    lineHeight: 24,
  },
  heading: {
    fontSize: 26,
    lineHeight: 32,
  },
});

A useful starting point for body text is a line height around 1.4 to 1.6 times the font size. Adjust it based on the font, content, and platform.

2.8 letterSpacing

The letterSpacing property adjusts the spacing between characters. It can be useful for short labels, uppercase headings, and compact interface elements.

const styles = StyleSheet.create({
  label: {
    fontSize: 12,
    letterSpacing: 1,
    fontWeight: '600',
    textTransform: 'uppercase',
  },
});

Excessive letter spacing can reduce readability, especially in long paragraphs and small text.

2.9 textTransform

The textTransform property changes the visual capitalization of text without requiring the original string to be modified. Common values are 'none', 'uppercase', 'lowercase', and 'capitalize'.

const styles = StyleSheet.create({
  uppercaseLabel: {
    textTransform: 'uppercase',
  },
  capitalizedLabel: {
    textTransform: 'capitalize',
  },
});

Do not use capitalization transformations where the exact capitalization of names, identifiers, or user-entered content must be preserved.

2.10 Text Decoration

The textDecorationLine property controls text decoration. It supports values such as 'underline', 'line-through', and 'none'.

const styles = StyleSheet.create({
  underlined: {
    textDecorationLine: 'underline',
  },
  completedTask: {
    textDecorationLine: 'line-through',
  },
});

Text decoration can be used for completed tasks, prices that are no longer current, or labels that need a visual distinction. For links, also provide an accessible interaction and appropriate touch target.

2.11 Limiting Text to a Number of Lines

The numberOfLines prop limits how many lines of text are displayed. It is useful for product titles, cards, news previews, and list items.

<Text numberOfLines={2} ellipsizeMode="tail">
  This is a long product description that may take more than two lines.
</Text>

When the text exceeds the allowed line count, it is truncated. Ensure users can still access important information through a detail screen, an expanded view, or another suitable interaction.

2.12 Combining Text Styles

Text components can be nested to style individual portions of a sentence differently. Nested text is useful for emphasis, highlighted words, and mixed-format messages.

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

export default function StyledSentence() {
  return (
    <Text style={styles.paragraph}>
      Learn <Text style={styles.highlight}>React Native</Text>
      {' '}to build mobile applications.
    </Text>
  );
}

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 17,
    color: '#334155',
  },
  highlight: {
    fontWeight: '700',
    color: '#2563EB',
  },
});

The parent Text defines the default appearance, while the nested Text overrides selected properties.

2.13 Example: Styling a Profile Heading and Description

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

export default function ProfileHeader() {
  return (
    <View style={styles.container}>
      <Text style={styles.name}>Aarav Sharma</Text>
      <Text style={styles.role}>React Native Developer</Text>
      <Text style={styles.description}>
        Building useful and accessible mobile experiences.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  name: {
    fontSize: 26,
    fontWeight: '700',
    color: '#0F172A',
  },
  role: {
    marginTop: 4,
    fontSize: 16,
    fontWeight: '600',
    color: '#2563EB',
  },
  description: {
    marginTop: 10,
    fontSize: 15,
    lineHeight: 23,
    color: '#475569',
  },
});

3. Styling Images in React Native

Images display profile photos, product photographs, illustrations, banners, logos, and other visual assets. React Native provides the Image component for rendering image resources.

3.1 Importing the Image Component

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

React Native supports bundled local images through static require() calls and remote images through a URI source. Remote images usually require explicit dimensions or a container that establishes the rendered size.

3.2 Displaying a Local Image

A local image is included in the application project. The path in require() must be a static path known to the bundler.

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

export default function LocalImageExample() {
  return (
    <View style={styles.container}>
      <Image
        source={require('./assets/profile.png')}
        style={styles.image}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  image: {
    width: 120,
    height: 120,
  },
});

Place the image file at the specified project path. If the file is stored elsewhere, update the path accordingly.

3.3 Displaying a Remote Image

Remote images are loaded from a URL. Use the uri property inside the source object.

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

export default function RemoteImageExample() {
  return (
    <Image
      source={{ uri: 'https://example.com/photo.jpg' }}
      style={styles.image}
      accessibilityLabel="Profile photograph"
    />
  );
}

const styles = StyleSheet.create({
  image: {
    width: 180,
    height: 180,
  },
});

Replace the example URL with a real image URL that is accessible to the device. For production applications, handle missing or failed images and consider loading placeholders where appropriate.

3.4 width and height

The width and height properties define the rendered dimensions of an image. A clear size helps prevent layout shifts and makes the image's space predictable.

const styles = StyleSheet.create({
  thumbnail: {
    width: 80,
    height: 80,
  },
  banner: {
    width: '100%',
    height: 180,
  },
});

Percentage dimensions depend on the dimensions of the containing layout. Ensure the parent has a usable size when using percentage-based sizing.

3.5 resizeMode

The resizeMode property controls how an image fits inside its layout box. Common values include 'cover', 'contain', 'stretch', 'repeat', and 'center'. Supported behavior can vary slightly by platform and image type.

<Image
  source={require('./assets/product.png')}
  style={{ width: 200, height: 160 }}
  resizeMode="contain"
/>

For new React Native projects, you may also encounter the objectFit style property in supported versions. Use the property documented for the React Native version your project uses.

3.6 Making Circular Images

Circular profile pictures are commonly created by applying a large borderRadius to a square image. The width and height should be equal for a true circle.

const styles = StyleSheet.create({
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
});

For a circular image with a border, combine borderRadius with a border width and color. If the image is inside a wrapper, use overflow: 'hidden' on the wrapper when clipping its contents is necessary.

3.7 Rounded-Corner Images

Rounded image corners are often used in cards, article previews, and product galleries.

const styles = StyleSheet.create({
  productImage: {
    width: '100%',
    height: 180,
    borderRadius: 12,
  },
});

When image corners do not clip as expected, place the image inside a container with the same borderRadius and overflow: 'hidden'. Verify the result on both Android and iOS.

3.8 Adding a Border to an Image

const styles = StyleSheet.create({
  borderedImage: {
    width: 120,
    height: 120,
    borderWidth: 2,
    borderColor: '#CBD5E1',
    borderRadius: 12,
  },
});

The borderWidth property controls thickness, and borderColor controls color. Rounded corners can be combined with borders to create framed thumbnails and profile images.

3.9 Using Images with Aspect Ratios

An aspect ratio describes the relationship between an image's width and height. For example, a ratio of 16 / 9 is suitable for many banners and video thumbnails.

const styles = StyleSheet.create({
  bannerImage: {
    width: '100%',
    aspectRatio: 16 / 9,
  },
  squareImage: {
    width: 150,
    aspectRatio: 1,
  },
});

When using aspectRatio, provide enough sizing information for React Native to calculate the other dimension. This can help create flexible image layouts.

3.10 Accessibility for Images

Images that convey meaningful information should have an appropriate accessibility label. Decorative images may need different treatment so they do not add unnecessary information for assistive technology.

<Image
  source={require('./assets/company-logo.png')}
  style={{ width: 100, height: 60 }}
  accessible={true}
  accessibilityLabel="Company logo"
/>

Use concise labels that explain the image's purpose. Do not use a filename as the label when it does not meaningfully describe the image.

4. Styling Borders in React Native

Borders define the edges of a component. They can separate cards from the background, highlight form fields, frame images, and create visual structure. React Native supports border width, border color, border radius, and individual side-specific border properties.

4.1 borderWidth

The borderWidth property sets the thickness of the border around a component.

const styles = StyleSheet.create({
  thinBorder: {
    borderWidth: 1,
  },
  thickBorder: {
    borderWidth: 3,
  },
});

A thin border is often enough to separate cards or fields. Thick borders should be used selectively to avoid making the interface look crowded.

4.2 borderColor

The borderColor property sets the color of the border.

const styles = StyleSheet.create({
  defaultBorder: {
    borderWidth: 1,
    borderColor: '#CBD5E1',
  },
  activeBorder: {
    borderWidth: 2,
    borderColor: '#2563EB',
  },
  errorBorder: {
    borderWidth: 1,
    borderColor: '#DC2626',
  },
});

Use border colors consistently to represent neutral, selected, and error states. Error states should also include explanatory text or another accessible indication.

4.3 borderRadius

The borderRadius property rounds the corners of a component. It is useful for cards, buttons, images, badges, and input fields.

const styles = StyleSheet.create({
  smallRadius: {
    borderRadius: 4,
  },
  mediumRadius: {
    borderRadius: 10,
  },
  largeRadius: {
    borderRadius: 18,
  },
  pill: {
    borderRadius: 999,
  },
});

A large radius can create pill-shaped elements when the element's height and width permit it. Choose radii that match the design system rather than applying unrelated values to every component.

4.4 Individual Border Sides

React Native supports side-specific properties such as borderTopWidth, borderBottomWidth, borderLeftWidth, and borderRightWidth, with corresponding color properties.

const styles = StyleSheet.create({
  separator: {
    borderBottomWidth: 1,
    borderBottomColor: '#E2E8F0',
    paddingBottom: 12,
  },
  topAccent: {
    borderTopWidth: 4,
    borderTopColor: '#2563EB',
    paddingTop: 12,
  },
});

Side-specific borders are useful for list separators, section dividers, and cards with a colored accent along one edge.

4.5 Creating a Card with Borders

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

export default function CardExample() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Course Overview</Text>
      <Text style={styles.description}>
        Learn the fundamentals of mobile app development.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 18,
    borderWidth: 1,
    borderColor: '#D7DEE8',
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
  },
  title: {
    fontSize: 18,
    fontWeight: '700',
    color: '#0F172A',
  },
  description: {
    marginTop: 8,
    fontSize: 14,
    lineHeight: 21,
    color: '#475569',
  },
});

This example creates a card with a light border, rounded corners, white background, and internal spacing. The border makes the card distinct from its surroundings without relying on a heavy visual effect.

4.6 Borders for Input States

Form fields often change border color when focused, invalid, or successfully validated. State-dependent styling helps users understand what is happening.

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#CBD5E1',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  inputFocused: {
    borderColor: '#2563EB',
  },
  inputError: {
    borderColor: '#DC2626',
  },
});

Apply the appropriate style based on component state. Ensure focus and error indicators are sufficiently visible and are not communicated through color alone.

5. Styling Backgrounds in React Native

Background styling controls the visual area behind text, images, and other components. React Native commonly uses backgroundColor to create plain backgrounds. Images can also be used as backgrounds by positioning an ImageBackground component behind content.

5.1 backgroundColor

The backgroundColor property changes the background color of a component.

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F8FAFC',
  },
  card: {
    backgroundColor: '#FFFFFF',
  },
  primaryButton: {
    backgroundColor: '#2563EB',
  },
});

Use background colors to distinguish the screen, cards, action areas, and status messages. A limited color palette makes the interface easier to scan.

5.2 Transparent Backgrounds

React Native supports transparent colors and RGBA values. An alpha value controls opacity, where 0 is fully transparent and 1 is fully opaque.

const styles = StyleSheet.create({
  overlay: {
    backgroundColor: 'rgba(15, 23, 42, 0.55)',
  },
});

A semi-transparent overlay can dim content behind a dialog or image caption. Ensure text placed on top of the overlay remains readable.

5.3 ImageBackground

The ImageBackground component displays an image behind its child components. It is useful for hero sections, promotional banners, welcome screens, and profile headers.

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

export default function BannerExample() {
  return (
    <ImageBackground
      source={require('./assets/banner.jpg')}
      style={styles.banner}
      imageStyle={styles.bannerImage}
      resizeMode="cover"
    >
      <Text style={styles.title}>Discover New Skills</Text>
      <Text style={styles.subtitle}>
        Start learning with React Native.
      </Text>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  banner: {
    minHeight: 220,
    justifyContent: 'flex-end',
    padding: 20,
  },
  bannerImage: {
    borderRadius: 16,
  },
  title: {
    fontSize: 26,
    fontWeight: '700',
    color: '#FFFFFF',
  },
  subtitle: {
    marginTop: 8,
    fontSize: 15,
    color: '#FFFFFF',
  },
});

The ImageBackground component renders the image behind its children. The imageStyle prop styles the underlying image, while the main style prop styles the container.

5.4 Improving Text Contrast on Background Images

Text can be difficult to read when a background image has many colors or bright areas. One solution is to place a semi-transparent view behind the text or choose a darker image with enough contrast.

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

export default function ReadableBanner() {
  return (
    <ImageBackground
      source={require('./assets/banner.jpg')}
      style={styles.banner}
      resizeMode="cover"
    >
      <View style={styles.overlay}>
        <Text style={styles.title}>Explore the World</Text>
        <Text style={styles.subtitle}>
          Find your next adventure.
        </Text>
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  banner: {
    minHeight: 220,
    justifyContent: 'flex-end',
    overflow: 'hidden',
    borderRadius: 16,
  },
  overlay: {
    padding: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.45)',
  },
  title: {
    fontSize: 25,
    fontWeight: '700',
    color: '#FFFFFF',
  },
  subtitle: {
    marginTop: 6,
    color: '#FFFFFF',
    fontSize: 15,
  },
});

The semi-transparent overlay creates a darker area behind the text. Always test the result with the actual image and content because a fixed opacity will not guarantee sufficient contrast for every background.

5.5 Backgrounds for Status Messages

Different background colors can distinguish informational, success, warning, and error messages.

const styles = StyleSheet.create({
  successMessage: {
    backgroundColor: '#DCFCE7',
    padding: 12,
    borderRadius: 8,
  },
  warningMessage: {
    backgroundColor: '#FEF3C7',
    padding: 12,
    borderRadius: 8,
  },
  errorMessage: {
    backgroundColor: '#FEE2E2',
    padding: 12,
    borderRadius: 8,
  },
});

Pair each background with clear text, such as “Changes saved successfully” or “Please check your email address.” This makes the status understandable to users who may not distinguish the colors.

5.6 Backgrounds and Screen Layout

Background colors can be applied at different levels of the component hierarchy. A screen may have a light-gray background while individual cards have white backgrounds. Apply backgrounds to the component that owns the visual area you want to color.

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

export default function ScreenExample() {
  return (
    <View style={styles.screen}>
      <Text style={styles.heading}>My Dashboard</Text>
      <View style={styles.card}>
        <Text style={styles.cardTitle}>Your Progress</Text>
        <Text style={styles.cardText}>You are making progress.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F1F5F9',
  },
  heading: {
    fontSize: 26,
    fontWeight: '700',
    color: '#0F172A',
    marginBottom: 18,
  },
  card: {
    padding: 18,
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#1E293B',
  },
  cardText: {
    marginTop: 8,
    color: '#64748B',
    fontSize: 15,
  },
});

6. Combining Text, Images, Borders, and Backgrounds

Real application interfaces combine multiple styling techniques. A profile card, for example, may contain a circular image, a bold name, a secondary role, a description, a border, and a colored background.

6.1 Complete Profile Card Example

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

export default function ProfileCard() {
  return (
    <View style={styles.card}>
      <Image
        source={require('./assets/profile.png')}
        style={styles.avatar}
        accessibilityLabel="Profile photo"
      />
      <View style={styles.details}>
        <Text style={styles.name}>Aarav Sharma</Text>
        <Text style={styles.role}>Mobile App Developer</Text>
        <Text style={styles.description}>
          Creating modern applications with React Native.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#E2E8F0',
    borderRadius: 14,
  },
  avatar: {
    width: 76,
    height: 76,
    borderRadius: 38,
    borderWidth: 2,
    borderColor: '#DBEAFE',
  },
  details: {
    flex: 1,
    marginLeft: 14,
  },
  name: {
    fontSize: 18,
    fontWeight: '700',
    color: '#0F172A',
  },
  role: {
    marginTop: 4,
    fontSize: 14,
    fontWeight: '600',
    color: '#2563EB',
  },
  description: {
    marginTop: 6,
    fontSize: 13,
    lineHeight: 19,
    color: '#64748B',
  },
});

This component demonstrates how a layout and its visual styles work together. The row layout places the image beside the text, flex: 1 allows the details area to use the remaining width, and the border and background distinguish the card.

6.2 Complete Product Card Example

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

export default function ProductCard() {
  return (
    <View style={styles.card}>
      <Image
        source={require('./assets/product.png')}
        style={styles.image}
        resizeMode="cover"
        accessibilityLabel="Product photograph"
      />
      <View style={styles.content}>
        <Text style={styles.category}>FEATURED PRODUCT</Text>
        <Text style={styles.title}>Wireless Headphones</Text>
        <Text style={styles.description}>
          Comfortable headphones for everyday listening.
        </Text>
        <Text style={styles.price}>₹2,499</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    margin: 16,
    backgroundColor: '#FFFFFF',
    borderRadius: 14,
    borderWidth: 1,
    borderColor: '#E2E8F0',
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    height: 190,
  },
  content: {
    padding: 16,
  },
  category: {
    fontSize: 11,
    letterSpacing: 1,
    fontWeight: '700',
    color: '#64748B',
  },
  title: {
    marginTop: 6,
    fontSize: 20,
    fontWeight: '700',
    color: '#0F172A',
  },
  description: {
    marginTop: 8,
    fontSize: 14,
    lineHeight: 21,
    color: '#475569',
  },
  price: {
    marginTop: 12,
    fontSize: 19,
    fontWeight: '700',
    color: '#15803D',
  },
});

The product card combines image sizing, image cropping, rounded corners, text hierarchy, spacing, border styling, and background color. The card uses overflow: 'hidden' so its image can follow the rounded outer corners.

7. Organizing Styles with StyleSheet.create()

The StyleSheet.create() method helps organize style definitions outside the component's returned JSX. It improves readability and makes styles easier to reuse and maintain. It does not replace the need to understand individual style properties.

7.1 Defining Reusable Styles

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#0F172A',
  },
  paragraph: {
    fontSize: 16,
    lineHeight: 24,
    color: '#475569',
  },
  card: {
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#E2E8F0',
  },
});

export default styles;

For larger applications, styles may be placed in a separate file and imported into components. Keep styles close to their components when that improves clarity, and centralize shared design tokens when many screens use the same values.

7.2 Combining Style Objects

A component's style prop can accept an array of style objects. Later objects generally override conflicting properties from earlier objects.

<Text style={[styles.title, styles.highlightedTitle]}>
  Featured Course
</Text>

This approach allows a component to keep its base appearance while adding a selected, highlighted, or conditional variation.

7.3 Conditional Styles

Conditional styles are selected based on state or props. For example, an invalid input may display a red border while a valid input retains a neutral border.

<View
  style={[
    styles.inputContainer,
    hasError ? styles.inputError : styles.inputNormal,
  ]}
>
  {/* Input content */}
</View>

The hasError variable should be defined in the component. Conditional styling is useful for interactive components, but avoid duplicating entire style objects when only a few properties change.

8. Responsive and Accessible Styling

8.1 Prefer Flexible Layouts

Fixed dimensions can work for icons and small thumbnails, but large screen sections should usually use flexible sizing. Use flexbox, percentage widths where appropriate, and aspect ratios to adapt to different devices.

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 16,
  },
  image: {
    width: '100%',
    aspectRatio: 16 / 9,
    borderRadius: 12,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
  },
});

8.2 Support Larger Text

Users may increase system text size for accessibility. Avoid layouts that assume every text element will fit on one line. Test long titles, buttons, cards, and form fields at larger font scales.

React Native text can scale with the user's accessibility settings. The allowFontScaling prop can control scaling for a specific text component, but disabling scaling broadly can create accessibility barriers. Prefer flexible layouts that accommodate larger text.

8.3 Maintain Sufficient Contrast

• Use readable text colors against both plain and image backgrounds.
• Check secondary text and placeholder text, not only headings.
• Use more than color to communicate errors, success, and selection.
• Test the interface with real content and different display settings.

8.4 Respect Platform Differences

React Native supports Android and iOS, but text rendering, font availability, image clipping, and some styling behaviors can differ by platform. Test important screens on both platforms rather than assuming identical rendering.

9. Common Styling Mistakes and Troubleshooting

9.1 Debugging Checklist

1. Confirm that the correct component is being rendered.
2. Check that the style property names use camelCase.
3. Verify that all required imports and local image paths are correct.
4. Check the width and height of images and their parent containers.
5. Review conflicting styles in style arrays and conditional expressions.
6. Test long text, small screens, and larger accessibility font sizes.
7. Compare the result on Android and iOS.

10. Styling Best Practices

• Use StyleSheet.create() to organize reusable style definitions.
• Keep a consistent typography scale for headings, body text, labels, and captions.
• Use a small, consistent color palette rather than many unrelated colors.
• Choose image resize behavior based on whether the whole image must remain visible.
• Use borderRadius, borderWidth, and borderColor consistently across cards and fields.
• Use spacing properties such as padding and margin to keep content from feeling crowded.
• Ensure image and text combinations remain legible on different screen sizes.
• Provide meaningful accessibility labels for informative images.
• Handle remote-image failures and avoid assuming a network resource will always load.
• Keep important text visible when users increase the system font size.
• Test on real devices or reliable platform simulators.
• Reuse design tokens for common colors, spacing, border radii, and typography.

11. Practical Project: Create a Styled Course Card

Project Objective: Build a course card that combines text, an image, borders, rounded corners, and a background. This exercise reinforces the main styling techniques covered in the lesson.

11.1 Requirements

• Display a course image at the top of the card.
• Show a category label, course title, description, and price.
• Use different font sizes and weights to establish hierarchy.
• Apply a light border and rounded card corners.
• Use a clear background color and readable text colors.
• Keep the image proportional and prevent it from stretching.

11.2 Example Implementation

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

export default function CourseCard() {
  return (
    <View style={styles.card}>
      <Image
        source={require('./assets/react-native-course.jpg')}
        style={styles.image}
        resizeMode="cover"
        accessibilityLabel="React Native course illustration"
      />
      <View style={styles.content}>
        <Text style={styles.category}>MOBILE DEVELOPMENT</Text>
        <Text style={styles.title}>React Native Training</Text>
        <Text style={styles.description}>
          Learn components, styling, navigation, and mobile app development.
        </Text>
        <Text style={styles.price}>Beginner Friendly</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    margin: 16,
    borderWidth: 1,
    borderColor: '#DCE3EC',
    borderRadius: 16,
    backgroundColor: '#FFFFFF',
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    aspectRatio: 16 / 9,
  },
  content: {
    padding: 18,
  },
  category: {
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 1,
    color: '#2563EB',
  },
  title: {
    marginTop: 8,
    fontSize: 22,
    fontWeight: '700',
    color: '#0F172A',
  },
  description: {
    marginTop: 8,
    fontSize: 15,
    lineHeight: 23,
    color: '#475569',
  },
  price: {
    marginTop: 14,
    fontSize: 15,
    fontWeight: '700',
    color: '#15803D',
  },
});

Note: Add an image file at ./assets/react-native-course.jpg, or change the require() path to match your project. The code is a presentation example; add a button and navigation separately if you want the card to open a course detail screen.

11.3 Expected Result

The application displays a course card with a large image, a small uppercase category, a bold course title, a readable description, and a highlighted final label. The card has rounded corners, a light border, and a white background.

12. Practice Exercises

1. Create a heading with a font size of 28, a bold weight, and a dark text color.
2. Write a paragraph with a font size of 16, a line height of 24, and a muted text color.
3. Display a local image with a width of 120 and a height of 120.
4. Turn a square profile image into a circle using borderRadius.
5. Create a card with a border width of 1, a light border color, and rounded corners.
6. Build a banner with an image background and white heading text.
7. Apply a semi-transparent overlay to improve the readability of text on an image.
8. Use conditional styles to change a form field's border when an error occurs.
9. Build a product card that combines an image, title, description, and price.
10. Test your interface with long text and larger accessibility font sizes.

13. Interview Questions and Answers

Q1. How is styling handled in React Native?

Answer: React Native uses JavaScript style objects passed through component props. The styling system resembles CSS but uses camelCase property names and does not support every web CSS feature.

Q2. What is the purpose of StyleSheet.create()?

Answer: It organizes style definitions into a reusable object, helping keep component code readable and maintainable.

Q3. Which component is used to display text?

Answer: The Text component is used to render text in React Native.

Q4. What is the difference between fontSize and fontWeight?

Answer: fontSize controls character size, while fontWeight controls how thick or bold the characters appear.

Q5. What does textAlign do?

Answer: It controls the horizontal alignment of text, with common values such as left, center, and right.

Q6. How can you display a local image?

Answer: Use the Image component with a static source such as require('./assets/photo.png').

Q7. How can you display a remote image?

Answer: Pass a URI object to the source prop, for example source={{ uri: 'https://example.com/photo.jpg' }}, and define the image dimensions or a suitable layout.

Q8. What is the difference between cover and contain?

Answer: cover fills the image area and may crop the image, while contain keeps the entire image visible and may leave empty space.

Q9. How do you make an image circular?

Answer: Give the image equal width and height and set borderRadius to approximately half of that size.

Q10. How do you create rounded card corners?

Answer: Apply a suitable borderRadius to the card. If its child content must be clipped to the rounded shape, use overflow: 'hidden' when appropriate.

Q11. How do you set a border around a component?

Answer: Use borderWidth to set the thickness, borderColor to set the color, and optionally borderRadius to round the corners.

Q12. How do you set a background color?

Answer: Use the backgroundColor style property on the component that should own the background.

Q13. What is ImageBackground used for?

Answer: It displays an image behind child components, making it useful for banners, hero sections, and image-based headers.

Q14. How can you improve text readability over an image?

Answer: Use a suitable image, position the text in a less busy area, or add a semi-transparent overlay behind the text.

Q15. Why should accessibility be considered during styling?

Answer: Accessible styling improves readability and usability for people with different visual and motor needs. It includes readable contrast, support for larger text, and meaningful accessibility labels for informative images.

14. Quick Revision Checklist

• Text: Practise fontSize, fontWeight, fontStyle, color, textAlign, lineHeight, and letterSpacing.
• Text behavior: Understand nested Text, numberOfLines, and textTransform.
• Images: Know the difference between local require() sources and remote URI sources.
• Image sizing: Practise width, height, aspectRatio, and resizeMode.
• Image appearance: Practise circular images, rounded corners, borders, and accessibility labels.
• Borders: Understand borderWidth, borderColor, borderRadius, and individual side properties.
• Backgrounds: Understand backgroundColor, transparent colors, and ImageBackground.
• Style organization: Use StyleSheet.create(), style arrays, and conditional styling.
• Accessibility: Check text contrast, font scaling, and image descriptions.
• Testing: Verify image loading, rounded-corner clipping, and layout behavior on Android and iOS.

15. Official Documentation and Learning Resources

• React Native Text Component — text rendering and supported text properties.
• React Native Image Component — image sources, sizing, and display behavior.
• React Native ImageBackground — displaying background images behind content.
• React Native Style — supported style properties and styling concepts.
• React Native StyleSheet — organizing and reusing styles.
• React Native Accessibility — accessibility properties and platform considerations.
• React Native Training at JustAcademy — course information.
• Register for a JustAcademy Course Demo — demo registration.
• JustAcademy Official Website — explore available training courses.

16. Conclusion

Styling text, images, borders, and backgrounds is a fundamental React Native skill. Text styling establishes readable content and visual hierarchy. Image styling controls size, cropping, shape, and accessibility. Border properties define component boundaries, while backgrounds create contrast and separate interface sections.

By combining these techniques with StyleSheet.create(), flexible layouts, consistent design choices, and accessibility best practices, developers can build attractive and maintainable mobile interfaces. Practise by creating profile cards, product cards, banners, and course cards, then test them on different devices and with different text sizes.

To learn more about React Native training, visit JustAcademy's React Native Training Course or register for a course demo.