App.js

// This is the main structure of your iOS vehicle storage management app using React Native
// Assumes use of Expo for development and Firebase as backend for simplicity

import React from "react";
import { SafeAreaView, View, Text, ScrollView, TextInput, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Card } from "@/components/ui/card";

const Tab = createBottomTabNavigator();

function DashboardScreen() {
  return (
    <ScrollView className="p-4">
      <Text className="text-xl font-bold mb-4">Dashboard</Text>
      <Card className="mb-4">
        <Text className="text-base">Total Vehicles Stored: 8</Text>
        <Text className="text-base">Spaces Remaining: 2</Text>
      </Card>
      <Card>
        <Text className="text-base">Upcoming Exits</Text>
        <Text>• McLaren 720S - 26 June</Text>
        <Text>• Porsche 911 - 30 June</Text>
      </Card>
    </ScrollView>
  );
}

function VehiclesScreen() {
  return (
    <ScrollView className="p-4">
      <Text className="text-xl font-bold mb-4">Vehicles</Text>
      <Card className="mb-4">
        <Text className="font-semibold">McLaren 720S</Text>
        <Text>Owner: John Doe</Text>
        <Text>Entry: 1 June 2025</Text>
        <Text>Exit: 26 June 2025</Text>
      </Card>
      <Card>
        <Text className="font-semibold">Porsche 911 Turbo</Text>
        <Text>Owner: Jane Smith</Text>
        <Text>Entry: 5 June 2025</Text>
        <Text>Exit: 30 June 2025</Text>
      </Card>
    </ScrollView>
  );
}

function EntryFormScreen() {
  return (
    <ScrollView className="p-4">
      <Text className="text-xl font-bold mb-4">New Vehicle Entry</Text>
      <TextInput className="border rounded p-2 mb-3" placeholder="Owner Name" />
      <TextInput className="border rounded p-2 mb-3" placeholder="Vehicle Make/Model" />
      <TextInput className="border rounded p-2 mb-3" placeholder="Reg Plate" />
      <TextInput className="border rounded p-2 mb-3" placeholder="Entry Date" />
      <Button title="Save Entry" onPress={() => alert("Entry saved!")} />
    </ScrollView>
  );
}

function CustomersScreen() {
  return (
    <ScrollView className="p-4">
      <Text className="text-xl font-bold mb-4">Customer Records</Text>
      <Card className="mb-4">
        <Text className="font-semibold">John Doe</Text>
        <Text>Email: john@example.com</Text>
        <Text>Phone: +447123456789</Text>
      </Card>
      <Card>
        <Text className="font-semibold">Jane Smith</Text>
        <Text>Email: jane@example.com</Text>
        <Text>Phone: +447987654321</Text>
      </Card>
    </ScrollView>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Dashboard" component={DashboardScreen} />
        <Tab.Screen name="Vehicles" component={VehiclesScreen} />
        <Tab.Screen name="New Entry" component={EntryFormScreen} />
        <Tab.Screen name="Customers" component={CustomersScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

package.json

{
  "dependencies": {
    "expo": "^48.0.0",
    "firebase": "^10.7.0",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/bottom-tabs": "^6.5.9",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "3.20.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~2.14.4"
  }
}