---------------------------------------------------------------------------------------------------------------
// List Screen

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

const ListScreen = () => {
  const friends = [
    { name: "friend #1", surname: "surname 1" },
    { name: "friend #2", surname: "surname 2" },
    { name: "friend #3", surname: "surname 3" },
    { name: "friend #4", surname: "surname 4" },
    { name: "friend #5", surname: "surname 5" },
    { name: "friend #6", surname: "surname 6" },
    { name: "friend #7", surname: "surname 7" },
    { name: "friend #8", surname: "surname 8" },
    { name: "friend #9", surname: "surname 9" },
  ];

  return (
    <FlatList
      data={friends}
      renderItem={({ item }) => {
        return (
          <View>
            <Text style={styles.TextStyle}>{item.name}</Text>
            <Text style={styles.TextStyle}>{item.surname}</Text>
          </View>
        );
      }}
    />
  );
};

const styles = StyleSheet.create({
.
.
export default ListScreen;
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
// Home Screen

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


const HomeScreen = (props) => {
  return (
    <View style={styles.container}>
      <Text style={styles.forText}>Home Screen</Text>

      <Button
        title="Go to Components Demo"
        onPress={() => props.navigation.navigate("Components")}
      />

      <TouchableOpacity onPress={() => props.navigation.navigate("Image")}>
        <Text style={styles.forText}>Touchable For Images</Text>
      </TouchableOpacity>

    </View>
  );
};


const styles = StyleSheet.create({
.
.
export default HomeScreen;
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
// Image Screen

import React from "react"; 
import { View, StyleSheet } from "react-native"; 
import ImageDetail from "../Components/ImageDetail"; 

const ImageScreen = () => { 
  return (
    <View style={styles.container}> 
    
      <ImageDetail // ImageDetail bileşenini 'Mountain' başlığı ve ilgili görüntü kaynağı ile kullanır.
        title="Mountain"
        imageSource={require("../../assets/mountain.jpg")}
      />

    </View>
  );
};

const styles = StyleSheet.create(
.
.
export default ImageScreen;
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
// Component Screen

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const ComponentsScreen = () => {
    return <Text style={styles.textStyle}> This is the components screen </Text>;
};

const styles = StyleSheet.create({
.
.
export default ComponentsScreen;