react-native-router-flux: Unable to see tabs icons for expo app
Version
- react-native-router-flux v4.0.6
- react v6.4.1
- expo v 2.17.3
Expected behaviour
I have a aws amplify react native app. I’m using expo. I’m expecting to be able to see our application’s tab icons on the bottom. I’m able to see the tabs, but I’m not able to see the icons. I’m using an android phone and simulator, and have seen the behavior on both.
Code
I made a router.js file like below.
`// 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 Icon from 'react-native-vector-icons/FontAwesome'
// 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 showIcon={true}>
<Scene key="tabHolder" showIcon={true} 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 showIcon={true} icon={TabIcon} >
</Scene>
<Scene key="alertsTab" component={alertsScreen} title={I18n.t('titles.alerts')} hideNavBar navBarButtonColor='white' icon={TabIcon} />
<Scene key="resourcesTab" component={resoucesScreen} title={I18n.t('titles.resources')} hideNavBar icon={TabIcon} />
<Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={TabIcon} />
</Scene>
</Scene>
</Router>
)
}
}
//
// export
export default connect(null, null)(RouterComponent);`
I refer to it like so:
`export default class App extends React.Component {
state = {
isLoadingComplete: false,
};
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<Provider store = {store}>
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<Router />
</View>
</Provider>
);
}
}`
When I run it, here is what I see:
I have confirmed this functionality on both Android and Apple phones.
About this issue
- Original URL
- State: open
- Created 5 years ago
- Comments: 28
I believe I’ve found the root cause and it doesn’t appear to have any relation to
react-native-router-flux
specifically.The Problem Defining
static navigationOptions = { ... }
on a screen component will override allreact-navigation
options passed viareact-native-router-flux
; causing you to lose the defined tab iconSolution 1 Don’t define
static navigationOptions
on screen components and instead letreact-native-navigation-flux
handle that for you via it’s own propsSolution 2 Define
static navigationOptions
as a function and parse the provided params into the appropriate config fields manually: