Module 2: Core Components & Styling

View, Text, Image Components

Deep dive into the core React Native components: View, Text, and Image, understanding their properties and use cases

React Native Developer

View Component Deep Dive

The View component is the most fundamental building block in React Native. It's a container that supports layout with flexbox, styling, touch handling, and accessibility controls. It maps to UIView on iOS and View on Android.

Text Component Properties

•numberOfLines - Limit the number of lines
•ellipsizeMode - How to truncate text
•selectable - Whether text can be selected
•onPress - Handle text press events
•style - Text styling properties

Image Component Features

•source - Image source (local, network, or base64)
•resizeMode - How to resize the image
•onLoad - Callback when image loads
•onError - Callback when image fails to load
•blurRadius - Apply blur effect to image

Component Nesting Example

Code Example

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

const CardComponent = () => {
  return (
    <View style={styles.card}>
      <Image 
        source={{ uri: 'https://example.com/avatar.jpg' }}
        style={styles.avatar}
        resizeMode="cover"
      />
      <View style={styles.content}>
        <Text style={styles.title}>John Doe</Text>
        <Text style={styles.subtitle} numberOfLines={2}>
          Software Developer with 5 years of experience
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
  },
  content: {
    flex: 1,
    marginLeft: 12,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
});

export default CardComponent;

Swipe to see more code

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

const CardComponent = () => {
  return (
    <View style={styles.card}>
      <Image 
        source={{ uri: 'https://example.com/avatar.jpg' }}
        style={styles.avatar}
        resizeMode="cover"
      />
      <View style={styles.content}>
        <Text style={styles.title}>John Doe</Text>
        <Text style={styles.subtitle} numberOfLines={2}>
          Software Developer with 5 years of experience
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
  },
  content: {
    flex: 1,
    marginLeft: 12,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
});

export default CardComponent;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

StyleSheet & Flexbox

Master React Native styling with StyleSheet and Flexbox layout system for responsive and beautiful mobile interfaces

Content by: Ronak Macwan

React Native Developer

Connect

StyleSheet API

StyleSheet provides an abstraction layer similar to CSS stylesheets. It creates style objects with an ID that can be referenced instead of creating new style objects each time. This improves performance and enables better debugging.

Flexbox Layout System

•flex - How much space the component should take
•flexDirection - Main axis direction (row/column)
•justifyContent - Alignment along main axis
•alignItems - Alignment along cross axis
•flexWrap - Whether items should wrap
•alignContent - Alignment of wrapped lines

Common Layout Patterns

•Center content - justifyContent: 'center', alignItems: 'center'
•Space between - justifyContent: 'space-between'
•Equal spacing - flex: 1 on child components
•Full width/height - width: '100%', height: '100%'
•Aspect ratio - aspectRatio property

Responsive Design with Flexbox

Code Example

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

const { width } = Dimensions.get('window');

const ResponsiveLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Responsive Layout</Text>
      </View>
      
      <View style={styles.content}>
        <View style={styles.sidebar}>
          <Text>Sidebar</Text>
        </View>
        
        <View style={styles.main}>
          <Text>Main Content</Text>
        </View>
      </View>
      
      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    height: 60,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    flexDirection: width > 768 ? 'row' : 'column',
  },
  sidebar: {
    width: width > 768 ? 200 : '100%',
    height: width > 768 ? '100%' : 100,
    backgroundColor: '#E3F2FD',
    justifyContent: 'center',
    alignItems: 'center',
  },
  main: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    height: 50,
    backgroundColor: '#1976D2',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ResponsiveLayout;

Swipe to see more code

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

const { width } = Dimensions.get('window');

const ResponsiveLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Responsive Layout</Text>
      </View>
      
      <View style={styles.content}>
        <View style={styles.sidebar}>
          <Text>Sidebar</Text>
        </View>
        
        <View style={styles.main}>
          <Text>Main Content</Text>
        </View>
      </View>
      
      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    height: 60,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    flexDirection: width > 768 ? 'row' : 'column',
  },
  sidebar: {
    width: width > 768 ? 200 : '100%',
    height: width > 768 ? '100%' : 100,
    backgroundColor: '#E3F2FD',
    justifyContent: 'center',
    alignItems: 'center',
  },
  main: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    height: 50,
    backgroundColor: '#1976D2',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ResponsiveLayout;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Dimensions & Layout

Understanding device dimensions, screen sizes, and how to create layouts that work across different devices and orientations

Content by: Ronak Macwan

React Native Developer

Connect

Getting Device Dimensions

Use Dimensions API to get the screen dimensions and create responsive layouts. Dimensions.get('window') gives you the window dimensions, while Dimensions.get('screen') gives you the screen dimensions.

Handling Orientation Changes

Listen to orientation changes using Dimensions.addEventListener to update your layout when the device rotates between portrait and landscape modes.

Safe Area Handling

Use SafeAreaView or react-native-safe-area-context to handle safe areas on devices with notches, status bars, and home indicators. This ensures your content is not hidden behind system UI elements.

Responsive Dimensions Example

Code Example

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

