Как получить значение?

export default function HomeScreen() {
 
    const[list, setList] = useState([])
    
     return (
        
    );
}

export default function Settings() {
    
     return (
       <View>
       вывод значения list
      </View>
        
    );
}

import React, {useEffect, useState} from "react";
import {StyleSheet, View, Text, FlatList, Button, Alert, StatusBar} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Header from '@/components/Header';
import ListItem from '@/components/ListItem';
import Form from '@/components/Form'
export const test = () => {
    AsyncStorage.clear()
}
 
export default function HomeScreen() {
 
    const[list, setList] = useState([])
 
    // @ts-ignore
    useEffect(() => {
        AsyncStorage.getItem("TASKS").then((value) => {
            if (value) {
                if (value) {
                    setList(JSON.parse(value));
                }
            }
        });
    }, [])
 
    useEffect(() => {
        AsyncStorage.setItem("TASKS", JSON.stringify(list));
    },[list]);
 
    // @ts-ignore
    const addHandler = (text) => {
 
        if(text)
        {
            const newTask = {
                id: Math.random().toString(),
 
                title: text,
 
                done: false,
            };
 
            // Update the list of tasks
 
            setList([newTask, ...list]);
        }
        else
        {
            alert("Вы не указали значение")
        }
    }
 
    const wipeDataButton = () => Alert.alert("Title", "remove?", [
        {text: "Yes", onPress: () => wipeData()},
        {text: "No"}
    ])
 
    const Debuger = () => {
        console.log(list)
    }
 
    const wipeData = () => {
        AsyncStorage.clear()
        setList([]);
    }
 
    return (
        <View style={styles.global}>
            <StatusBar backgroundColor="#212529"/>
            <Header/>
            <Form addHandler={addHandler}/>
            <View style={styles.flatlist}>
                <FlatList data={list} renderItem={({item}) => (
                    <ListItem el={item}/>
                )}/>
 
            </View>
        </View>
    );
}
 
const styles = StyleSheet.create({
 
    global: {
        height: '100%',
        // borderColor: 'yellow',
        // borderWidth: 5,
        justifyContent: 'space-between'
    },
    flatlist: {
        // borderColor: 'red',
        // borderWidth: 5,
        height: '54%',
    },
    statusBar:{
        backgroundColor: '#212529'
    }
});

import Ionicons from '@expo/vector-icons/Ionicons';
import {StyleSheet, Image, Platform, View, TouchableOpacity, Text, Button, Alert} from 'react-native';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import React from "react";;
export default function Settings() {
 
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
      headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}>
 
      <View style={styles.header}>
        <Button title="WipeData"/>
      </View>
 
    </ParallaxScrollView>
  );
}
 
const styles = StyleSheet.create({
  headerImage: {
    color: '#808080',
    bottom: -90,
    left: -35,
    position: 'absolute',
  },
  titleContainer: {
    flexDirection: 'row',
    gap: 8,
  },
  ClearData:{
    height: '100%',
    backgroundColor: 'green',
    borderRadius: 5,
    position:'relative',
 
  },
  ClearDataText:{
    color: 'white',
    fontSize: 16,
    textAlign: 'center',
    position:"relative",
    margin: 'auto'
  },
  header:{
    // borderColor: 'red',
    // borderWidth: 5,
    height: '10%',
  },
});

import { Tabs } from 'expo-router';
import React from 'react';
 
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
 
export default function TabLayout() {
  const colorScheme = useColorScheme();
 
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
      }}>
      <Tabs.Screen
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
          ),
        }}
        
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'settings' : 'settings-outline'} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

import {Text, View} from "react-native";
import React from "react";
 
export default function TestComponent() {
    return (
        <View><Text>123</Text></View>
    );
}

import { Tabs } from 'expo-router';
import React from 'react';
 
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import TestComponent from "@/components/TestComponent";
export default function TabLayout() {
  const colorScheme = useColorScheme();
 
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
      }}>
      <Tabs.Screen
        name="index"
        component={TestComponent}
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
          ),
        }}
 
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'settings' : 'settings-outline'} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}