Views, Text & Core Components

import { StyleSheet, Text, View, ScrollView, SafeAreaView } from "react-native";
 
export function ProfileCard({ name, bio }: { name: string; bio: string }) {
  return (
    <SafeAreaView style={styles.safe}>
      <ScrollView contentContainerStyle={styles.scroll}>
        <View style={styles.card}>
          <Text style={styles.title}>{name}</Text>
          <Text style={styles.body}>
            {bio}
            {"\n"}
            <Text style={styles.link}>Read more</Text>
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: "#f5f5f5" },
  scroll: { padding: 16 },
  card: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 16,
    gap: 8,
  },
  title: { fontSize: 20, fontWeight: "600" },
  body: { fontSize: 16, lineHeight: 24, color: "#333" },
  link: { color: "#2563eb", fontWeight: "500" },
});

import { useState } from "react";
import {
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
 
type Tab = "posts" | "about";
 
interface Post {
  id: string;
  title: string;
  excerpt: string;
}
 
const POSTS: Post[] = [
  { id: "1", title: "Hermes on device", excerpt: "Startup wins from a compact bytecode runtime." },
  { id: "2", title: "Fabric layout", excerpt: "Shadow nodes commit straight to the native tree." },
];
 
export default function FeedScreen() {
  const [tab, setTab] = useState<Tab>("posts");
 
  return (
    <SafeAreaView style={styles.safe} edges={["top", "left", "right"]}>
      <View style={styles.header}>
        <Text style={styles.heading}>RN Fundamentals</Text>
        <View style={styles.tabs}>
          {(["posts", "about"] as const).map((key) => (
            <Pressable
              key={key}
              onPress={() => setTab(key)}
              style={[styles.tab, tab === key && styles.tabActive]}
            >
              <Text style={[styles.tabLabel, tab === key && styles.tabLabelActive]}>
                {key === "posts" ? "Posts" : "About"}
              </Text>
            </Pressable>
          ))}
        </View>
      </View>
 
      <ScrollView
        contentContainerStyle={styles.content}
        keyboardShouldPersistTaps="handled"
      >
        {tab === "posts" ? (
          POSTS.map((post) => (
            <View key={post.id} style={styles.card}>
              <Text style={styles.cardTitle}>{post.title}</Text>
              <Text style={styles.cardBody} numberOfLines={2}>
                {post.excerpt}
              </Text>
            </View>
          ))
        ) : (
          <Text style={styles.cardBody}>
            Built with Expo SDK 57, React Native 0.86, and React 19.2.3.
          </Text>
        )}
      </ScrollView>
 
      <View
        style={[
          styles.footer,
          Platform.select({ ios: styles.footerIos, android: styles.footerAndroid }),
        ]}
      >
        <Text style={styles.footerText}>© 2026 Mobile Cookbook</Text>
      </View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: "#f8fafc" },
  header: { paddingHorizontal: 16, paddingBottom: 8, gap: 12 },
  heading: { fontSize: 28, fontWeight: "700", color: "#0f172a" },
  tabs: { flexDirection: "row", gap: 8 },
  tab: {
    paddingHorizontal: 14,
    paddingVertical: 8,
    borderRadius: 999,
    backgroundColor: "#e2e8f0",
  },
  tabActive: { backgroundColor: "#2563eb" },
  tabLabel: { fontSize: 14, fontWeight: "600", color: "#334155" },
  tabLabelActive: { color: "#fff" },
  content: { padding: 16, gap: 12, paddingBottom: 32 },
  card: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 16,
    gap: 6,
    ...Platform.select({
      ios: {
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.08,
        shadowRadius: 8,
      },
      android: { elevation: 3 },
    }),
  },
  cardTitle: { fontSize: 17, fontWeight: "600", color: "#0f172a" },
  cardBody: { fontSize: 15, lineHeight: 22, color: "#475569" },
  footer: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: "#cbd5e1",
  },
  footerIos: { paddingBottom: 4 },
  footerAndroid: { paddingBottom: 8 },
  footerText: { fontSize: 12, color: "#64748b", textAlign: "center" },
});

// Valid - inline link inside body copy
<Text style={styles.body}>
  Tap here to {" "}
  <Text style={styles.link} onPress={openDocs}>
    open the docs
  </Text>
  .
</Text>
 
// Invalid - string directly under View
<View>
  Hello {/* redbox: Text strings must be rendered within a <Text> component */}
</View>

// RN flex defaults (differs from browser)
// flexDirection: 'column'
// alignItems: 'stretch'
// flexShrink: 0 on children (web often shrinks)
// position: 'relative' only - 'fixed'/'sticky' need libraries
 
<View style={{ flex: 1 }}>        {/* fills parent along main axis */}
  <View style={{ flex: 1 }} />    {/* splits remaining space with siblings */}
</View>

import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 
interface CardProps {
  title: string;
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
}
 
// StyleProp<T> accepts a single style, array, or falsy entries
const merged: StyleProp<ViewStyle> = [styles.card, isActive && styles.cardActive, style];