HomeScreen.js

import React from 'react'
import { Text, View } from 'react-native'

export default function HomeScreen(props) {
    return (
        <View>
            <Text>Home Screen</Text>
        </View>
    )
}

import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default function HomeScreen({ navigation }) {
return (

  {/* Icon */}
  <Ionicons name="camera-outline" size={80} color="#7B61FF" />

  {/* NEW HEADLINE */}
  <Text style={styles.title}>Turn Photos Into Cash</Text>

  {/* NEW SUBTEXT */}
  <Text style={styles.subtitle}>
    Snap a photo → get a ready-to-post listing instantly
  </Text>

  {/* MAIN BUTTON */}
  <TouchableOpacity
    style={styles.primaryButton}
    onPress={() => navigation.navigate("Camera")}
  >
    <Ionicons name="camera" size={22} color="#fff" />
    <Text style={styles.buttonText}> Start Selling</Text>
  </TouchableOpacity>

  {/* SECONDARY BUTTON */}
  <TouchableOpacity style={styles.secondaryButton}>
    <Text style={styles.secondaryText}>Choose from Gallery</Text>
  </TouchableOpacity>

</View>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#0B0B0F",
alignItems: "center",
justifyContent: "center",
padding: 20,
},
title: {
color: "#fff",
fontSize: 28,
fontWeight: "bold",
marginTop: 20,
},
subtitle: {
color: "#aaa",
textAlign: "center",
marginTop: 10,
marginBottom: 40,
fontSize: 16,
},
primaryButton: {
flexDirection: "row",
backgroundColor: "#7B61FF",
paddingVertical: 16,
paddingHorizontal: 40,
borderRadius: 30,
alignItems: "center",
marginBottom: 20,
},
buttonText: {
color: "#fff",
fontSize: 18,
fontWeight: "600",
},
secondaryButton: {
borderWidth: 1,
borderColor: "#7B61FF",
paddingVertical: 14,
paddingHorizontal: 30,
borderRadius: 30,
},
secondaryText: {
color: "#7B61FF",
fontSize: 16,
},
});