React-native-vector-icons: not working with react native navigation wix

Created on 15 Nov 2017 · 6Comments · Source: oblador/react-native-vector-icons

Issue Description

I'm trying to use vector-icons in react-native-navigation tabbar but i get this error message:

RNVectorIconsModule not available, did you properly integrate the module? Try running react-native link react-native-vector-icons and recompiling.
icon library is working fine in other places,

here is my routes.js

import { Navigation } from 'react-native-navigation';
import Feed from "../screens/feed/index";
import ProfilePage from '../screens/profilePage'
import CreateWish from '../screens/createWish'
import SearchPeople from '../screens/SearchPeople'
const Icon = require('react-native-vector-icons/Ionicons');
var settingsIcon;
var settingsOutlineIcon;
var peopleIcon;
var iosNavigateOutline;
var iosNavigate;
function initIcons() {
return new Promise(function (resolve, reject) {
Promise.all(
[
Icon.getImageSource('ios-settings', 30),
Icon.getImageSource('ios-settings-outline', 30),
Icon.getImageSource('ios-people', 30),
Icon.getImageSource('ios-navigate-outline', 30),
Icon.getImageSource('ios-navigate', 30)
]
).then((values) => {
settingsIcon = values[0];
settingsOutlineIcon = values[1];
peopleIcon = values[2];
iosNavigateOutline = values[3];
iosNavigate = values[4];
resolve(true);
}).catch((error) => {
console.log(error);
reject(error);
}).done();
});
};

function registerScreens() {
Navigation.registerComponent('wishlist.FeedTabScreen', () => Feed);
Navigation.registerComponent('wishlist.CreateWishTabScreen', () => CreateWish);
Navigation.registerComponent('wishlist.ProfileTabScreen', () => ProfilePage);
Navigation.registerComponent('wishlist.SearchTabScreen', () => SearchPeople);
}

export function startTabs(){
registerScreens()

initIcons().then(() => {
// Start app only if all icons are loaded
startApp();
}).catch((error) => {
console.error(error);

});
}

function startApp(){
Navigation.startTabBasedApp({
tabs: [
{
screen: 'wishlist.FeedTabScreen', // unique ID registered with Navigation.registerScreen
icon: peopleIcon
},
{
screen: 'wishlist.CreateWishTabScreen',
icon: peopleIcon

},
{
  screen: 'wishlist.ProfileTabScreen',
  icon: peopleIcon 

},
{
  screen: 'wishlist.SearchTabScreen',
  icon: peopleIcon

}
],
tabStyle : {
  navBarHidden: true
}
})

}
Environment

React Native Navigation version: 1.1.261
React Native version: 0.47.1
Platform(s) (iOS, Android, or both?): Android
Device info (Simulator/Device? OS version? Debug/Release?): Simulator

Source

moeinrahimi

Most helpful comment

I changed mainActivitiy file like this

 protected List<ReactPackage> getPackages() {
      // Add additional packages you require here
      // No need to add RnnPackage and MainReactPackage
      return Arrays.<ReactPackage>asList(
            new VectorIconsPackage()
...
      );
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
      return getPackages();
  }
}

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            new VectorIconsPackage()
...
      );
    }

moeinrahimi on 15 Dec 2017

❤3

All 6 comments

@moeinrahimi have you found any solution to this?

perrosnk on 15 Dec 2017

I changed mainActivitiy file like this

 protected List<ReactPackage> getPackages() {
      // Add additional packages you require here
      // No need to add RnnPackage and MainReactPackage
      return Arrays.<ReactPackage>asList(
            new VectorIconsPackage()
...
      );
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
      return getPackages();
  }
}

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            new VectorIconsPackage()
...
      );
    }

moeinrahimi on 15 Dec 2017

❤3

@moeinrahimi Is this mainAcitivty or MainApplication?
Do you need to implement getPackages() method twice?

perrosnk on 15 Dec 2017

@perrosnk
it is in mainActivity.java and yes you need to call it twice,

moeinrahimi on 16 Dec 2017

I had the same problem. Following the the manual installation steps solved the issue

alexsmartens on 4 Nov 2018

@alexsmartens, manual installations steps did not help for me with react-native-navigation. That library require editing native code, possibly that is cause.

@moeinrahimi suggestion was help, although editing code in MainApplication.java, not mainAcitivty.java.

There method getPackages() defined in 2 places, in class MainApplication itself, and in property ReactNativeHost. In class it was return no packages - I have copied all packages definitions from second definition of getPackages(), and that was help.
Will be great if such note about using with react-native-navigation will be somwhere in docs