enter image description here
({
headerShown: false,
tabBarStyle:{
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
height: 90,
backgroundColor: '#ffffff',
color:'black',
},
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home-outline';
} else if (route.name === 'Tracking') {
iconName = focused ? 'navigate' : 'navigate-outline';
}
else if (route.name === 'Setting') {
iconName = focused ? 'settings' : 'settings-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#0B82E9',
tabBarInactiveTintColor: '#948F8F',
})}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Tracking" component={Tracking} />
<Tab.Screen name="Setting" component={Setting} />
</Tab.Navigator>
in this code, I want to change the border radius of the navigation bar but the result it turn into this. the background color is appeared. how can I remove that (the bg color is not that color I changed it in the app.js file to meet the upper container )
Related
Hi I am using TabNavigator for showing tabs in bottom, Initially everything was working fine when tabs where only 4 as tabs are increased to 6tabs now they are congested and not looking properly, Can we add one more button on last and show the extra 2 tabs in that popover as like teams app.any help to achive this.
below is my code of TabNavigator:
<Tab.Navigator
// initialRouteName='StartupContainer'
screenOptions={({ route }) => ({
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarStyle: {
elevation: 0,
borderTopWidth: 0,
backgroundColor: "#F1F1F1",
height: 70,
paddingBottom: 10,
fontFamily: "Outfit-Medium",
},
tabBarIcon: ({ focused, iconColor, iconName }) => {
if (route.name === "Dashboard") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/dashboardIcon.png");
title = "dddd";
} else if (route.name === "My Tasks") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/MyTasks.png");
title = "dddd";
} else if (route.name === "Job Openings") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/JobOpenings.png");
title = "aaaaa";
} else if (route.name === "Candidates") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/Candidates.png");
title = "5555";
} else if (route.name === "Users") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/users.png");
title = "users";
} else if (route.name === "Contracts") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/contracts.png");
title = "Contracts";
} else if (route.name === "Assign Tasks") {
iconColor = focused ? "#F88022" : "grey";
iconName = require("../Assets/Images/assign_tasks.png");
title = "AssignTasks";
} else {
// iconColor = focused ? '#3a86fe' : 'white'
// iconName = 'user'
}
return <Image style={{ tintColor: iconColor }} source={iconName} />;
},
// title:"My Tasks",
tabBarShowLabel: true,
tabBarLabelStyle: { color: "#021668" },
})}
>
{userDetails.role_id === 0 ? (
<>
<Tab.Screen name="Dashboard" component={DashboardStack} />
<Tab.Screen name="My Tasks" component={MyTaskStack} options={{unmountOnBlur: true}}/>
<Tab.Screen name="Job Openings" component={JobOpeningsStack} options={{unmountOnBlur: true}}/>
<Tab.Screen name="Candidates" component={CandidateStack} options={{unmountOnBlur: true}}/>
</>
) : (
<>
<Tab.Screen name="Dashboard" component={AdminDashboardStack} />
<Tab.Screen name="Assign Tasks" component={AdminTasksStack} />
<Tab.Screen name="Users" component={AdminUsersStack} />
<Tab.Screen name="Contracts" component={AdminContractsStack} />
<Tab.Screen name="Job Openings" component={AdminJobOpeningsStack} />
<Tab.Screen name="Candidates" component={AdminCandidateStack} options={{unmountOnBlur: true}} />
</>
)}
</Tab.Navigator>
oh... Tab.Screen has tabBarIcon option. for example,
import React from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import HomeScreen from "./tabs/home";
import BoardScreen from "./tabs/board";
import MyPageScreen from "./tabs/my_page";
import colors from "./utils/colors";
import { Image, StyleSheet } from "react-native";
import dp from "./utils/dp";
const Tab = createBottomTabNavigator();
export default function Tabs() {
const tabs = [
{
name: "Home",
screen: HomeScreen,
iconPath: require("./icons/home_icon.png"),
iconOffPath: require("./icons/home_icon_off.png"),
},
{
name: "Board",
screen: BoardScreen,
iconPath: require("./icons/board_icon.png"),
iconOffPath: require("./icons/board_icon_off.png"),
},
{
name: "MyPage",
screen: MyPageScreen,
iconPath: require("./icons/mypage_icon.png"),
iconOffPath: require("./icons/mypage_icon_off.png"),
},
];
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: colors.BackgroundColor(),
},
}}
sceneContainerStyle={{ backgroundColor: colors.BackgroundColor() }}>
{tabs.map((value, index) => (
<Tab.Screen
key={index}
name={value.name + "Screen"}
component={value.screen}
options={{
tabBarShowLabel: false,
tabBarIcon: ({ focused }) =>
focused ? (
<Image source={value.iconPath} style={styles.icon} />
) : (
<Image source={value.iconOffPath} style={styles.iconOff} />
),
}}
/>
))}
</Tab.Navigator>
);
}
const styles = StyleSheet.create({
icon: {
width: dp(24),
height: dp(24),
resizeMode: "contain",
tintColor: colors.MainColor(),
},
iconOff: {
width: dp(24),
height: dp(24),
resizeMode: "contain",
tintColor: "gray",
},
});
I am trying to implement a bottom tab bar with custom tabs. for example, my tab names are a, b, c, and d in some other cases my tab bar names are k, l, m, and n. How to handle this type of scenario. Currently, my component looks like the below. I tried various ways unable to do it. I tried using the map function also it's working.
Tabbar.js
const LoginStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Home"
component={Home}
options={({ route }) => ({
title: route.params?.title,
headerBackVisible: false,
})}
/>
</Stack.Navigator>
);
};
const Tabs = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === "LOGIN") {
iconName = focused ? loginAct : loginInAct;
} else if (route.name === "A") {
iconName = focused ? aAct : aInAct;
} else if (route.name === "B") {
iconName = focused ? bAct : bInAct;
} else if (route.name === "C") {
iconName = focused ? bAct : bInAct;
} else if (route.name === "D") {
iconName = focused ? dAct : dInAct;
}
// You can return any component that you like here!
return <Image source={iconName} style={{ width: 20, height: 20 }} />;
},
tabBarActiveTintColor: "#007abc",
tabBarInactiveTintColor: "#000000",
})}
>
<Tab.Screen name="LOGIN" component={LoginStack} />
<Tab.Screen name="A" component={A} />
<Tab.Screen name="B" component={B} />
<Tab.Screen name="C" component={C} />
<Tab.Screen name="D" component={D} />
</Tab.Navigator>
);
};
//I am customising bottom tab bar but it showing me error that none of these file exist.
const Tab = createBottomTabNavigator();
const Afterreg = () => {
return (
<Tab.Navigator options={({ route }) => ({
tabBarIcon: ({ color }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
} else if (route.name === 'Like') {
iconName = 'search';
} else if (route.name === 'Chat') {
iconName = 'calendar';
} else if (route.name === 'Profile') {
iconName = 'user-o';
}
return <FontAwesome name={iconName} size={25} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'selmon',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Home" component={Cards} Options={{
tabBarIcon: ({ size, color }) => (
<MaterialCommunityIcons name="home" size={size} color={color} />
),
}} />
<Tab.Screen name="Like" component={Heart} />
<Tab.Screen name="Chat" component={Chat} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
)
}
export default Afterreg;
I am customising bottom tab bar but it showing me error that none of these file exist.
Is there a way where I could hide the screen that says "### HIDE ME ###" or is there a way where I could define a screen that wont show up in the Tab Navigation?
Here is the code:
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-home'
: 'ios-home';
} else if (route.name === 'Messages') {
iconName = focused ? 'ios-paper-plane' : 'ios-paper-plane';
} else if (route.name === 'Todo') {
iconName = focused ? 'ios-list-box' : 'ios-list';
} else if (route.name === 'More') {
iconName = focused ? 'ios-more' : 'ios-more';
} else if (route.name === 'Videos') {
iconName = focused ? 'ios-videocam' : 'ios-videocam';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#ffcc07',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Home" component={DashboardScreen} />
<Tab.Screen name="Messages" component={MessagesScreen} />
<Tab.Screen name="Todo" component={TodoScreen} />
<Tab.Screen name="Videos" component={WisdomReplayScreen} />
<Tab.Screen name="More" component={MoreOptionsScreen} />
<Tab.Screen name="Test" component={Test} ### HIDE ME ###/>
</Tab.Navigator>
you can determine the screens on which the tab bar should be hidden like this
function getTabBarVisible(route) {
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Home') {
return false;
}
return true;
}
**and attach it to the tab navigator's screen:**
<Tab.Screen name="Home"
component={HomeStackScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route) })} />
I have been stuck in this issue since yesterday and I cannot find a solution.
I have been trying to adjust the color of safeArea in iPhone X, it's working well on the top, and in the bottom as well for screens with no tab, however, in screens with tab navigator, the bottom safeArea is always white as shown in the screenshot. Does anyone know how to solve this issue?
Also, I want to ask if it would be better to use normal SafeAreaView component and remove the SafeAreaProvider and remove react-native-safe-area-context package, I just added it as a trial to solve this problem but I was first working with the react native normal SafeAreaView component;
In App component:
import { SafeAreaProvider } from "react-native-safe-area-context";
<SafeAreaProvider>
<NavigationContainer>
<CatNavigator />
</NavigationContainer>
</SafeAreaProvider>
In the CatNavigator component:
const CatNavigator = () => {
return (
<Drawer.Navigator
initialRouteName="Home" >
<Drawer.Screen
name="Home"
component={SettingsNavigator}
options={{ title: "Inicio" }}
/>
</Drawer.Navigator>
In the settings tab navigator:
const SettingsNavigator = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
const iconType = Platform.OS === "ios" ? "ios" : "md";
if (route.name === "Home") {
iconName = iconType + "-home";
} else if (route.name === "Settings") {
iconName = iconType + "-settings";
}
const tabColor = focused ? Colors.buttonBackColor : Colors.titleColor;
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: Colors.activeTabColor,
inactiveTintColor: Colors.inactiveTabColor,
activeBackgroundColor: Colors.tabBackgroundColor,
inactiveBackgroundColor: Colors.tabBackgroundColor,
safeAreaInset: { bottom: "never", top: "never" },
}}
>
<Tab.Screen
name="Home"
component={HomeNavigator}
options={{ title: "Inicio" }}
/>
<Tab.Screen
name="Settings"
component={SettingStackNavigator}
options={{ title: "Ajustes" }}
/>
</Tab.Navigator>
In SettingsNavigator:
const SettingStackNavigator = (props) => {
return (
<SettingStack.Navigator screenOptions={defaultNavOptions}>
<SettingStack.Screen
name="Settings"
component={SettingScreen}
options={settingsOptions}
/>
</SettingStack.Navigator>
);
};
And finally in SettingScreen:
import { SafeAreaView } from "react-native-safe-area-context";
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: Colors.backgroundColor,
justifyContent: "center",
alignItems: "center",
}}
>
{colorScheme === "dark" && <StatusBar barStyle="light-content" />}
// Other components
</SafeAreaView>
If you want to change that little guy at the bottoms color you need add the style option to your Tab.Navigator, like so
tabBarOptions={{
style: {
backgroundColor: Colors.tabBackgroundColor,
},
}}