View, Text, Image Components
Deep dive into the core React Native components: View, Text, and Image, understanding their properties and use cases. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples
60 min•By Priygop Team•Last updated: Feb 2026
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 — a critical concept in cross-platform mobile development that you will use frequently in real projects
- ellipsizeMode - How to truncate text — a critical concept in cross-platform mobile development that you will use frequently in real projects
- selectable - whether text can be selected — a critical concept in cross-platform mobile development that you will use frequently in real projects
- onPress - Handle text press events — a critical concept in cross-platform mobile development that you will use frequently in real projects
- style - Text styling properties — a critical concept in cross-platform mobile development that you will use frequently in real projects
Image Component Features
- source - Image source (local, network, or base64) — a critical concept in cross-platform mobile development that you will use frequently in real projects
- resizeMode - How to resize the image — a critical concept in cross-platform mobile development that you will use frequently in real projects
- onLoad - Callback when image loads — a critical concept in cross-platform mobile development that you will use frequently in real projects
- onError - Callback when image fails to load — a critical concept in cross-platform mobile development that you will use frequently in real projects
- blurRadius - Apply blur effect to image — a critical concept in cross-platform mobile development that you will use frequently in real projects
Component Nesting Example
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;