Icon not showing in TabNavigator. My code:
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator,TabNavigator } from 'react-navigation';
import TestComp1 from './src/components/TestComp1'
import TestComp2 from './src/components/TestComp2'
import TestComp3 from './src/components/TestComp3'
import TestComp4 from './src/components/TestComp4'
import TestComp5 from './src/components/TestComp5'
export default class myApp extends Component {
render() {
return (
<MyApp />
);
}
}
const Tabs = TabNavigator({
TestComp3: {screen:TestComp3},
TestComp4: {
screen:TestComp4,
navigationOptions: ({ navigation }) => ({
title: "TestComp4",
tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="accessibility" size={20}/></View>
})
}
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#e91e63',
inactiveBackgroundColor: 'green', //This doesn't work
},
});
const MyApp = StackNavigator({
TestComp: {screen:TestComp1},
TestComp2: {screen:TestComp2},
Tabs: {
screen: Tabs
}
}, {
initialRouteName: "Tabs"
});
AppRegistry.registerComponent('MyApp', () => MyApp);
The label is showing for TestComp4 but the icon is not visible. How can I get the icon to show and change color on click?
The label is showing for TestComp4 but the icon is not visible. How can I get the icon to show and change color on click?
Found the problem, just set showIcon: true like so:
tabBarOptions: {
showIcon: true
}
Related
/**
* Author: Rahul Shetty
* Date: 10/10/2019
*
* Configure app routes
* #flow
*/
import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Recipes, Restaurants } from 'containers/root';
import FeedIcon from 'assets/icons/feed/icons-feed.png';
import RestaurantIcon from 'assets/icons/restaurant/icons-restaurant.png';
import routes from './routes';
type Screens = {
[string]: React$Node,
};
const styles = StyleSheet.create({
iconStyle: { width: 28, height: 28 },
});
const { RECIPES, RESTAURANTS } = routes;
const IMAGE_PATH = {
[RECIPES]: FeedIcon,
[RESTAURANTS]: RestaurantIcon,
};
// Common navigation options for stack navigator
const commonNavOptions = {
defaultNavigationOptions: {
gesturesEnabled: false,
drawerLockMode: 'locked-closed',
},
headerMode: 'none',
};
const TabBarComponent = ({ navigation, tintColor }) => {
const { routeName } = navigation.state;
// You can return any component that you like here!
return <Image style={styles.iconStyle} source={IMAGE_PATH[routeName]} />;
};
// A function that returns a stack of navigation screens on providing the Object of screen and it's path name
const StackNav = (screens: Screens) =>
createStackNavigator(screens, commonNavOptions);
// Screens for Recipes
const RecipeStack = StackNav({ [RECIPES]: Recipes });
// Screens for Restaurants
const RestaurantStack = StackNav({ [RESTAURANTS]: Restaurants });
// Tab container
const Root = createAppContainer(
createBottomTabNavigator(
{
RECIPE: RecipeStack,
RESTAURANT: RestaurantStack,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarComponent: ({ tintColor }) => (
<TabBarComponent tintColor={tintColor} navigation={navigation} />
),
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
showIcon: true,
},
},
),
);
export default Root;
I am not sure what am I doing wrong. I tried digging through the official documentation. I couldn't find anything worth resolving this issue.
Define navigationOptions with the tabBarIcon inside.
You can return the image via the tabBarIcon.
The tabBarIcon receives a function with the several arguments and returns a component. In your case, an Image.
Try this in your tab container.
tabBarIcon: ({ tintColor }) => {
return (<Image style={styles.iconStyle} source={IMAGE_PATH[routeName]} />);}
}
I have a StackNavigator that contains a Tabbed Navigator(with two tabs) and a single route CreateReviewsScreen, that is not within the Tabbed Navigator. When I try to navigate back from CreateReviewsScreen to the tabbed navigator I'm unable to do so. I believe this is because the single route CreateReviewsScreen is being ignored on construction.
In my app container's navigationRef there is only the tabbed navigator, "Tabs". "CreateReviewScreen" is missing. The length in the photo below should be 2 not 1.
Relevant sections of code:
TabNav.js
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { ReviewsScreen, VenuesScreen, CreateReviewsScreen } from '../scenes';
import { APP_COLORS } from '../styles/Global';
const mainTabs = createBottomTabNavigator(
{
Reviews: ReviewsScreen,
Venues: VenuesScreen
},
{
initialRouteName: 'Reviews',
backBehavior: 'Reviews',
tabBarOptions: {
activeTintColor: APP_COLORS.FORE,
labelStyle: {
fontSize: 18,
textAlign: 'center'
},
style: {
backgroundColor: APP_COLORS.PRI_LGHT,
},
}
}
);
export default createStackNavigator({
Tabs: mainTabs,
CreateReviews: CreateReviewsScreen
});
Navigation.js
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { createAppContainer } from '#react-navigation/native';
import { LoggedOutScreen, LoginScreen, RegisterScreen, UserProfileScreen } from './scenes/index';
import TabNav from './Drawer/TabNav';
const AuthStack = createStackNavigator({
LoggedOut: {
screen: LoggedOutScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
title: 'Login'
}
},
Register: {
screen: RegisterScreen,
navigationOptions: {
title: 'Sign up!'
}
},
UserProfile: {
screen: UserProfileScreen,
navigationOptions: {
title: 'Your Profile'
}
}
});
export default createAppContainer(createSwitchNavigator(
{
Main: TabNav,
Auth: AuthStack
},
{
initialRouteName: 'Auth',
}
));
Try this.props.navigation.goBack(null)
It turns out I wasn't observing the correct error. The back behavior to the previous stack item was happening but there was a 10 second delay caused by remote debugging in Expo. I just didn't wait long enough before restarting the app to see that this was the issue. Disabling remote debugging made the back button work instantaneously.
My App.js looks like this which has StackNavigator
export default class App extends Component {
render() {
return (
<AppStackNavigator />
);
}
}
const AppStackNavigator = new StackNavigator({
LoginScreen: { screen: LoginScreen },
DashboardScreen: { screen: DashboardScreen },
ImportantNumberScreen: { screen: ImportantNumberScreen },
EventListScreen: { screen: EventListScreen },
});
I have to create bottom navigation so i am using react-navigation component createBottomTabNavigator where i want to set header as null
so i tried following code
static navigationOptions = {
header: null,//works with createStackNavigator but not with createBottomTabNavigator
}
Also tried
export default createBottomTabNavigator({
HomeScreen: {screen : HomeScreen,navigationOptions:{header:null}},
GuestCardScreen: GuestCardScreen,
MoreScreen: MoreScreen,
StatementScreen: StatementScreen,
});
but unfortunately these code not working with createBottomTabNavigator
I am using
"react-navigation": "^2.17.0"
Node version v10.11.0
npm version v6.4.1
TabBar
const MainAppTab = createBottomTabNavigator({
[HOME_STACK]: {
screen: Home,
},
[NOTIFACATION]: NotificationContainer,
[STINGER]: StingerContainer,
[MESSAGE]: MessageContainer,
[USER_PROFILE]: ProfileContainer
},
},
{
// settings
});
Main Navigator
const AppNavigator = createStackNavigator({
[WELCOME]: {
screen: WelcomeContainer,
},
// other screens
[MAIN]: {
screen: MainAppTab,
navigationOptions: {
header: null, <----- this will help you
},
},
}, {
initialRouteName: WELCOME,
},
});
you should set tab bar options like below:
const TabNav = createBottomTabNavigator({
HomeScreen: {screen : HomeScreen},
GuestCardScreen: GuestCardScreen,
MoreScreen: MoreScreen,
StatementScreen: StatementScreen,
});
// just for hide tabbar header
const StackNavForTabs = createStackNavigator({
tab: TabNav,
}, {
header: null,
headerMode: 'none'
});
//your main stack navigator
export default AppStack = createStackNavigator({
otherStackRoutes: OtherRoute,
tabStack: StackNavForTabs,
});
So I pulled one of my react native projects from a few months ago and While using it I discovered that TabNavigator was deprecated. So instread I am now using createBottomTabNavigator like they suggested. It seems to work out of the box, but for some reason my labels are not showing, only the icons in the tabs.
I was looking at the docs and it was saying it is actually default true for showing the label. For some reason the label just won't show up. Also tried to set the showLabel to true but that didn't do anything else. Someone with the same problem that got a fix?
My code
import React from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';
// Icons for tabs
import I from 'react-native-vector-icons/MaterialCommunityIcons';
// Navigation dep
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
// Custom components/screens
import HomeScreen from './screens/HomeScreen'
import FavoritesScreen from './screens/FavoritesScreen'
import AccountScreen from './screens/AccountScreen'
// Custom styles
import HeaderBar from './styles/HeaderBar'
// Tabs navigation
const HomeStack = createStackNavigator({
Home: HomeScreen
});
const FavoritesStack = createStackNavigator({
Favorites: FavoritesScreen
});
const AccountStack = createStackNavigator({
Account: AccountScreen
});
export default createBottomTabNavigator(
{
Home: HomeStack,
Favorites: FavoritesStack,
Account: AccountStack,
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `tag${focused ? '' : '-outline'}`;
} else if (routeName === 'Favorites') {
iconName = `heart${focused ? '' : '-outline'}`;
} else {
iconName = `account-box${focused ? '' : '-outline'}`;
}
return <I name={iconName} size={25} color={tintColor} />;
},
tabBarLabel: () => {
const { routeName } = navigation.state;
return routeName.toUpperCase();
}
}),
tabBarOptions: {
activeTintColor: '#E95736',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 9,
fontFamily: 'Rubik-Medium'
},
style: {
backgroundColor: '#FAF8F8',
borderTopWidth: 0.5
},
},
}
);
I think the issue is related to tabBarLabel and I believe the problem will fix itself if you remove that bit. You can easily achieve the same effect by just making the label text upper case where you declare the route.
I am using react-navigation and need by clicking the button sign in from welcomescreen move to signin page while its not working.
https://i.stack.imgur.com/w9vfX.png
Here is my code
1. app.js
StyleSheet, Text, View } from 'react-native';
import { TabNavigator, DrawerNavigator, StackNavigator } from 'react-navigation';
import WelcomeScreen from './screens/WelcomeScreen';
import SigninScreen from './screens/SigninScreen';
import SignupScreen from './screens/SignupScreen';
import HomeScreen from './screens/HomeScreen';
import BusinessScreen from './screens/BusinessScreen';
import TechScreen from './screens/TechScreen';
import EducationScreen from './screens/EducationScreen';
import LifestyleScreen from './screens/LifestyleScreen';
import ProfileScreen from './screens/ProfileScreen';
import FavoritesScreen from './screens/FavoritesScreen';
import SettingsScreen from './screens/SettingsScreen';
export default class App extends React.Component {
render() {
const MainNavigator = StackNavigator({
welcome: { screen: WelcomeScreen },
signin: { screen: SigninScreen },
signup: { screen: SignupScreen },
main: {
screen: DrawerNavigator({
home: { screen: HomeScreen },
business: { screen: BusinessScreen },
tech: { screen: TechScreen },
education: { screen: EducationScreen},
lifestyle: { screen: LifestyleScreen },
profile: {
screen: StackNavigator({
profile: { screen: ProfileScreen },
settings: { screen: SettingsScreen }
})
}
},
)
}
},)
return (
<MainNavigator />
);
}
}
2. WelcomeScreen
import React, { Component } from 'react';
import { View, Text} from 'react-native';
import Slides from '../components/Slides';
import PropTypes from 'prop-types';
const SLIDE_DATA = [
{ text: 'Welcome to JobApp', color: '#03A9F4' },
{ text: 'Use this to get a job', color: '#009688' },
{ text: 'Set your location, then swipe away', color: '#03A9F4' }
];
class WelcomeScreen extends Component {
render (){
onSlidesComplete = () => {
this.props.navigation.navigate('signin');
}
return (
<Slides data={SLIDE_DATA} onComplete={this.onSlidesComplete} />
);
}
}
export default WelcomeScreen;
3. Slide.js
import React, { Component } from 'react';
import { View, Text, ScrollView, Button, Dimensions } from 'react-native';
import PropTypes from 'prop-types';
const SCREEN_WIDTH = Dimensions.get('window').width;
class Slides extends Component {
renderLastSlide(index) {
if (index === this.props.data.length - 1) {
return (
<Button raised onPress={this.props.onComplete}
buttonStyle={styles.buttonStyle}
title="Sign In"
>
Sign In
</Button>
);
}
}
renderSlides() {
return this.props.data.map((slide, index) => {
return (
<View
key={slide.text}
style={[styles.slideStyle, { backgroundColor: slide.color }]}
>
<Text style={styles.textStyle}>{slide.text}</Text>
{this.renderLastSlide(index)}
</View>
);
});
}
render() {
return (
<ScrollView
horizontal
style={{ flex: 1 }}
pagingEnabled
>
{this.renderSlides()}
</ScrollView>
);
}
}
const styles = {
slideStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: SCREEN_WIDTH
},
textStyle: {
fontSize: 30,
color: 'white'
},
buttonStyle: {
backgroundColor: '#0288D1',
marginTop: 15
}
};
export default Slides;
In WelcomeScreen if you are using arrow function like
onSlidesComplete = () => {
this.props.navigation.navigate('signin');
}
then you have to use the onPress like this.onSlidesComplete.bind(this) or if you are using the function like
onSlidesComplete() {
this.props.navigation.navigate('signin');
}
then you have to use the onPress like this.onSlidesComplete. In short replace the below code with your existing WelcomeScreen
import React, { Component } from 'react';
import { View, Text} from 'react-native';
import Slides from '../components/Slides';
import PropTypes from 'prop-types';
const SLIDE_DATA = [
{ text: 'Welcome to JobApp', color: '#03A9F4' },
{ text: 'Use this to get a job', color: '#009688' },
{ text: 'Set your location, then swipe away', color: '#03A9F4' }
];
class WelcomeScreen extends Component {
render (){
onSlidesComplete = () => {
this.props.navigation.navigate('signin');
}
return (
<Slides data={SLIDE_DATA} onComplete={this.onSlidesComplete.bind(this)} />
);
}
}
export default WelcomeScreen;