I try to set the background of a card to transparent, but somehow a black shadow remains. How do I remove the the shadow?
const screenOptions = useMemo<StackNavigationOptions>(
() => ({
...TransitionPresets.SlideFromRightIOS,
safeAreaInsets: { top: 0 },
// presentation: "modal",
cardStyle: {
backgroundColor: "transparent",
},
cardShadowEnabled: false,
}),
[]
);
const screenAOptions = useMemo(() => ({ headerShown: false }), []);
return (
<NavigationContainer independent={true}>
<Stack.Navigator
screenOptions={{ headerShown: false }}
headerMode="screen"
>
<Stack.Screen
name="Home"
options={screenOptions}
component={() => <View style={{ flex: 1 }} />}
/>
</Stack.Navigator>
</NavigationContainer>
As a site note: The Navigator is located in a bottom drawer. However, the shadow appears only with the Navigator and not with other components located directly in the bottom drawer. Thats why i think its related to the navigator.
Related
Here is the code I got:
I got a Stack Navigator that store two screens:
<Stack.Navigator
initialRouteName="FirstScreen"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="DrawerNavigator" component={DrawerNavigator}/>
</Stack.Navigator>
And I got a DrawerNavigator which have my MainNavigator, which is the screen cap I provided:
<Drawer.Navigator
initialRouteName="MainNav"
screenOptions={{
drawerStyle: {
backgroundColor: getPrimaryColor()
},
drawerLabelStyle: {
color: 'white'
}
}}>
<Drawer.Screen
name="MainNav"
component={MainNav}
options={({route}) => (getShowOptions(route))}/>
</Drawer.Navigator>
Inside the MainNav, it have two page, one is home, another is detail:
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
options={{ headerShown:false }}
name="Home"
component={Home}
/>
<Stack.Screen
name="Detail"
component={Detail} />
</Stack.Navigator>
As you may noticed that it has a getShowOptions method, which is control the actual nav bar display:
function getShowOptions(route) {
const routeName = getFocusedRouteNameFromRoute(route);
const icon =
let options = {
headerStyle: {
backgroundColor: getPrimaryColor()
},
headerTintColor: '#fff',
headerTitleAlign: 'center',
title: i18n.t('Home'),
drawerIcon: ({focused, size}) => (
<View
style={[{
height: iconSize,
width: iconSize
}
]}>
{icon}
</View>
)
};
if (routeName === 'Detail') {
options.headerShown = false;
}
return options;
}
When the screen is push to "Detail", it will hide the header, to show a header that have a back button, but when it put back to "Home", it should use back the "Drawer" menu button. As u can see the issue happen when we switch back and forward between the drawer navigation bar and the stack navigation bar.
The use case is pretty simple, we would like to have the "menu" when the "home" screen is appear, and "back" appear when the "detail" screen is presented. It seems that the React Native Stack Navigator and Drawer Navigator can't work together very well. Any suggestions?
I am coding an app with a bottom Tab Navigator nested within a Stack Navigator, I am trying to target the content styling for all the screen within this Tab.Navigator but the commands I am using are not working
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function TabNavigator(){
return (
<Tab.Navigator
// tabBarOptions={{
// style: {backgroundColor: "#511cff"} // deprecated metro says to place it into screenOptions under tabBarStyle
// }}
screenOptions={{
// headerStyle: { backgroundColor: "#2f28fc" },
tabBarActiveTintColor: "#F8F2DA",
tabBarOptions:{
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
},
tabBarStyle: {
backgroundColor: "#2f28fc",
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
},
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
headerShown: false,
}}
>
</Tab.Navigator>
)
}
export default function App() {
return (
<>
<StatusBar style="light" />
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: "#2f28fc" },
headerTintColor: "#F8F2DA",
sceneContainerStyle: { backgroundColor: "#511cff" }
}}
>
<Stack.Screen
name='ExpensesView'
component={TabNavigator}
screenOptions={{
sceneContainerStyle:{ backgroundColor: "#511cff" },
contentStyle: {backgroundColor:"#511cff"}
}}
/>
</Stack.Navigator>
</NavigationContainer>
</>
);
}
From looking through here: https://github.com/react-navigation/react-navigation/issues/8076
I think the solution would be to use the sceneContainerStyle property within Navigator like so:
<Tab.Navigator
sceneContainerStyle= {{
backgroundColor: "#511cff"
}}
I was able to solve this by using sceneContainerStyle property outside of the screenOptions property. Why they have moved it out of the screenOptions for just TabNavigator is a mystery, but it works.
CODE:
<Tab.Navigator
tabBar={props => <CustomTabBar {...props} />}
screenOptions={({ route }) => ({
headerShown: false,
})}
sceneContainerStyle={styles.sceneStyle}>
I read the documentation for you and found that you syntax is not valid.
Their is nothing like tabBarOptions in it.
here's the link of how we can use the options in tab Bar
https://reactnavigation.org/docs/screen-options
Hope this will help u.
i have a bottom tab in my react native application, when i try to edit the tabBarStyle on the tab navigator it doesnt work. It only works on 1 out of my 3 tabs for some reason.
Only the help tab follows the required design the home and the test tab remain as default. I have tried all solutions only add made sure that i am using screenOptions and tabBarStyle instead of style.
const Tab = createBottomTabNavigator();
const AppNavigator = () => {
return (
<Tab.Navigator
screenOptions={{
tabBarActiveTintColor:'white',
tabBarLabelStyle:{
fontWeight:'700'
},
tabBarStyle: {
backgroundColor:'black',
borderTopColor: 'black',
elevation: 0, // for Android
shadowOffset: {
width: 0, height: 0 // for iOS
},
height:Platform.OS==='ios'&& dimen.width>400?80:Platform.OS==='ios'&& dimen.width<400?60:50,
}
}}
initialRouteName={"Home"}
>
<Tab.Screen
name="Home"
component={HomeNavigator}
options={{
tabBarIcon: ({ size, color,focused }) => (
<Entypo name="home" size={30} color={'#969696'}/>
),
headerShown:false,
unmountOnBlur: true,
}}
/>
<Tab.Screen
name="Test"
component={TestNavigator}
options={({ navigation }) => ({
tabBarButton: () => (
<NewListingButton
onPress={() => navigation.navigate(routes.test)}
/>
),
tabBarIcon: ({ size, color }) => (
<FontAwesome
name="life-saver"
size={size}
color={color}
/>
),
headerShown: false,
unmountOnBlur: true,
})
}
/>
<Tab.Screen
name="Help"
component={HelpNavigator}
options={{
tabBarIcon: ({ size, color,focused }) => (
<Ionicons name="help" size={30} color={'#969696'}/>
),
unmountOnBlur: true,
headerShown:false,
}}
/>
</Tab.Navigator>
)
};
export default AppNavigator;
My problem was with react navigation 6 in order to hide the tab navigator on specific screens i had to set the tabBarStyle display to none, which was why the background wasnt changing if the tab had a stack
I'm looking for a way to remove the white space circled in red in my react native top tab bar.
The top tab bar is in a stack navigator which is a bottom tab navigator
const BottomTab = () => {
return (
<Tab.Navigator
style: { height: 55, borderTopWidth: 0, elevation: 0 },
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Recent" component={RecentStack} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
};
const RecentStack = () => {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="RecentTabs" component={RecentTopTabBar} />
<Stack.Screen name="TaskDetails" component={TaskDetails} />
</Stack.Navigator>
);
};
const RecentTopTabBar = () => {
return (
<Tab.Navigator >
<Tab.Screen name="Ongoing" component={OngoingJobs} />
<Tab.Screen name="Completed" component={CompletedJobs} />
</Tab.Navigator>
);
};
I have tried to put marginTop as a negative number but that just makes the tab disappear into the white space. The headerShown attribute is false so what could the white space be.
I know this is old and you've probably found a solution, but have you tried adding screenOptions={{ headerShown: false }} to your 'BottomTab' navigator?
I ran into a similar issue with react-navigation Bottom Tabs Navigator, and that resolved it.
If this is a (createMaterialTopTabNavigator)
then you should use "screenOptions" Prop:
screenOptions={{
tabBarStyle: {
paddingTop: 0,
marginTop: 0
},
}}
Note: Use The Prop should be Inside The <StackName.Navigator />
Example:
<TopTabs.Navigator
initialRouteName='...'
screenOptions={{
tabBarStyle: {
paddingTop: 0,
marginTop: 0
},
}}
>
....Screen's
</TopTabs.Navigator>
I am new in react native technology. I have used following hierarchy in my react native app.
I have used Stack.Navigator in which I am using various screen, I. Login, II. Sign-Up, III. TabBar Screen.
In TabBar screen I have used various individual Stack.Navigator because I have to show tab bar on every child screen.
Now problem is that I have to update some value on tab screen when user click on that particular screen. It is calling once at first time, not working second time.
I have used following code for execute 'focus' listener on tab screen :-
onScreenFocus = () => {
this.reloadFavrouite()
alert("again calling")
}
componentDidMount() {
this.props.navigation.addListener('focus', () => this.onScreenFocus())
this.reloadFavrouite()
}
'focus' listener work well If I am not use individual Stack.Navigator at every tab screen, but it is creating another issue is that tab bar not showing in child screen.
I have used this tab navigator code:- Please check
export default class TabNavigator extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Tab.Navigator initialRouteName='Home' lazy={true} tabBarOptions={
{
style: {
backgroundColor: '#FFFFFF',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
overflow: 'hidden',
borderColor: 'transparent',
}
}
}>
<Tab.Screen name="HomeNavigator" component={HomeNavigator}
options={{
tabBarLabel: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Text style={{ color: tintColortab, fontSize: 8, fontFamily: "Roboto-Bold", marginBottom: 6 }}>{StringsOfLanguages.Home}</Text>
)
},
tabBarIcon: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Image source={require('../../../assets/images/TabBarIcons/ic_home_selected/ic_home_selected.png')}
style={{ marginTop: 10, tintColor: tintColortab }}>
</Image>
)
}
}}>
</Tab.Screen>
<Tab.Screen name="FavouriteNavigator" component={FavouriteNavigator}
options={{
tabBarLabel: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Text style={{ color: tintColortab, fontSize: 8, fontFamily: "Roboto-Bold", marginBottom: 6 }}>{StringsOfLanguages.Favorite}</Text>
)
},
tabBarIcon: ({ focused }) => {
const tintColortab = focused ? "#006C35"
: "#000000"
return (
<Image source={require('../../../assets/images/TabBarIcons/ic_favorits_unselected/ic_favorite_unselected.png')}
style={{ marginTop: 10, tintColor: tintColortab }}>
</Image>
)
}
}}
>
</Tab.Screen>
</Tab.Navigator>
);
}
And individual navigation is like :-
class HomeNavigator extends React.Component {
render() {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
<Stack.Screen name="AllRestuarent" component={AllRestuarent} options={{ headerShown: false }} />
<Stack.Screen name="AllLaundry" component={AllLaundry} options={{ headerShown: false }} />
<Stack.Screen name="AllEntertainment" component={AllEntertainment} options={{ headerShown: false }} />
<Stack.Screen name="Offer" component={Offer} options={{ headerShown: false }} />
<Stack.Screen name="ComponyMap" component={ComponyMap} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
class FavouriteNavigator extends React.Component {
render() {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen name="Favorites" component={Favorites} options={{ headerShown: false }} />
<Stack.Screen name="Offer" component={Offer} options={{ headerShown: false }} />
<Stack.Screen name="ComponyMap" component={ComponyMap} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
You are not using focus listener in the right way according to your current version, You are using react-navigation v5 and you are adding a listener the way it is used in react-navigation v4, Here is a solution to your problem.
class YourClassComopnent extends React.Component {
componentDidMount() {
/*
Now you can access to isFocused prop and
this prop will be true whenever your screen is
in the focus.
*/
if(this.props.isFocused) this.onScreenFocus()
this.reloadFavrouite()
}
render() {
// Get it from props
const { isFocused } = this.props;
}
}
// Wrap and export
export default function(props) {
const isFocused = useIsFocused();
// pass your class here
return <YourClassComopnent {...props} isFocused={isFocused} />;
}
Link to docs, how you can use isFocused in react-navigation v5