Core Components

Core Components in React Native

React Native provides a set of built-in components that map to native platform views. These are the building blocks you'll use to create your app's interface.

The Basics

  ┌─────────────────────────────────────────────────┐
  │           Core Components                       │
  ├─────────────────────────────────────────────────┤
  │                                                  │
  │          → Like a 
 (container)       │
  │          → Like a 
 (text display)      │
  │         → Like  (image display)     │
  │     → Like  (text input)      │
  │    → Scrollable container           │
  │   → Pressable element         │
  │                                                  │
  └─────────────────────────────────────────────────┘

Example: A Simple Card Component

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

const UserCard = ({ name, avatar, bio }) => {
  return (
    <View style={styles.card}>
      <Image source={{ uri: avatar }} style={styles.avatar} />
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.bio}>{bio}</Text>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Follow</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8 },
  avatar: { width: 80, height: 80, borderRadius: 40 },
  name: { fontSize: 18, fontWeight: 'bold', marginTop: 8 },
  bio: { fontSize: 14, color: '#666', marginTop: 4 },
  button: { marginTop: 12, padding: 8, backgroundColor: '#007AFF' },
  buttonText: { color: '#fff', textAlign: 'center' },
});

Lists and FlatList

For displaying lists of data, use FlatList instead of mapping over arrays. FlatList only renders items visible on screen, making it efficient for long lists.

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

const TodoList = ({ items }) => {
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <View style={styles.todoItem}>
          <Text>{item.text}</Text>
        </View>
      )}
    />
  );
};