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

from react-native-material-bottom-navigation.

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;

from react-native-material-bottom-navigation.

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

from react-native-material-bottom-navigation.

The BottomNavigation is commented out in your code example

from react-native-material-bottom-navigation.

I tried without commenting it but it is not working

from react-native-material-bottom-navigation.

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

from react-native-material-bottom-navigation.

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.

from react-native-material-bottom-navigation.

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 }) => (

)

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 :

from react-native-material-bottom-navigation.

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.

from react-native-material-bottom-navigation.