React Native Tutorial

Getting Started with React Native JavaScript & JSX Essentials Core Components & Styling Props & State Hooks (useState & useEffect) Lists with FlatList Navigation (React Navigation) Networking with fetch / axios State Management (Context & Redux) Local Storage with AsyncStorage Native Modules & Permissions Building & Publishing (EAS / Stores)

Core Components & Styling

June 02, 2026 • 1 min read

React Native gives you native building blocks instead of HTML tags.

Core components

  • View — a container (like a div).
  • Text — all text must be inside Text.
  • Image — images.
  • ScrollView — scrollable area.
  • TextInput, Pressable/TouchableOpacity — input and taps.

Styling with StyleSheet + Flexbox

import { StyleSheet, View, Text } from 'react-native';
const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: '#fff' },
  title: { fontSize: 18, fontWeight: '700' },
});
<View style={styles.card}><Text style={styles.title}>Hi</Text></View>

Layout uses Flexbox (default direction is column): flexDirection, justifyContent, alignItems.

Tip: There are no CSS units — numbers are density-independent pixels. Use flex: 1 to fill space.

Summary

Build UI with View/Text/Image, style with StyleSheet, and lay out using Flexbox (column by default).