CODEWITHSUNDEEP
react-nativeexporeact-native-router-flux
Kat
Kat

Reputation: 2498

How to get icons showing in React Native Router Flux tab?

I'm building a react native (version 6.4.1) app using expo. I'm using react-native-router-flux as a navigator. For some reason I'm unable to get the tab icon to show.

Here is my code: 

// Libraries and References
import React, { Component } from 'react';
import { Router, Scene, ActionConst } from 'react-native-router-flux';
import I18n from './utils/i18n/i18n';
import { connect } from 'react-redux';
const Constants = require('./utils/constants/Constants');
import { Ionicons } from '@expo/vector-icons';
import { Icon } from 'react-native-elements';


// Components
import homeScreen from './components/screens/HomeScreen';
import alertsScreen from './components/screens/AlertAnnouncementScreen';
import resoucesScreen from './components/screens/ResourceScreen';
import settingsScreen from './components/screens/AccountSettingsScreen';


class TabIcon extends Component {
    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center', justifyContent: 'center', width:30, height:30 }}>
                <Icon style={{ color: 'red' }} name='md-checkmark-circle' />
            </View>
        );
    }
};


// Navigation 
class RouterComponent extends Component {

    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Scene key="tabHolder" tabs swipeEnabled activeBackgroundColor={Constants.BGC_GREEN} inactiveBackgroundColor={Constants.BGC_BLUE} inactiveTintColor={Constants.TAB_GREY} activeTintColor='white' type={ActionConst.RESET} >
                        <Scene key="homeTab" initial component={homeScreen} title={I18n.t('titles.home')} hideNavBar icon={TabIcon}>

                        </Scene>
                        <Scene key="alertsTab" component={alertsScreen} title={I18n.t('titles.alerts')} hideNavBar navBarButtonColor='white' icon={({ focused }) => (<Icon name='bell' type='font-awesome' size={30} color={focused ? 'white' : Constants.TAB_GREY} />)} />
                        <Scene key="resourcesTab" component={resoucesScreen} title={I18n.t('titles.resources')} hideNavBar icon={({ focused }) => (<Ionicons name='info' type='font-awesome' size={30} color={focused ? 'white' : Constants.TAB_GREY} />)} />
                        <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={({ focused }) => (<Icon name='gear' type='font-awesome' color={focused ? 'white' : Constants.TAB_GREY} />)} />

                    </Scene>
                </Scene>
            </Router>
        )
    }
}


//


// export
export default connect(null, null)(RouterComponent);

However, I still have no tabs. I've tried all the CSS aspects possible on this (hence why they're so full), to no avail. Any clues?

enter image description here

UPDATE

I know that it's a tab issue because this works in the home screen but not on the tabs:

Here is the home screen:

    <View>
    <Text style={styles.welcomeText}>This is a signed in user</Text>
    <Icon name="check-circle" size ={30} />
    </View>

Here is the tab logic I just updated:

class TabIcon extends Component {
    render() {
        return (
            <Icon name="check-circle" size ={30} />
        );
    }
};

Here is the screen shot :

enter image description here

Upvotes: 4

Views: 870

Answers (2)

Kat
Kat

Reputation: 2498

I reached out to the GitHub for this, and was finally able to get an answer. Here is the link.

The issue was the navigationOptions. It will over ride all navigation styling options. I deleted it from my individual screen components, and that fixed the issue!

Upvotes: 3

Tim Gallo
Tim Gallo

Reputation: 11

I think all of your name props are incorrect for the two Icon components. I was able to get: <Icon name="check-circle" /> to display and <Ionicons name="md-checkmark-circle" /> to display, but not <Icon name="md-checkmark-circle" /> or <Ionicons name="bell" />.

Here's the searchable list of acceptable icons for Ionicons: https://infinitered.github.io/ionicons-version-3-search/

If you want to use FontAwesome icons, you need to: import { FontAwesome } from @expo/vector-icons'; and then use a FontAwesome component with the name prop: <FontAwesome name="bell" />

Also, for the react native elements icon, here is the list of available sets: https://react-native-training.github.io/react-native-elements/docs/icon.html#available-icon-sets

If you look at the font-awesome set, you'll see that 'gear' is not an option, but 'cog' is: https://fontawesome.com/icons?d=gallery&q=gear

Upvotes: 0

Related Questions