Facing issue in running basic example - Already tried existing solutions

[mrsaeeddev]

What kind of Issue is this?

Question / Problem

Actual behavior

• What is happening? Navigation Bottom Component doesn't load
• Is it happening on Android, iOS or both? Yes
• Could you identify sections in your code which triggers this behavior? I guess some issue is with import of Icon

Expected behavior

It should run

Environment

software	version
react-native-material-bottom-navigation	1.0.4
react-native or expo	0.60.5

I am not using Expo.

[timomeh]

I can't help you without a code snippet of yours. Please provide a code snippet

[mrsaeeddev]

import BottomNavigation, { IconTab } from 'react-native-material-bottom-navigation';

import React, { Component } from 'react';

import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native';

import Icon from "react-native-vector-icons/FontAwesome";

class App extends Component { tabs = [ { key: 'games', icon: 'gamepad-variant', label: 'Games', barColor: '#388E3C', pressColor: 'rgba(255, 255, 255, 0.16)' }, { key: 'movies-tv', icon: 'movie', label: 'Movies & TV', barColor: '#B71C1C', pressColor: 'rgba(255, 255, 255, 0.16)' }, { key: 'music', icon: 'music-note', label: 'Music', barColor: '#E64A19', pressColor: 'rgba(255, 255, 255, 0.16)' } ]

renderIcon = icon => ({ isActive }) => (
  <Icon size={24} color="white" name={icon} />
)

renderTab = ({ tab, isActive }) => (
  <IconTab
    isActive={isActive}
    key={tab.key}
    label={tab.label}
    renderIcon={this.renderIcon(tab.icon)}
  />
)

render() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        {/* Your screen contents depending on current tab. */}
        <Text>Saeeed</Text>
      </View>
      {/* <BottomNavigation
        onTabPress={newTab => this.setState({ activeTab: newTab.key })}
        renderTab={this.renderTab}
        tabs={this.tabs}
      /> */}
    </View>
  )
}

}

export default App;

[mrsaeeddev]

This is what I am using in my App.js component. I guess it has something to do with importing Icon component

[timomeh]

The BottomNavigation is commented out in your code example

[mrsaeeddev]

I tried without commenting it but it is not working

[mrsaeeddev]

Are you importing Icons from react-native-vector-icons?

[timomeh]

I pasted your code example into an expo snack, which you can view here: https://snack.expo.io/@timomeh/a54510

Then I tested it on my phone, and it works as expected:

I changed the Icon to @expo/vector-icons, which is a wrapper around react-native-vector-icons for Expo. It doesn't matter which Icon component is being used, the BottomNavigation will render any component.

[mrsaeeddev]

Thanks for your reply. But now it says : TypeError : Cannot read property 'key' of undefined

Code :

import BottomNavigation from 'react-native-material-bottom-navigation'; import FullTab from 'react-native-material-bottom-navigation';

import React, { Component } from 'react';

import { View, Text, } from 'react-native';

import { Icon } from "react-native-vector-icons";

class BottomTabNavigator extends Component { tabs = [ { key: 'games', icon: 'gamepad-variant', label: 'Games', barColor: '#388E3C', pressColor: 'rgba(255, 255, 255, 0.16)' }, { key: 'movies-tv', icon: 'movie', label: 'Movies & TV', barColor: '#B71C1C', pressColor: 'rgba(255, 255, 255, 0.16)' }, { key: 'music', icon: 'music-note', label: 'Music', barColor: '#E64A19', pressColor: 'rgba(255, 255, 255, 0.16)' } ]

renderIcon = icon => ({ isActive }) => (

)

renderTab = ({ tab, isActive }) => ( <FullTab isActive={isActive} key={tab.key} label={tab.label} renderIcon={this.renderIcon(tab.icon)} /> )

render() { return ( <View style={{ flex: 1 }}> <View style={{ flex: 1 }}>

      <Text>Saeeed</Text>
    </View>
    <BottomNavigation
      onTabPress={newTab => this.setState({ activeTab: newTab.key })}
      renderTab={this.renderTab}
      tabs={this.tabs}
    />
  </View>
)

} }

export default BottomTabNavigator;

Screenshot :

[timomeh]

The example I sent you earlier works. Please compare it with your code to see where you've made a mistake.

Since this isn't a bug, I'm going to close this issue. If you have further problems, ask a question on stackoverlow, you will get faster and better answers there.