I got navigation made with "bottom-tab navigation" in react native. Example of code

<BottomTab.Screen
    name="Home"
    component={RootPasswordsHandler}
    options={(): {
      tabBarIcon: ({ color }: { color: any }) => JSX.Element;
      headerRight: () => JSX.Element;
      title: string;
    } => ({
      title: globalState.languageHandler.screenNames.HOME_SCREEN,
      tabBarIcon: ({ color }): JSX.Element => <TabBarIcon name="home" color={color} />,
      headerRight: (): JSX.Element => (
        <TextInput style={styles.navStyles.input} placeholder={globalState.languageHandler.generic.FIND_PASSWORD} />
      ),
    })}
  />

In component "RootPasswordsHandler", component fetch passwords from database, save them in local state ( useState ) and render them. I would like to add input ( as in code example above ), which will access that data and filter array of passwords. How can I achieve that ? I am pretty new to react native and I am completely stuck here :/

>Solution :

You can use setOptions in your component and then access them in BottomTab

Example from docs see how value is passed!

function ProfileScreen({ navigation, route }) {
  const [value, onChangeText] = React.useState(route.params.title);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={onChangeText}
        value={value}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}