React Native & Expo Router Gemini System Prompt

// Discouraged: Missing safe-area insets, slow standard Image component, obsolete navigation prop
export default function BadProfile({ navigation }: any) {
  return (
    <div style={{ marginTop: 50 }}>
      <img src="avatar.png" />
      <button onClick={() => navigation.navigate("Home")}>Go</button>
    </div>
  );
}

import { View, Text, StyleSheet } from "react-native";
import { Image } from "expo-image";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function ProfileScreen() {
  const insets = useSafeAreaInsets();
  return (
    <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
      <Image
        source={{ uri: "https://example.com/avatar.png" }}
        style={styles.avatar}
        contentFit="cover"
        transition={200}
      />
      <Text style={styles.title}>User Profile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#fff", paddingHorizontal: 16 },
  avatar: { width: 80, height: 80, borderRadius: 40 },
  title: { fontSize: 20, fontWeight: "600", marginTop: 12 },
});