Core Components
Learn about the core UI components in React Native and how to style them.
Learning Goals
The Core Concept
Unlike React for the web which uses HTML tags like <div>, <h1>, and <p>, React Native provides its own set of core components. The most common ones are <View> (similar to <div>), <Text> (for any text), <Image>, and <ScrollView>. Styling is done using a JavaScript object, typically created with StyleSheet.create(), which closely resembles CSS but uses camelCase properties and Flexbox for layout by default.
Visual guide
React-native concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
import React from 'react';
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
export default function Profile() {
return (
<ScrollView contentContainerStyle={styles.container}>
<Image
source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
style={styles.logo}
/>
<Text style={styles.title}>Welcome to My Profile</Text>
<View style={styles.card}>
<Text>React Native makes mobile dev easy!</Text>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: { padding: 20, alignItems: 'center' },
logo: { width: 100, height: 100, marginBottom: 20 },
title: { fontSize: 22, fontWeight: 'bold' },
card: { marginTop: 20, padding: 15, backgroundColor: '#eee', borderRadius: 8 }
});Expected Output
A scrollable screen showing a small React Native logo, a bold title, and a styled card containing some text.
Notes App
Hands-on practice task
The Challenge
Build a simple app that displays a list of notes using core components and ScrollView.
Helpful Hints
- •Use an array of strings in React state for your notes.
- •Map over the array and return a <View> containing <Text> for each note.
- •Use <ScrollView> to ensure the user can scroll if there are many notes.
Quick Knowledge Check
Can I use CSS files in React Native?
Continue Learning
Next steps after this lesson
Build a simple app that displays a list of notes using core components and ScrollView.
Supercharge your career workflows!
Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.