CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-navigation
Swix
Swix

Reputation: 2113

React Native Navigation TopBar Icons Are Not Showing

Just started learning React Native with Expo, trying to implement a top bar navigation.

// screens/Home.tsx

function Home() {
  return (
    <View style={styles.container}>
      <Text>Home Screen!</Text>
    </View>
  )
}

export default Home

// nav/MainTabNavigator.tsx

import {Ionicons} from '@expo/vector-icons'
import HomeScreen from '../screens/Home'

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  }
)

HomeStack.navigationOptions = {
  tabBarIcon: ({focused}) => {
    <Ionicons
      focused={focused}
      name='md-information-circle'
      size={26}
      style={{marginBottom: -3}}
      color='green'
    />
  }
}

HomeStack.path = ''

const tabNavigator = createMaterialTopTabNavigator({
  HomeStack,
}, {
  tabBarPosition: 'top',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    showLabel: true,
    activeTintColor: 'white',
    style: {
      backgroundColor: 'red'
    }
  }
})

export default tabNavigator

// AppNavigator.tsx

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import MainTabNavigator from './MainTabNavigator'

const AppNavigator = createSwitchNavigator({
  Main: MainTabNavigator
})

export default createAppContainer(AppNavigator)

The problem is icons are not showing.

Imgur Link

Please help.

================================================================

Stack: Expo, TypeScript, React-native-navigation, React-native-vector-icons, @expo/vector-icons

Upvotes: 0

Views: 1194

Answers (2)

Stephanos
Stephanos

Reputation: 571

Try returning implicitly without the curly brackets:

tabBarIcon: ({focused}) => (
<Ionicons
  focused={focused}
...
/>
)

Upvotes: 1

Junius L
Junius L

Reputation: 16132

You need to return a component from navigationOptions tabBarIcon.

HomeStack.navigationOptions = {
  tabBarIcon: ({focused}) => {
      return <TabBarIcon
        focused={focused}
        name='md-information-circle'
     />
  }
}

or

HomeStack.navigationOptions = {
  tabBarIcon: ({focused}) => (<TabBarIcon
    focused={focused}
    name='md-information-circle'
 />)
}

Upvotes: 1

Related Questions