How to pass props from component to navigator in header in react navigation 6 (or > 5)?

Question

I want my header icon to show count (every unread notification is count ++). From my Notification component I want to pass to the header in my Navigator a prop with the count number. All I can find so far are solutions for react navigation <5 (setParams and the like doesnt work with >5) and I am using 6. How do I do it?

const App = () => {
    const [notifications, setNotifications] = useState([]);
    useEffect(() => {
        const notifications = await API.fetch();
        let count= 0;
        notifications.map(notification => {
            if (notification.isRead === false) count ++;
        })
        // ---> send count to header in Navigator to be shown
        
    }, [])
}

const MyTabs = (props) => {
    const navigation = useNavigation();
    return (
        <Tab.Navigator
            screenOptions={{
                headerRight: (props) => {
                    return (
                        <TouchableOpacity onPress={() => navigation.navigate("Notifications")}>
                            <Ionicons name="notifications" size={24} color="black"/>
                        </TouchableOpacity>
                    )}
            }}
        >           
        </Tab.Navigator>
    );
}

Edit:

const MyStack = () => {
    const navigation = useNavigation();
    return (
        <Stack.Navigator>
            <Stack.Group>
                <Stack.Screen name="Tabs" options={({route}) => ({
                    headerShown: false,
                })}>
                    {(props) => <MyTabs {...props}  />}
                </Stack.Screen>

                <Stack.Screen
                    name="Notifications"
                    options={{
                        headerShown: true, headerLeft: () => (
                    <Button onPress={() => navigation.goBack()} title="go back"
                            />
                        ),
                    }}>
                    {(props) => <NotificationsScreen {...props}/>}
                </Stack.Screen>
            </Stack.Group>

      </Stack.Navigator>

 <NavigationContainer>
    <MyStack />
 </NavigationContainer>

//NavigationContainer is rendered inside App

Can you show where MyTabs gets rendered in relation to App? Is MyTabs a child of App? — Matthew Herbst
– Matthew Herbst, Commented Oct 25, 2022 at 20:10

Ilê Caian · Accepted Answer · 2022-10-25 20:37:04Z

I think what you are looking for is using the Navigation State through the useNavigationState() hook.

Look at that documentation, specifically at this section about triggering a re-render. You could send that information when you call the navigation.navigate().

Nevertheless, this is probably the wrong way of doing this. Using the navigation state to store your app information not related to the navigation is not safe (and even maybe an anti-pattern).

There are better ways of sharing a state over different components across your app and you could use one of them. I suggest using ContextAPI for decoupling the state from your components for this case as Redux is almost overkill.

For an even simpler approach, you could use a derived state from your notifications such as:

const App = () => {
    const [notifications, setNotifications] = useState([]);
    const [unreadNotificationsCount, setUnreadNotificationsCount] = useState(0);

    useEffect(() => {
        const notifications = await API.fetch();
        const newUnreadNotifications = notifications.filter((notification) => !notification.isRead);
        setUnreadNotificationsCount(newUnreadNotifications.length)
    }, []);

    return (
      <>
        <Header unreadNotifications={unreadNotificationsCount} />
      </>
    );
}

Also, there are other things that you could take care of:

fetching data inside useEffect is not considered a good pattern. You could call it outside of the useEffect.
Array.map() is used to transform one array into another with the same size. If you just want to iterate over, use the Array.forEach()
you made a comment about "sending" the count to the Header. React is a "Reactive" framework. If you change that data into a state, all places that depend on that state will update. You can have that with some "global state" lib such as Redux or with ContextAPI (that is inside React)

Hey @juliascoding, have you had a chance to look at this answer? Need any additional information? After seeing your updates on your question I really recommend you use ContextAPI to control the state you want to share between components on different levels.

Collectives™ on Stack Overflow

How to pass props from component to navigator in header in react navigation 6 (or > 5)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related