Как передать функцию?

[acvafor]

Как передать функцию?

<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Settings" component={Settings} />

Хочу из home передать в settings функцию и установить в ней новые значения

Home

export default function HomeScreen() {
  const [taskList, setTaskList] = useState<Array<Item>>([]);
  const navigation = useNavigation();
  const goToMessageScreen = () => {
      navigation.navigate('Settings', {
          setTaskList,
      });
  };
}

<Button title="Submit" onPress={goToMessageScreen} color="green" />

Settings

const Settings = () => {
    const route = useRoute();
    const taskClear = () => {
        route.params.setTaskList("")
    }
    return (
        <View style={styles.container}>
            <Text style={styles.title}>
                <Button title="Submit" onPress={taskClear} color="green"/>
            </Text>
        </View>
    );
};

Срабатывает но выдаёт предупреждение

his can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you

[Aetae]

Проблема описана в тексте предупреждения.

А о взаимодействии компонентов уже 100500 раз написано.
Надо передать что-то из компонента А в компонент Б:
1. Если компонент Б лежит в компоненте А - используйте props.
2. Если компонент Б лежит в одном родителе с компонентом A - родитель слушает событие компонента А, меняет state и передаёт его в props компонента Б.
3. В любых иных случаях используется context. (в особо сложных - сторонний store)

[acvafor]

Проблема описана в тексте предупреждения.

А о взаимодействии компонентов уже 100500 раз написано.
Надо передать что-то из компонента А в компонент Б:
1. Если компонент Б лежит в компоненте А - используйте props.
2. Если компонент Б лежит в одном родителе с компонентом A - родитель слушает событие компонента А, меняет state и передаёт его в props компонента Б.
3. В любых иных случаях используется context. (в особо сложных - сторонний store)

Извините, я видимо что-то не понимаю

Не могли бы на моём примере продемонстрировать?

[Aetae]

Пункт 3 в упрощённом виде. Как создавать и использовать контекст можете почитать сами.

export default function HomeScreen() {
  const taskListContext = useContext(TaskListContext);
  const [taskList, setTaskList] = useState<Array<Item>>([]);
  const navigation = useNavigation();

  taskListContext.setTaskList = setTaskList;

  const goToMessageScreen = () => {
      navigation.navigate('Settings');
  };
}


const Settings = () => {
    const taskListContext = useContext(TaskListContext);
    const route = useRoute();
    const taskClear = () => {
        taskListContext?.setTaskList("")
    }
    return (
        <View style={styles.container}>
            <Text style={styles.title}>
                <Button title="Submit" onPress={taskClear} color="green"/>
            </Text>
        </View>
    );
};

[acvafor]

Я читал про контексты
Но проблема в том что
Home находится в HomeScreen.tsx
А Settings в Settins.tsx

Единственное что их связывает это app.tsx

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './tabs/HomeScreen';
import Settings from './tabs/Settings';
import {Button} from "react-native";

const Stack = createNativeStackNavigator();


export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: 'gray',
              },
              headerTintColor: '#fff',
            }}>
          <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Settings" component={Settings} options={{ title: "",  }} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

[Aetae]

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './tabs/HomeScreen';
import Settings from './tabs/Settings';
import {Button} from "react-native";

const Stack = createNativeStackNavigator();
const [taskListContext, setTaskListContext] = useState({setTaskList(){console.warn('setTaskList is not set')}});
taskListContext.set = setTaskListContext; // на случай полного обновления контекста

export default function App() {
  return (
    <TaskListContext.Provider value={taskListContext}>
      <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: 'gray',
              },
              headerTintColor: '#fff',
            }}>
          <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Settings" component={Settings} options={{ title: "",  }} />
        </Stack.Navigator>
      </NavigationContainer>
    </TaskListContext.Provider>
  );
}

[acvafor]

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './tabs/HomeScreen';
import Settings from './tabs/Settings';
import {Button} from "react-native";

const Stack = createNativeStackNavigator();
const [taskListContext, setTaskListContext] = useState({setTaskList(){console.warn('setTaskList is not set')}});
taskListContext.set = setTaskListContext; // на случай полного обновления контекста

export default function App() {
  return (
    <TaskListContext.Provider value={taskListContext}>
      <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: 'gray',
              },
              headerTintColor: '#fff',
            }}>
          <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Settings" component={Settings} options={{ title: "",  }} />
        </Stack.Navigator>
      </NavigationContainer>
    </TaskListContext.Provider>
  );
}

Откуда здесь берётся setTaskList и TaskListContext ?

[Aetae]

acvafor, сорян, перед сном неглядя нафигачил, надо так:

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './tabs/HomeScreen';
import Settings from './tabs/Settings';
import {Button} from "react-native";

const Stack = createNativeStackNavigator();
const defaultTaskContext = {setTaskList(){console.warn('setTaskList is not set')}};
const TaskListContext = createContext(defaultTaskContext);

export default function App() {
  const [taskListContext, setTaskListContext] = useState({...defaultTaskContext});
  taskListContext.set = setTaskListContext; // на случай полного обновления контекста

  return (
    <TaskListContext.Provider value={taskListContext}>
      <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: 'gray',
              },
              headerTintColor: '#fff',
            }}>
          <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Settings" component={Settings} options={{ title: "",  }} />
        </Stack.Navigator>
      </NavigationContainer>
    </TaskListContext.Provider>
  );
}

А setTaskList будет установлено в HomeScreen - 6 строчка.

[acvafor]

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './tabs/HomeScreen';
import Settings from './tabs/Settings';
import {Button} from "react-native";

const Stack = createNativeStackNavigator();
const defaultTaskContext = {setTaskList(){console.warn('setTaskList is not set')}};
const TaskListContext = createContext(defaultTaskContext);

export default function App() {
  const [taskListContext, setTaskListContext] = useState({...defaultTaskContext});
  taskListContext.set = setTaskListContext; // на случай полного обновления контекста

  return (
    <TaskListContext.Provider value={taskListContext}>
      <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: 'gray',
              },
              headerTintColor: '#fff',
            }}>
          <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Settings" component={Settings} options={{ title: "",  }} />
        </Stack.Navigator>
      </NavigationContainer>
    </TaskListContext.Provider>
  );
}

Благодарю