I had build the layout using fontawsome icons in snack expo but when run the same project in expo cli the icons are not displayed.It displayed as a cross.App workes perfectly in snack but not in expo cli.I have tried googleing the probelem but the solutions are change files in gradle i dont have a gardle file this is a snack project.Is there any solution any help will be greatfull,Thanks.
import Icon from 'react-native-vector-icons/FontAwesome';
{
Home: {
screen: FetchNewsApp,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="home" color={tintColor} size={25} />
),
},
},
Explore: {
screen: ExploreScreenApp,
navigationOptions: {
tabBarLabel: 'Explore',
tabBarIcon: ({ tintColor }) => (
<Icon name="wpexplorer" color={tintColor} size={25} />
),
},
},
Search: {
screen: SearchScreenApp,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: ({ tintColor }) => (
<Icon name="search" color={tintColor} size={25} />
),
},
},
Settings: {
screen: SettingScreenApp,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Icon name="cog" color={tintColor} size={25} />
),
},
},
Profile: {
screen: ProfileScreenApp,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({ tintColor }) => (
<Icon name="user-circle" color={tintColor} size={25} />
),
},
},
},
{
initialRouteName: 'Home',
}
);
If you are using expo managed app just use expo vector icons
Expo vector icons
because react native vector icons require linking which is not possible with expo managed apps.
here is an example for expo icons on snack:
Snack
You also use images replace icons it works fine,
tabBarIcon: ({ tintColor }) => (
<Image source={require('...')} style={{}}/>
)
Related
I have been trying to put an Icon in the bottom tab, I have been using the react navigation tabs version 4. I have tried to upgrade to version 5 but that's a different story.
The goal is just to include an icon but I'm just failing left and right. The documentation says to add it in the navigationOptions
HomeScreen.navigationOptions = ({navigation}) => {
return {
title: 'Get Me Goods',
headerStyle: HeaderStyle.headerStyle,
headerTintColor: HeaderStyle.headerTintColor,
headerTitleStyle: HeaderStyle.headerTitleStyle,
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>,
headerLeft: () => <MenuImage
onPress={() => {
// navigation.openDrawer()
navigation.navigate('SignOut')
}}
/>
,
headerRight: () =>
<MenuImage
onPress={() => {
navigation.openDrawer()
}}
/>
}
}
and also tried it in the bottom tab navigator
const BottomTabMenu = createBottomTabNavigator(
{
Home: {
screen: Home,
options: {
tabBarLabel: 'Testing',
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
}
},
Me,
Search,
Messages,
Sell
},
{
initialRouteName: 'Home'
}
)
what else am I missing?
Got this figured out, just used the navigationOptions instead of options in the bottom tab bar configuration
const BottomTabMenu = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: 'Testing',
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
}
},
Me,
Search,
Messages,
Sell
},
{
initialRouteName: 'Home'
}
)
I want to dynamically change the icon of the bottom tab bar icon to the icon of the drawer page i change to. When the drawer open and i select cards page i want the payment icon to change from money to cards icon. Is this possible to achieve ? thanks
bottom tab
const bottomtab = createBottomTabNavigator(
{
home: {
screen: home,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="home" color={tintColor} focused={focused} size={30} />,
},
},
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
return{
tabBarIcon: ({ tintColor }) => <Icon name="money" color={tintColor} size={20} />,
}
},
},
},
drawer nav
const paymentdrawerstack = createDrawerNavigator(
{
balance: {
screen: balance,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="money" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'balance',
}
},
},
cards: {
screen: cards,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="cards" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'cards',
}
},
},
Try this, use this function to get the active route:
const getActiveRoute = route => {
if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
return route.routeName;
}
const childActiveRoute = route.routes[route.index];
return getActiveRoute(childActiveRoute);
}
And then in navigationOptions of payment, check what the active route is, change the icon accordingly, like so:
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
const name = getActiveRoute(navigation.state) === 'cards' ? 'cards' : 'money';
return {
tabBarIcon: ({ tintColor }) => <Icon name={name} color={tintColor} size={20} />,
}
},
},
I’m setting up a new component with an icon from the "react-native-vector-icons" and I got a yellow warning.
This is for a new feature of the icon
Dashboard: {
screen: DashboardStack,
navigationOptions: {
title: 'HOME',
tabBarOnPress: ({ navigation, defaultHandler }) => handleTabPress(navigation, defaultHandler),
tabBarIcon: ({ focused, tintColor }) => {
// HERE IS THE PROBLEM //
return <SSIcon name={'home'} size={20} color={focused ? GStyle.GREEN : Color(GStyle.BLACK).alpha(.45)} />
},
}
},
I expect for no yellow warning
You could try this code
<SSIcon name={'home'} size={20} color={focused ? "green" : "black"} />
have you tried separating the color instead?
const stackNav = createStackNavigator ({
Dashboard: {
screen: DashboardStack,
navigationOptions: {
title: 'HOME',
tabBarOnPress: ({ navigation, defaultHandler }) => handleTabPress(navigation, defaultHandler),
tabBarIcon: ({ focused, tintColor }) => <SSIcon name={'home'} size={20} color={tintColor} />
}
}}, {
tabBarOptions: {
activeTintColor:GStyle.GREEN,
inactiveTintColor: Color(GStyle.BLACK).alpha(.45)
})
in your application's root index.js add this line:
console.disableYellowBox = true;
i want to hide tab bar in 1st screen only and show in other screens, how can i achieve this. any help is appreciated
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Quotes: {
screen: QuoteScreen,
navigationOptions: {
tabBarLabel: 'Quotes',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-quote" color={tintColor} size={24} />
)
}
},
About: {
screen: AboutScreen,
navigationOptions: {
tabBarLabel: 'About',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-person" color={tintColor} size={24} />
)
}
},
Books: {
screen: BoookScreen,
navigationOptions: {
tabBarLabel: 'Books',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-book" color={tintColor} size={24} />
)
}
},
Videos: {
screen: VideoScreen,
navigationOptions: {
tabBarLabel: 'Videos',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-videocam" color={tintColor} size={24} />
)
}
}
},
{
tabBarOptions: {
activeTintColor: 'yellow',
inactiveTintColr: 'white',
activeBackgroundColor:'black',
inactiveBackgroundColor:'black'
}
});
export default createAppContainer(TabNavigator);
show tab bar only in home screen i tried hiding in tab bar option but it either hides the tab bar on all screens or tab bar is visible in all screens.what should i try to achieve the desired result? any help is appreciated. thanks in advance...
Add tabBarVisible: false, to the home screen navigationOptions
So I made a bottom tab navigator in the App.js screen and I tried to create a material top tab navigation in another screen settings.js
In settings.js I tried to create a navigation with the same code but shorter. Click between tabs became really slow but swiping worked perfectly. I then read you should put all navigation in one file (App.js) so it won't slow down.
My question is how do I put a MaterialTopTabNavigator and BottomTabNavigator in one file and then just export the MaterialTopTabNavigator to another screen?
settings.js
const settingsTabs = creatematerialtopTabNavigator ({
Home:{
screen: Home,
navigationOptions:{
tabBarIcon: ({ focused, tintcolor }) => (
<Icon name="ios-home" size={24} />
)
}
},
Inbox:{screen: Inbox,
navigationOptions:{
tabBarIcon: ({ tintcolor }) => (
<Icon name="ios-mail" size={24} />
)
}
},
App.js
import {createBottomTabNavigator} from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'
const Tabs = createBottomTabNavigator ({
Home:{
screen: Home,
navigationOptions:{
tabBarIcon: ({ focused, tintcolor }) => (
<Icon name="ios-home" size={24} />
)
}
},
Inbox:{screen: Inbox,
navigationOptions:{
tabBarIcon: ({ tintcolor }) => (
<Icon name="ios-mail" size={24} />
)
}
},
Search:{screen: Search,
navigationOptions:{
tabBarIcon: ({ tintcolor }) => (
<Icon name="ios-search" size={24} />
)
}
},
Favorites:{screen: Favorites,
navigationOptions:{
tabBarIcon: ({ tintcolor }) => (
<Icon name="ios-heart" size={24} />
)
}
},
Settings:{screen: Settings,
navigationOptions:{
tabBarIcon: ({ tintcolor }) => (
<Icon name="ios-settings" size={24} />
)
}
}
}
});
export default class App extends Component {
render() {
return <Tabs />
}
}
You could make your components in single file, lets say helper.js and just return that component in a export function. Then import your desire function and render it any file.
Helper.js
const settingsTabs = creatematerialtopTabNavigator ({
Home:{
screen: Home,
navigationOptions:{
tabBarIcon: ({ focused, tintcolor }) => (
<Icon name="ios-home" size={24} />
)
}
},
Inbox:{screen: Inbox,
navigationOptions:{
tabBarIcon: ({ tintcolor }) => (
<Icon name="ios-mail" size={24} />
)
}
},
});
export function Tabs(){
return (
<settingsTabs />
)
}
App.js
import { Tabs } from './Helper'
render() {
return (
<View style={{flex:1}}>
<Tabs />
</View>
);
}