React native. How to pass state from component to BottomTab.Screen

user_10808402 0
Viewed 27

I got navigation made with bottom-tab navigation in react native.

Example 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.

reactjs javascript
1 Answers

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>
  );
}
user_59861410
Related