const ResponsiveDimensions = () => {
  const [dimensions, setDimensions] = useState(Dimensions.get('window'));

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setDimensions(window);
    });

    return () => subscription?.remove();
  }, []);

  const isTablet = dimensions.width >= 768;
  const isLandscape = dimensions.width > dimensions.height;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Device: {isTablet ? 'Tablet' : 'Phone'}
      </Text>
      <Text style={styles.subtitle}>
        Orientation: {isLandscape ? 'Landscape' : 'Portrait'}
      </Text>
      <Text style={styles.info}>
        Width: {Math.round(dimensions.width)}px
      </Text>
      <Text style={styles.info}>
        Height: {Math.round(dimensions.height)}px
      </Text>
      
      <View style={[
        styles.content,
        isTablet && styles.tabletContent,
        isLandscape && styles.landscapeContent
      ]}>
        <Text>Responsive Content</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    marginBottom: 20,
  },
  info: {
    fontSize: 16,
    marginBottom: 5,
  },
  content: {
    width: '100%',
    height: 200,
    backgroundColor: '#E3F2FD',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    marginTop: 20,
  },
  tabletContent: {
    height: 300,
  },
  landscapeContent: {
    flexDirection: 'row',
  },
});

export default ResponsiveDimensions;

Swipe to see more code

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

const ResponsiveDimensions = () => {
  const [dimensions, setDimensions] = useState(Dimensions.get('window'));

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setDimensions(window);
    });

    return () => subscription?.remove();
  }, []);

  const isTablet = dimensions.width >= 768;
  const isLandscape = dimensions.width > dimensions.height;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Device: {isTablet ? 'Tablet' : 'Phone'}
      </Text>
      <Text style={styles.subtitle}>
        Orientation: {isLandscape ? 'Landscape' : 'Portrait'}
      </Text>
      <Text style={styles.info}>
        Width: {Math.round(dimensions.width)}px
      </Text>
      <Text style={styles.info}>
        Height: {Math.round(dimensions.height)}px
      </Text>
      
      <View style={[
        styles.content,
        isTablet && styles.tabletContent,
        isLandscape && styles.landscapeContent
      ]}>
        <Text>Responsive Content</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    marginBottom: 20,
  },
  info: {
    fontSize: 16,
    marginBottom: 5,
  },
  content: {
    width: '100%',
    height: 200,
    backgroundColor: '#E3F2FD',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    marginTop: 20,
  },
  tabletContent: {
    height: 300,
  },
  landscapeContent: {
    flexDirection: 'row',
  },
});

export default ResponsiveDimensions;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Platform-Specific Styling

Learn how to apply platform-specific styles and components to create native-feeling interfaces on both iOS and Android

Content by: Ronak Macwan

React Native Developer

Connect

Platform Detection

Use Platform.OS to detect the current platform and apply different styles or components based on whether the app is running on iOS or Android.

Platform-Specific Styles

Create platform-specific styles using Platform.select() to provide different style objects for iOS and Android, ensuring your app feels native on each platform.

Platform-Specific Components

Use Platform.select() to render different components for iOS and Android, such as different navigation patterns, button styles, or input components.

Platform-Specific Styling Example

Code Example

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

const PlatformSpecificExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Platform-Specific Styling</Text>
      
      <View style={styles.buttonContainer}>
        <Text style={styles.buttonText}>
          {Platform.OS === 'ios' ? 'iOS Button' : 'Android Button'}
        </Text>
      </View>
      
      <Text style={styles.description}>
        This text has different styling on iOS and Android
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: Platform.OS === 'ios' ? '#F2F2F7' : '#FAFAFA',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: Platform.OS === 'ios' ? '#000' : '#333',
  },
  buttonContainer: {
    backgroundColor: Platform.select({
      ios: '#007AFF',
      android: '#2196F3',
    }),
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: Platform.OS === 'ios' ? 8 : 4,
    marginBottom: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: Platform.OS === 'ios' ? '600' : '500',
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    color: Platform.select({
      ios: '#8E8E93',
      android: '#757575',
    }),
    fontFamily: Platform.select({
      ios: 'System',
      android: 'Roboto',
    }),
  },
});

export default PlatformSpecificExample;

Swipe to see more code

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

const PlatformSpecificExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Platform-Specific Styling</Text>
      
      <View style={styles.buttonContainer}>
        <Text style={styles.buttonText}>
          {Platform.OS === 'ios' ? 'iOS Button' : 'Android Button'}
        </Text>
      </View>
      
      <Text style={styles.description}>
        This text has different styling on iOS and Android
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: Platform.OS === 'ios' ? '#F2F2F7' : '#FAFAFA',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: Platform.OS === 'ios' ? '#000' : '#333',
  },
  buttonContainer: {
    backgroundColor: Platform.select({
      ios: '#007AFF',
      android: '#2196F3',
    }),
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: Platform.OS === 'ios' ? 8 : 4,
    marginBottom: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: Platform.OS === 'ios' ? '600' : '500',
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    color: Platform.select({
      ios: '#8E8E93',
      android: '#757575',
    }),
    fontFamily: Platform.select({
      ios: 'System',
      android: 'Roboto',
    }),
  },
});

export default PlatformSpecificExample;

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Core Components & Styling

Select Topics Overview

View, Text, Image Components

StyleSheet & Flexbox

Dimensions & Layout

Platform-Specific Styling

View, Text, Image Components

StyleSheet & Flexbox

Dimensions & Layout

Platform-Specific Styling

View, Text, Image Components

View Component Deep Dive

Text Component Properties

Image Component Features

Component Nesting Example

🎯 Practice Exercise

StyleSheet & Flexbox

StyleSheet API

Flexbox Layout System

Common Layout Patterns

Responsive Design with Flexbox

🎯 Practice Exercise

Dimensions & Layout

Getting Device Dimensions

Handling Orientation Changes

Safe Area Handling

Responsive Dimensions Example

🎯 Practice Exercise

Platform-Specific Styling

Platform Detection

Platform-Specific Styles

Platform-Specific Components

Platform-Specific Styling Example

🎯 Practice Exercise

Module 1: React Native Fundamentals

Module 3: User Input & Forms

Ready for the Next Module?