CODEWITHSUNDEEP
reactjsreact-native
sejn
sejn

Reputation: 2644

How to set images in the footer text under TabNavigation using react native

I need to set footer which has image and text on all pages. I have used react native TabNavigator. The issue is footer text was shown in Uppercase and also the background color doesn't change and unable to set image in the footer.

  {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: 'white',
    inactiveTintColor: 'black',
    activeBackgroundColor: 'darkgreen',
    inactiveBackgroundColor: 'green',
    tabBarIcon: ({ tintColor }) => {
    return (
    <Image
    source={('.../.../image/png')}
    style={{ tintColor }}
    /> 
}
});

How does the image will be set in the footer?

I am new to react native.

Thanks in advance.

Upvotes: 3

Views: 2087

Answers (2)

sejn
sejn

Reputation: 2644

Issue get resolved when interchanging the style guide as 

navigationOptions : {
    tabBarIcon : 
         <Image
           style={{width: 25, height:20,paddingTop:0}}
           source={{uri: './assets/images/search.png'}}
        />
        }

Upvotes: 0

Hamed Keshavarz M
Hamed Keshavarz M

Reputation: 475

TabNavigator has an option init that you can design Icon with Label footer... here is the code:

import React from 'react';
import { StackNavigator , TabNavigator , TabBarBottom } from 'react-navigation';
import { Image , Text } from 'react-native';
import styles from './assets/style';


import Home from './pages/Home';
import Article from './pages/Article';

HomeStack = StackNavigator({
    Home : { screen : Home },
    Article : { screen : Article }
})



import Camera from './pages/Camera';
import Follow from './pages/Follow';
import HomeUser from './pages/HomeUser';
import Profile from './pages/Profile';
import Seach from './pages/Search';


export default App = TabNavigator({
    Profile : {
        screen : Profile,
        navigationOptions : {
            tabBarIcon : <Image source={require('./assets/images/react-native.png')}  style={styles.tabNavigatorProfileIcon} />
        }
    },
    Follow : {
        screen : Follow,
        navigationOptions : {
            tabBarIcon : <Image source={require('./assets/images/follow.png')}  style={styles.tabNavigatorProfileIcon} />
        }
    },
    Camera : {
        screen : Camera,
        navigationOptions : {
            tabBarIcon : <Image source={require('./assets/images/camera.png')}  style={styles.tabNavigatorProfileIcon} />
        }
    },
    Serach: {
        screen : Seach,
        navigationOptions : {
            tabBarIcon : <Image source={require('./assets/images/search.png')}  style={styles.tabNavigatorProfileIcon} />
        }
    },
    HomeUser : {
        screen : HomeUser,
        navigationOptions : {
            tabBarIcon : <Image source={require('./assets/images/home.png')}  style={styles.tabNavigatorProfileIcon} />
        }
    }
},{
    tabBarOptions : {
        showLabel : false,
        activeTintColor : 'rgba(0,0,0,1)',
        inactiveTintColor : 'rgba(0,0,0,.3)'
    },
    tabBarComponent : TabBarBottom,
    tabBarPosition : 'bottom'
})

and if you want to set icon install icon-vectors import and use it instead of Image!

Upvotes: 1

Related Questions