How to call function from component parent for component children Drawer Navigator

Question

I have code of the Home.js is component Parents. I want after resetCart() at component CartScreen then I will call function reload() at HomeScreen to reset badge cart.

reload = () =>{
        this.componentDidMount();
    }
    componentDidMount(){
        this._isMounted = true;
        this.props.navigation.addListener('focus',()=>{
            if(this._isMounted){
                this.checkInternet();
                this._getasyc();
            }
        });
        
        this.checkInternet();
        this._getasyc();
    }

render(){
    //    const {ten} = this.props.route.params
        return(
            <View style={{ flex:1 }}>
                <StatusBar backgroundColor='#555555' barStyle="light-content" />
                <Appbar style={styles.appbar}>
                    <Appbar.Action icon="format-list-bulleted" onPress={()=>(this.props.navigation.dispatch(DrawerActions.openDrawer()))}/>
                    <Appbar.Content title="GREAT FOOD" />
                    <Badge  
                        visible={this.state.itemcart && this.state.itemcart >0}
                        size={17}
                        style={{ position: 'absolute', top: 5, right: 55 }}>{this.state.itemcart}</Badge>
                    <Appbar.Action icon="cart" onPress={()=>{this.props.navigation.navigate('cart')}}/>
                    <Appbar.Action icon="phone-in-talk" onPress={()=>{this.contact()}}/>
                </Appbar>
                
                <Drawer.Navigator 
                    overlayColor="transparent"   

                > 
                    <Drawer.Screen name ="home" component={HomeScreen} 
                        options={{
                            drawerLabel:"Menu",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="home" color={color} size={26} />
                        ), }}
                        />
                    <Drawer.Screen name="profile" component={ProfileScreen}
                            options={{
                            drawerLabel:"Hồ sơ",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="account-circle" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name="fullfood" component={FullFood}
                        options={{
                            drawerLabel:"Tất cả món ăn",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="food" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name= "favourite" component={FavouriteScreen}
                        options={{    
                            drawerLabel:"Yêu thích",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="heart-pulse" color={color} size={26} />
                        ), }}
                    />
                     <Drawer.Screen name= "booking" component={BookingScreen}
                        options={{
                            drawerLabel:"Đặt bàn",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="table-furniture" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name="cart" component={CartScreen} 
                        options={{
                            drawerLabel:"Giỏ hàng",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="cart" color={color} size={26} />
                        ), }}
                        
                    />
                    <Drawer.Screen name="setting" component={SettingScreen}
                        options={{
                            drawerLabel:"Cài đặt",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="wrench-outline" color={color} size={26} />
                        ), }}
                    />
                </Drawer.Navigator>
             <Snackbar
                visible={this.state.statusInform}
                onDismiss={()=>{this}}
                action={{
                label: 'Tắt',
                onPress: () => {
                this.setState({statusInform:false})
              },
             }}>
            Vui lòng kiểm tra kết nối.
            </Snackbar>
        </View>
        )
    }
}

And now. I want call function reload() from CartScreen so What I have to do. This is my function resetCart() at CartScreen.

 _resetCart = async()=>{
        this.setState({spinner:true});
        setTimeout(() => {
            this.setState({spinner:false})
        }, 1000);
        await AsyncStorage.removeItem('keyOrdermonan'); 
        this.setState({getMangAsync:[],tongTien:0});
        this._getAsync();
        // this.props.reloadnaonao();
    }

I have tryed use this.props.function() at CartScreen but I don't know how do to call function at HomeScreen. Anyone help me!

score 0 · Answer 1 · answered May 12 '21 at 06:31

0

you can do it using ref provide a ref to your child component and then you can call its methods using yourRefName.current.methodName(); and change your Drawer Screen like this <Drawer.Screen name="cart" component={() => ()}

For reference Refer this

answered May 12 '21 at 06:31

Gopal Oswal

154
1
3

I tryed and received warning is : Looks like you're passing an inline function for 'component' prop for the screen 'cart' (e.g. component={() => }). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour. – Chiến Nguyễn Văn May 12 '21 at 06:37
try that hope it will work but I guess my solution worked because I had done it for some of my apps – Gopal Oswal May 12 '21 at 12:05
I have consulted some post. And instead of use component={() =>() } then I used children={() =>{} } and it worked. But I still can't call function reload() – Chiến Nguyễn Văn May 12 '21 at 15:17
But if I use HomeRef at CartScreen then screen CatScreen it will showing double cause CartScreen is class component children of the Home. Even If use CartRef at Home then what i must do to call reload() when I'm staying at CartScreen to update cart – Chiến Nguyễn Văn May 12 '21 at 15:33

How to call function from component parent for component children Drawer Navigator

1 Answers1