Prompt to Expo React Native: True Cross-Platform iOS & Android Code Generation

import { View, Text, FlatList, Pressable } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import * as Haptics from 'expo-haptics'
import { useRouter } from 'expo-router'

interface FeedItem {
  id: string
  title: string
  category: string
}

export default function ExploreScreen() {
  const router = useRouter()

  const handleSelect = (id: string) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
    router.push(`/details/${id}`)
  }

  return (
    <SafeAreaView className="flex-1 bg-neutral-950">
      <View className="px-5 py-4 border-b border-neutral-900">
        <Text className="text-2xl font-bold text-white tracking-tight">Explore Feed</Text>
      </View>
      <FlatList<FeedItem>
        data={[{ id: '1', title: 'Autonomous Workspaces', category: 'Tech' }]}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Pressable
            onPress={() => handleSelect(item.id)}
            className="p-4 border-b border-neutral-900 active:bg-neutral-900"
          >
            <Text className="text-base font-semibold text-white">{item.title}</Text>
            <Text className="text-xs text-neutral-500 font-mono mt-1">{item.category}</Text>
          </Pressable>
        )}
      />
    </SafeAreaView>
  )
}