React Native Cheat Sheet (2026): Components, APIs & Styling

A React Native cheat sheet maps the components and APIs that replace HTML and CSS in a native app. You still write JavaScript and React, but you render View and Text, style with StyleSheet, and list data with FlatList instead of div and map in the DOM.

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: The box. Maps to UIView / android.view. Like div, but not for text.
• Text: All strings go in <Text>. Nesting Text is how you style spans.
• StyleSheet: StyleSheet.create caches styles. Numbers are density-independent pixels.
• Flex: Default flexDirection is column, unlike the web’s row.
• Image: <Image source={require("./a.png")} /> or { uri } for remote.
• TextInput: Controlled: value + onChangeText. Set autoCapitalize and keyboardType.
• Button vs Pressable: Use Pressable for custom UI; Button is native and hard to style.
• SafeAreaView: Keep content off the notch and home indicator.
• Platform: Platform.OS === "ios" or Platform.select({ ios, android }).
• Alert: Alert.alert(title, message) — not window.alert.

Copy-paste examples

Screen with styles

Column flex is the default. Center a card on the screen.

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

export function EmptyState() {
  return (
    <View style={styles.wrap}>
      <Text style={styles.title}>No projects yet</Text>
      <Text style={styles.body}>Pull to refresh or add a product.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: { flex: 1, justifyContent: 'center', padding: 24 },
  title: { fontSize: 20, fontWeight: '700' },
  body: { marginTop: 8, color: '#64748b' },
});

FlatList of products

Never map large arrays into ScrollView. FlatList virtualizes.

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

export function ProductList({ items }) {
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => String(item.id)}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
}

Common mistakes

• Putting raw strings outside <Text> — the app throws on Android.
• Using web CSS properties (margin-left, display:grid) that RN ignores.
• Scrolling a 500-row list with .map inside ScrollView — dropped frames.
• Hardcoding width: 400 instead of flex and useWindowDimensions.
• Forgetting to test on a real iOS and Android device; simulators hide keyboard and notch bugs.

FAQ

1. React Native vs React? React Native uses React’s component model but native widgets, not the DOM. There is no document or CSS file unless you add a library.

1. Expo or bare React Native? Expo is faster to start (this is what most MVPs should use). Eject/bare when you need a custom native module Expo does not support.

1. Can I share code with a React website? Yes for business logic and hooks. UI components usually split: *.web.js vs native views.

1. Does React Native use Kotlin or Swift? Under the hood, yes — native modules and the new architecture. Your app code is still JavaScript or TypeScript.

Related React Native cheat sheets

• React Native Components Cheat Sheet
• 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.