React Native Components Cheat Sheet: View, Text, Image, Pressable & Input

React Native components map to native views, not the DOM. View is the box, Text is the only place strings belong, Pressable handles taps, and TextInput is a controlled field. Learn these core primitives before you reach for a huge UI kit.

This React Native cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• View: Layout box. Cannot hold raw text. Default flex direction is column.
• Text: All copy lives here. Nest Text to style spans. numberOfLines + ellipsizeMode.
• Image: source={require("./a.png")} local, { uri } remote. Set width/height or it may collapse.
• Pressable: Preferred tap target. onPress, style={({ pressed }) => ...}.
• Button: Native look, limited styling. Use Pressable for custom UI.
• TextInput: value + onChangeText. keyboardType, autoCapitalize, secureTextEntry.
• ScrollView: Small content. Large lists belong in FlatList.
• SafeAreaView: Insets for notch and home indicator (or use safe-area-context).

Copy-paste examples

Card with image, text, and press

Wrap strings in Text. Pressable can wrap a whole card; keep hit slop in mind for small icons.

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

export function ProductCard({ title, uri, onPress }) {
  return (
    <Pressable onPress={onPress} style={({ pressed }) => [styles.card, pressed && styles.pressed]}>
      <Image source={{ uri }} style={styles.img} />
      <View>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.hint}>Tap for details</Text>
      </View>
    </Pressable>
  );
}
const styles = StyleSheet.create({
  card: { flexDirection: 'row', gap: 12, padding: 12 },
  pressed: { opacity: 0.7 },
  img: { width: 64, height: 64, borderRadius: 8 },
  title: { fontSize: 16, fontWeight: '700' },
  hint: { color: '#64748b' },
});

Common mistakes

• Putting raw strings as View children — Android throws.
• Using div, span, or className from web React.
• Remote Image without size — layout collapses to zero.
• Nesting Pressable inside Pressable and fighting gesture ownership.

FAQ

1. Is there a <div>? No. View is the box. Text is the text. CSS class names do not exist unless a library adds them.

1. Button or Pressable? Button is fine for a quick native action. Pressable (or a design-system button built on it) for branded UI.

1. How do I make a link? Linking.openURL or a navigation navigate. There is no <a href>.

Related React Native cheat sheets

• React Native Cheat Sheet 2026
• React Native Navigation Cheat Sheet
• React Native Hooks Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds mobile app development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.