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

interface Props {
  title: string;
  onPress?: () => void;
}

export const MyComponent = ({ title, onPress }: Props) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
  },
});

import { Platform } from "react-native";

// Inline
const padding = Platform.OS === "ios" ? 20 : 16;

// Platform.select
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 } },
      android: { elevation: 4 },
    }),
  },
});

import { SafeAreaView } from "react-native-safe-area-context";

const Screen = () => (
  <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
    {/* Content */}
  </SafeAreaView>
);

import { FlashList } from "@shopify/flash-list";

<FlashList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
  estimatedItemSize={50}
  keyExtractor={(item) => item.id}
/>

import { FlatList } from "react-native";

<FlatList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
  keyExtractor={(item) => item.id}
  ItemSeparatorComponent={() => <Separator />}
  ListEmptyComponent={<EmptyState />}
/>

import { KeyboardAvoidingView, Platform } from "react-native";

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  style={{ flex: 1 }}
>
  {/* Form content */}
</KeyboardAvoidingView>

import { GestureHandlerRootView } from "react-native-gesture-handler";

// Wrap app root
<GestureHandlerRootView style={{ flex: 1 }}>
  <App />
</GestureHandlerRootView>

import { memo, useCallback, useMemo } from "react";

// Memoize components
const Item = memo(({ data, onPress }) => { /* ... */ });

// Memoize callbacks
const handlePress = useCallback(() => {
  doSomething(id);
}, [id]);

// Memoize expensive computations
const sortedData = useMemo(() => {
  return data.sort((a, b) => a.name.localeCompare(b.name));
}, [data]);

// ❌ Bad - creates new function every render
<Button onPress={() => handlePress(item.id)} />

// ✅ Good - stable reference
const onPress = useCallback(() => handlePress(item.id), [item.id]);
<Button onPress={onPress} />

import { Image } from "react-native";

<Image
  source={{ uri: imageUrl }}
  style={{ width: 100, height: 100 }}
  resizeMode="cover"
/>

import { useRouter, useLocalSearchParams, Link } from "expo-router";

// Navigate
const router = useRouter();
router.push("/details");
router.push({ pathname: "/details", params: { id: "123" } });
router.back();

// Get params
const { id } = useLocalSearchParams();

// Declarative link
<Link href="/details">Go to Details</Link>

import { MMKV } from "react-native-mmkv";

const storage = new MMKV();

storage.set("key", "value");
storage.set("number", 42);
storage.set("bool", true);

const value = storage.getString("key");
const num = storage.getNumber("number");

import AsyncStorage from "@react-native-async-storage/async-storage";

await AsyncStorage.setItem("key", JSON.stringify(data));
const data = JSON.parse(await AsyncStorage.getItem("key") || "null");