React-native-navigation: [v2] TopBar Icons

[jeprojects]

Issue Description

How do you use the default internal icons in RNN v2? (sideMenu, and iOS variants)? I tried setting the id in the leftButtons as suggested in RNN v1, but that didn't show anything.

Also what is the best way to include the react-native-vector-icons into the TopBar?

---

Environment

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

[ashleydw]

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

Basically:

`` import IconM from 'react-native-vector-icons/MaterialIcons'; ... componentWillMount() { Promise.all([ IconM.getImageSource('menu', 20, '#ffffff'), IconM.getImageSource('add', 20, '#ffffff'), ]).then((sources: any) => { Navigation.setOptions(this.props.componentId, { topBar: { leftButtons: [ { icon: sources[0], ... }, ], rightButtons: [ { icon: sources[1], .... }, ], }, }); }); }

[jeprojects]

@ashleydw Thanks for your help.

To my understanding getImageSource() will produce a png version of the icon and pass that in. Would it be more efficient to pass the svg in directly via a component? Or would adding it as a component just add more overall overhead?

https://github.com/wix/react-native-navigation/issues/43
See @brunolemos solution down the bottom.

This is kind of what I am doing now, but with passProps not working in v2 at the moment, I am just creating a components for each icon.

But then again, I am not sure which is the best way performance wise.

[guyca]

Hey, System icon ids are currently not supported in v2.

[ujwal-setlur]

@guyca, this works on iOS, but not on android. I can currently do this on iOS:

icon = MaterialCommunityIcons.getImageSource(name, size, color);
        leftButtons: [
          {
            id: "drawer",
            icon: icon
          }
        ]

Will this gap be addressed? This is currently forcing me to create specific png images for each platform.

[parinha]

// AppIcons.js

import { PixelRatio } from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";

const navIconSize = __DEV__ === false && Platform.OS === "android" ? PixelRatio.getPixelSizeForLayoutSize(40) : 40;
const replaceSuffixPattern = /--(active|big|small|very-big)/g;
const icons = {
  "add-circle": [30],
};

const iconsMap = {};
const iconsLoaded = new Promise((resolve, reject) => {
  Promise.all(
    Object.keys(icons).map(iconName =>
      // IconName--suffix--other-suffix is just the mapping name in iconsMap
      MaterialIcons.getImageSource(iconName.replace(replaceSuffixPattern, ""), icons[iconName][0], icons[iconName][1])
    )
  ).then(sources => {
    Object.keys(icons).forEach((iconName, idx) => (iconsMap[iconName] = sources[idx]));

    // Call resolve (and we are done)
    resolve(true);
  });
});

export { iconsMap, iconsLoaded };

// your component


static get options() {
    return {
      topBar: {
        rightButtons: [
          {
            id: "add",
            text: "Add",
            icon: iconsMap["add-circle"],
          },
        ],
      },
    };
  }

[nenjamin2405]

Hi @ujwal-setlur, did you have a solution for Android, I still cannot make this work on Android

[ujwal-setlur]

@nenjamin2405, I don't use this library anymore, so unfortunately, I can't give any input.

[nenjamin2405]

@ujwal-setlur Nevermind, I forgot to link the fonts so it works now, many thanks for your reply