Basic Components

React Native provides built-in components that map to native platform UI elements.

Core Components

Component	Purpose
`View`	Container (like div)
`Text`	Display text
`Image`	Display images
`TextInput`	Text input field
`ScrollView`	Scrollable container
`FlatList`	Performant list
`StyleSheet`	Create styles
`ActivityIndicator`	Loading spinner
`Button`	Simple button
`Pressable`	Flexible touchable

Example

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

const ProfileCard = ({ name, avatar }) => (
  <View style={styles.card}>
    <Image
      source={{ uri: avatar }}
      style={styles.avatar}
    />
    <Text style={styles.name}>{name}</Text>
  </View>
)

const styles = StyleSheet.create({
  card: {
    padding: 16,
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 8
  },
  avatar: { width: 80, height: 80, borderRadius: 40 },
  name: { fontSize: 18, fontWeight: 'bold', marginTop: 8 }
})

ℹ️ camelCase styles

React Native uses camelCase for style properties: backgroundColor not background-color, fontSize not font-size.

← PreviousRN Basics Next →Props