fontawesome icon support

[JO-WTF]

Hi,

Thanks for the great job.

Any plan for support fontawesome icons in tabbar and navbar please?
https://github.com/oblador/react-native-vector-icons
I tried but this didn't work.

Thanks.

[willks]

@JO-WTF there was already a discussion on the react-native-navigation forums on this. It's been solved just on the JS side, for reference:

https://github.com/wix/react-native-navigation/issues/43

Thanks to contributors, I'm using the following code:

appIcons.js file

const Ionicons = require('react-native-vector-icons/Ionicons');
const Evilicons = require('react-native-vector-icons/EvilIcons');


const icons = {
  "ios-add": [Ionicons, 30, '#FFFFFF'],
  "user":  [Evilicons, 30, '#FFFFFF'],
  "gear":  [Evilicons, 30, '#FFFFFF'],
  "ios-navigate-outline":  [Ionicons, 30, '#FFFFFF'],
  "heart":  [Evilicons, 30, '#FFFFFF'],

};

let iconsMap = {};
let iconsLoaded = new Promise((resolve, reject) => {
  new Promise.all(
    Object.keys(icons).map(iconName =>
      icons[iconName][0].getImageSource(
        iconName,
        icons[iconName][1],
        icons[iconName][2]
      ))
  ).then(sources => {
    Object.keys(icons)
      .forEach((iconName, idx) => iconsMap[iconName] = sources[idx]);
    resolve(true);
  })
});

export {
  iconsMap,
  iconsLoaded
};

Then use it in your tab/navs as follows:

app.js file

     import {iconsMap, iconsLoaded} from './helpers/appIcons';
     ........

     case 'home':
        Navigation.startTabBasedApp({
          tabs: [
            {
              screen: 'myScreen',
              icon: iconsMap['ios-navigate-outline'],
              selectedIcon: iconsMap['ios-navigate-outline'],
              title: 'My screen'
            },

          ],
          tabsStyle: { 
            tabBarButtonColor: '#000000',
            tabBarSelectedButtonColor: '#D8765A', 
            tabBarBackgroundColor: '#FFFFFF',
            drawUnderTabBar: true
          },
          passProps: {},
          animationType: 'fade'
        });

And you should now see something like this:

I realise that this is purely a react-native-navigation solution, but it'll probably give you some ideas on how to get it going with pure controllers.

Cheers

[folivi]

hi all.
yet another example.
@willks correct me if anything wrong :)
cheers, and can't wait to see the package work with react-native-30+ :)

app.js

import { Navigation } from 'react-native-navigation';
import { registerScreens } from '../screens';
import { iconsMap, iconsLoaded } from '../helpers/icons-loader';

registerScreens(); // this is where you register all of your app's screens
let personIcon;
export default class App {

  constructor(){
    iconsLoaded.then(() => {
      personIcon = iconsMap['ios-person']
      this.startApp();
    });

  }

// start the app
 startApp() {
   Navigation.startTabBasedApp({
     tabs: [
       {
         label: 'One',
         screen: 'screenNameSpace.DealsScreen', // this is a registered name for a screen
         icon: personIcon,
         title: 'Screen One'
       },
       {
         label: 'Two',
         screen: 'screenNameSpace.EventScreen',
         title: 'Screen Two'
       }
     ],
     drawer: {
         type: 'MMDrawer',
         animationType: 'slide',
         left: {
             screen: 'screenNameSpace.SideMenu'
         }
     }
   });
 }
 };

[perrosnk]

@willks how did you manage to remove the label and align the icons to the center height-wise?

Thank you so much for your solutions!

[willks]

Actually it was a hack in ObjC of the original code. I found a better pull request for this, after I submitted one (though no more pull requests accepted).

This is the one I recommend:

#62

This is mine: (I'm not an ObjC guy!)

#75

Hope this gets merged one day :) I maintain my own version in a fork and merge latest changes as I get around to it.

Cheers

[perrosnk]

Can this be merged into the react-native-navigation for this issue https://github.com/wix/react-native-navigation/issues/269 in order to use only icons and align them height-wise?