React Native Core Components: View, Text, Image, ScrollView and More

If you know HTML, think of View as div and Text as p, with some rules of its own.

Direct answer

React Native has built-in components such as View (container), Text (all text must be inside it), Image, ScrollView (scrolling content), TextInput and Pressable (touch handling). You combine them to build screens.

Example screen

import { View, Text, Image, TextInput, Pressable, StyleSheet } from "react-native";

export default function Profile() {
  return (
    <View style={styles.container}>
      <Image source={{ uri: "https://example.com/avatar.png" }} style={styles.avatar} />
      <Text style={styles.name}>Ada Lovelace</Text>
      <TextInput placeholder="Say something" style={styles.input} />
      <Pressable style={styles.button} onPress={() => console.log("pressed")}>
        <Text style={styles.buttonText}>Save</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, alignItems: "center" },
  avatar: { width: 96, height: 96, borderRadius: 48 },
  name: { fontSize: 20, marginVertical: 8 },
  input: { borderWidth: 1, borderColor: "#ccc", padding: 8, width: "100%" },
  button: { backgroundColor: "#3d5afe", padding: 12, marginTop: 12 },
  buttonText: { color: "#fff" },
});

Rules to remember

• Text must be inside Text.
• Use Pressable instead of buttons for custom styling.
• Use ScrollView for small lists and FlatList for long ones.

Where Teyro fits

Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.

The bottom line

Learn these six components and you can build most screens.

More guides

• React Native FlatList
• React Native Navigation
• React Native Styling
• React native tutorial for beginners
• React Native for Beginners course