Develop Reference

How to hide the shadow in the header React Navigation v.6.x?

Here's what I've tried to remove the header shadow,
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: props => <MainHeader {...props} /> ,
headerBackTitle: '',
headerTintColor: '#0f0f2b',
headerHideShadow: true
}}
/>
function MainHeader(){
return (
<View style={{height: 1, backgroundColor: '#fff', elevation: 0, shadowOpacity: 0, borderBottomWidth: 0}}></View>
);
}
But that didn't work

Set headerShadowVisible to false in the options, like this
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerShadowVisible: false }}
/>

Use property headerShadowVisible
See my sample

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

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!

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

How to change color of icon as well as text when changing screen in bottom tab navigator in react native?

I am working on an app and it has three screens in the bottom tab navigator. When I go from one screen to a different screen, I've been able to change the label color, however, I've been unable to change the color of the icon as well. Here's an example of what it looks like so far.
Here is my App.js code where I control this. I would really appreciate any help or direction on this. Thanks in advance for any help!
App.js:
function MainTabNavigator() {
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#e64951',
}}
>
<Tab.Screen options={{
headerShown: false, tabBarIcon: ({ tintColor }) => (
<Entypo name="home" size={30} color={tintColor} />
)
}} name="home" component={Home} />
<Tab.Screen options={{
headerShown: false, tabBarIcon: () => (
<FontAwesome5 name="plus" size={30} color="black" />
)
}} name="Add Friends" component={AddFriends} />
<Tab.Screen options={{
headerShown: false, tabBarIcon: ({ tintColor }) => (
<FontAwesome name="user" size={30} color={tintColor} />
)
}} name="Profile" component={Profile} />
</Tab.Navigator>
)
}

You are passing the wrong argument to tabBarIcon prop. You should pass color instead of tintColor.
tabBarIcon: ({ color }) => (
<Entypo name="home" size={30} color={color} />
)

React Navigation. Prop route.params in children component

I actually have this in my code
<Tab.Screen
name="Profile"
children={() => <ProfileStacks scrollRef={profileScrollRef} />}
options={{
tabBarColor: colors.white,
}}
/>
I need to pass props to the component "ProfileStacks" but also need to access route.params.
The problem is that I can't get this using "children". Instead, if I use
<Tab.Screen
name="Profile"
children={ProfileStacks}
options={{
tabBarColor: colors.white,
}}
/>
I can perfectly access route.params, but can't pass the props.
Any ideas?

If someone need this the solution is just doing:
<Tab.Screen
name="Profile"
children={(props) => <ProfileStacks route={props.route} scrollRef={profileScrollRef} />}
options={{
tabBarColor: colors.white,
}}
/>

Keyboard dismiss immediately when focusing textInput for first time react native

When I set cardStyleInterpolator to forFadeFromBottomAndroid or forVerticalIOS for a Stack.Screen, keyboard immediately dismiss when focusing on TextInput. This not happen for other type.
This only happen for first focus on TextInput.
Here is what's happening:
function RootStack() {
return (
<Stack.Navigator
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
>
<Stack.Screen name="GROUPS" component={GroupsScreen} options={{ headerShown: false }} />
<Stack.Screen name="GROUP" component={GroupScreen} />
<Stack.Screen
name="CREATE_POST"
component={CreatePostScreen}
options={{
headerShown: false,
cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
}}
/>
<Stack.Screen
name="SELECT_POST_TYPE"
component={AnonymousTypeScreen}
options={{
cardStyle: { backgroundColor: "transparent", opacity: 1 },
headerShown: false,
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
}}
/>
</Stack.Navigator>
);
}
and screen component is just simple component:
return (
<View>
<View style={{ flex: 1 }}>
<TInput />
</View>
</View>
);

I have downgraded dependencies for react-navigation ( native & stack ), because previouslly my code was working, so tried this and it worked.