Set useRef between component for dynamic text in button

Question

I have a simple tab screen where i am using React Navigation. I want to change the tab button in the parent component from inside my child components but cannot find a good solution to how.

Any help is greatly appriciated.

import React, {useRef, useEffect, useState} from 'react';

// Tab child FriendsList
function FriendsList({navigation}) {
    // Content here like ajax calls etc.
}

// Tab child FriendsFind
function FriendsFind({navigation}) {
   // Content here like ajax calls etc.
}
    
// Tab parent
function FriendsHomeScreen({navigation}){
    const Tab = createBottomTabNavigator();
    // I would like to have this ref dynamic and change it from the child tabs FriendsList and FriendsFind
    const refFriendRequests = useRef(0);
    
    <View style={{flex:1}}>   
    
        <Tab.Navigator
        initialRouteName="FriendsList"
        screenOptions={{
            tabBarIconStyle: { display: 'none' },
            headerShown: false,
            backgroundColor:'#000',
            tabBarStyle: {
              // style here
            },
        }}> 
            <Tab.Screen
                name="FriendsList"
                component={FriendsList}
                options={{
                    tabBarLabel: 'Friends',                   
                }}
            />
            <Tab.Screen
                name="FriendsFind"
                component={FriendsFind}
                options={{
                    // I would like to have this ref dynamic and change it from the child tabs FriendsList and FriendsFind
                    tabBarLabel: 'Find friends ('+refFriendRequests.current+')',
                }}
            />
        </Tab.Navigator>
    
    </View>
}

what about passing the ```useRef``` in the parameters, you can do something like the following: ```FriendsList({navigation, useRef}) { ... }``` and inside FriendsHomeScreen you can add a component => ```MyFriendsList(props) { return }``` and instead of calling ```component={FriendsList}``` call ```component={MyFriendsList}``` — Nouh Belahcen, Nov 04 '22 at 12:00

mahmoud ettouahri · Accepted Answer · 2022-11-04T19:45:13.377

0

just add a fuction in the parent that cange the ref then pass it to the children .

const changeRef= (newValue)=>{
refFriendRequests.current =id,

}

then pass it

<Tab.Screen
                name="FriendsList"
                children={()=>{<FriendsList changeRef = {changeRef}/>}}
                options={{
                    tabBarLabel: 'Friends',                   
                }}
            />

note i changed component to children so i can pass props like this answer How to pass props to Screen component with a tab navigator?

edit
i forget to say that you of course need to add the function as a parameter

function FriendsList({navigation ,changeRef}) {
    // Content here like ajax calls etc.
}

edit 2 this is the answer that worked for the one who asked the question (although it seems that i misunderstood the question )

<Tab.Screen 
   name="FriendsFind" 
   options={{ 
      tabBarLabel: 'Find friends ('+countRequests+')', 
   }}> {(props) => (<FriendsFind updateCountRequests ={updateCountRequests} {...props}/>)} 
   </Tab.Screen>

edited Nov 04 '22 at 19:45

answered Nov 04 '22 at 10:22

mahmoud ettouahri

141
4
13

i'm using a tablet so i couldn't try it i wish it work for you – mahmoud ettouahri Nov 04 '22 at 10:24
Thank you for your answer! Problem is i only get a blank screens when changing from component to children. No errors or warnings. – Quantal Nov 04 '22 at 14:54
@Quantal ok i don't know what is causing the white screen issue i tried the children and it worked (without passing the function ) but anyway are you only looking to navigae manually using a button or you should use ref because if you don't have to use ref i think i can help you. – mahmoud ettouahri Nov 04 '22 at 15:43
Now it works as intended. I modified your answer like this and now it works. If you want to update i will accept as answer. {(props) => ()} – Quantal Nov 04 '22 at 17:35
@Quantal sorry it seems that i misunderstood your question but if you got your answer then thats fine. – mahmoud ettouahri Nov 04 '22 at 19:48
1

Your answer helped me come to the final result so i mark it as an answer :) Ty man! – Quantal Nov 04 '22 at 21:29

Set useRef between component for dynamic text in button

1 Answers1