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.
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>
);
}