I am trying to put a badge head on a tab bar in React Native but it is not working.
Below is an example of my code:
These are my module versions :
"#react-navigation/native": "^6.0.14",
"#react-navigation/bottom-tabs": "^6.4.1",
This is my code :
<Tab.Screen
name={'ApprovalTab'}
component={ApprovalScreen}
options={{tabBarBadge:3,
tabBarBadgeStyle:{color:'red'}}}
/>
try this code
import { Ionicons } from '#expo/vector-icons';
<Tab.Screen
name={'ApprovalTab'}
component={ApprovalScreen}
options={{
tabBarBadge: 0,
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" color="red" size={30} />
),
}}
/>
hope this will help you!!
Related
Lets say I am in the tab - ChatStack and I am on the screen stack - AllChatRooms. Then when I click on one of the chat rows, I am then navigated to the chat room. I have it coded that, when in the ChatRoom screen, don't display nav bar and that works. But the ChatRoom screen does not reach full height and it acts like the nav bar is still there. I attached an image with colors so you can see what I am talking about.
Would really appreciate some help if anyone knows how to get the screen to reach the bottom of the phone screen.
So I am using a bottom tab navigator like this (simplified version):
Tabs.js
const getRouteName = (route) => {
const routeName = getFocusedRouteNameFromRoute(route);
if (routeName?.includes("HomeAllCategories") || routeName === "ChatRoom") {
return "none";
}
return "flex";
}
return (
<Tab.Navigator screenOptions={{ tabBarShowLabel: false }}>
<Tab.Screen name="Home" component={HomeStack}/>
<Tab.Screen name="Bookmarks" component={BookmarkStack}/>
<Tab.Screen name="Chats" component={ChatStack} options={({route}) => ({
tabBarStyle: {display: getRouteName(route)},
})}/>
<Tab.Screen name="Settings" component={SettingsStack}/>
</Tab.Navigator>
)
ChatStack.js
<Stack.Navigator>
<Stack.Screen name="AllChatRooms" component={AllChatRooms} />
<Stack.Screen name="ChatRoom" component={ChatRoom} />
</Stack.Navigator>
ChatRoom.js
return (
<SafeAreaView className="flex-1 bg-slate-900">
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
className="flex-1"
keyboardVerticalOffset={10}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<FlatList
data={messages}
className="pl-4"
keyExtractor={item => item.id}
renderItem={({ item }) =>
item.from === user.name ? (
<ReceiverMessage message={item} />
) : (
<SenderMessage message={item} />
)
}
/>
</TouchableWithoutFeedback>
{/* Text Box */}
<View className="bg-white flex-row justify-between items-center border border-gray-200 px-5 py-2">
<TextInput
className="h-10 text-lg w-4/5"
placeholder="Send Message..."
/>
<Button title="Send" color="#6ECCAF"/>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
)
and I'm using:
"#react-navigation/bottom-tabs": "^6.5.2",
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.7",
But sometimes it does have the full height and I don't know why? On launch, the height of the screen is never working but after leaving and opening the chat room several times, the height of the screen does reach the bottom. Why is that?
I'm following the guide from https://reactnavigation.org/docs/bottom-tab-navigator/
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
screenOptions={{
tabBarActiveTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) =>
<MaterialCommunityIcons name="home" color={color} size={size} />
}}
/>
<Tab.Screen
name="Notifications"
component={Notifications}
options={{
tabBarLabel: 'Updates',
tabBarIcon: ({ color, size }) =>
<MaterialCommunityIcons name="bell" color={color} size={size} />
}}
/>
</Tab.Navigator>
);
}
Everything works, except it shows the wrong icon. 'home' icon displays sad emoji, and 'bell' icon displays sad emoji with sweat.
I tried to change name="" in <MaterialCommunityIcons>icons and it all shows different icons that what the name suggested.
The icon that appears are also coloured, so I suspected that it might not be rendering MaterialCommunityIcons at all.
Could someone suggest what might have gone wrong please?
Thank you
For solving the issue follow these steps
create folder called font inside android/app/src/main/assets
Copy all Fonts inside the node_modules\react-native-vector-icons\Fonts
Paste the same to the above created folder(android/app/src/main/assets/fonts)
Hope it will fix the issue.
I was facing the same problem on android.
I just followed the android installation
https://github.com/oblador/react-native-vector-icons#android
In my case, I have to ignore this step which should perform in android/app/src/main/java/...MainApplication.java
import com.oblador.vectoricons.VectorIconsPackage;
new VectorIconsPackage()
(it gave me an error)
build the APK again.
And that's it. it works for me.
When building a custom Tab.Screen I've tried to pass a custom tabBarIcon. While the icon renders it will not navigate to the component TestScreen. In the docs for tabBarIcon my understanding the Tab.Screen should be written as:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<TouchableOpacity>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
}}
/>
When I omit the options:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
/>
the onClick renders the component when clicked. When I read the docs for Options for screens it mentions screenOptions should be passed on the Navigator or Group. I tried to see if I could find a similar Q&A:
React native react-navigation tabBarIcon does not display
Why Is My Component not Rendering Within my Tab.Screen?
but I was unable to see where my error is.
My current dependencies:
"dependencies": {
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/native": "^6.0.2",
"expo": "~42.0.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
How can I get my custom icon to render and navigate to the correct component?
Leaving this as an answer hoping it helps someone else down the road. After sleeping on this I examined my Tab.Screen again and I remembered for a TouchableOpacity to work it needed an onPress even though I was thinking the parent would take care of the navigation but this wasn't the case.
While this answer is somewhat accurate, with removing the TouchableOpacity, it would make the icon work, code:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
),
}}
/>
but it defeats the purpose of a custom button and the opacity change. After looking closer at options I wondered what if I passed down the navigation to onPress and used navigate?
Well it worked and I was left with:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={({ navigation }) => ({
tabBarIcon: () => (
<TouchableOpacity onPress={() => navigation.navigate(routes.FOO)}>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
})}
/>
Your TouchableOpacity is overlap with react navigation internal press handler, just wrap your icon with View
If you want customize press behavior of tab icon pass the listener object to listener props https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen
When i am trying to adding image in bottom tab navigation then i just got only title of bottom tab.
How i can get image in bottom tab navigation in react-native?
I am using
import { NavigationContainer } from "#react-navigation/native"
import { createStackNavigator } from "#react-navigation/stack"
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs"
//this libraries for achieve bottom tab navigation in react native.
function TabNav() {
return (
<Tab.Navigator
initialRouteName="Logbook"
tabBarOptions={{
activeTintColor: "#3498db",
}}
>
<Tab.Screen
name="Logbook"
component={Logbook}
options={{
tabBarLabel: 'Logbook',
tabBarIcon:({focused})=>{
focused?
<Image source={Images.logbookImg} style={styles.activeImg} />
: <Image source={Images.logbookImg} style={styles.deActiveImg} />
}
}}
/>
<Tab.Screen
name="Voyage"
component={Voyage}
options={{
tabBarLabel: 'Voyage',
tabBarIcon:({focused})=>{
focused?
<Image source={Images.voyageImg} style={styles.activeImg} />
: <Image source={Images.voyageImg} style={styles.deActiveImg} />
}
}}
/>
<Tab.Screen
component={Crew}
name="Crew"
options={{
tabBarLabel: 'Crew',
tabBarIcon:({focused})=>{
focused?
<Image source={Images.crewImg} style={styles.activeImg} />
: <Image source={Images.crewImg} style={styles.deActiveImg} />
}
}}
/>
</Tab.Navigator>
)
The problem is very simple, you are not returning the image
tabBarIcon:({focused})=>(
focused?
<Image source={Images.logbookImg} style={styles.activeImg} />
: <Image source={Images.logbookImg} style={styles.deActiveImg} />
)
replace the curly braces with brackets or put a return statement and it would work as expected.
I am using a BottomTabNavigator with 2 screens but I also want to use a custom header, which I imported, to each one of them. I have tried set an option to the Tab.Navigator by adding a setOptions in it:
const Tab = createBottomTabNavigator();
export default function App() {
return(
<NavigationContainer >
<Tab.Navigator setOptions={{
headerTitle: <Header />
//</Header> was imported
}}>
<Tab.Screen
name="HomeScreen"
component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<AntDesign name="home" color={Colors.amarelo} size={30} />
)
}}
/>
<Tab.Screen
name="GroupScreen"
component={GroupScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<AntDesign name="car" color={Colors.amarelo} size={30} />
)
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
However, my attempt was unsuccessful. I read that docs for React-Navigation 5 but I haven't found how to implement a custom header on a BottomTabNavigator
Bottom Tab navigator does not have a header. To do this you have to use stack Navigator inside each tab of the bottom tab navigator. So you need to create a stack navigator that have "HomeScreen" as screen, same for GroupScreen. Then, in the bottom tab navigator use the stack navigators as component for tab.screen.
Than you can customize headers of bottom tab navigator.
I could post a short code if it helps you