Buttons and TabBarItems should be working on iOS too now

FONTAWESOME5.md

@@ -77,9 +77,7 @@ No specified type indicates Regular font.
 
 So just using icons works pretty much like normal. However, access to the
 Button, TabBarItem etc. must be accessed in a certain way due to the split
-icon files and it **only works on Android for now** (iOS defaults to
-Regular font).
-The icon set must be specified:
+icon files. The icon set must be specified:
 
 ```javascript
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
@@ -95,7 +93,25 @@ account and then access the ```Services``` tab.
 
 Run ```npm run fa5upgrade``` in the ```node_modules/react-native-vector-icons```
 folder and enter the token when asked to in order to
-upgrade to the Pro version. Note that you need to rebuild the app after this.
+upgrade to the Pro version. Note that you need to link and rebuild the app
+after this.
+
+## Manually
+
+If the shell script does not work you can install the Pro version manually
+by replacing the font files in ```Fonts/```. First you need to download the
+Pro pack from the FontAwesome website (use the web version). Then rename
+the font files in the ```webfonts/``` folder like this:
+
+* fa-brands-400.ttf > FontAwesome5_Brands.ttf
+* fa-light-300.ttf > FontAwesome5_Light.ttf
+* fa-regular-400.ttf > FontAwesome5_Regular.ttf
+* fa-solid-900.ttf > FontAwesome5_Solid.ttf
+
+Place these in the ```Fonts/``` folder and replace the Free font files in the
+process.
+
+Link and rebuild the project.
 
 ## Using the Pro version
 

FontAwesome5.js

@@ -35,27 +35,30 @@ export function FA5iconSet(pro_version = false) {
   const BrandsSet = createIconSet(
     glyphs,
     'Font Awesome 5 Brands',
-    'FontAwesome5_Brands.otf'
+    'FontAwesome5_Brands.ttf'
   );
 
   const RegularSet = createIconSet(
     glyphs,
     familyName,
-    'FontAwesome5_Regular.otf'
+    'FontAwesome5_Regular.ttf',
+    {fontWeight: Platform.OS === 'ios' ? '400' : undefined}
   );
 
   const LightSet = pro_version
     ? createIconSet(
       glyphs,
       familyName,
-      'FontAwesome5_Light.otf'
+      'FontAwesome5_Light.ttf',
+      {fontWeight: Platform.OS === 'ios' ? '100' : undefined}
     )
     : RegularSet;
 
   const SolidSet = createIconSet(
     glyphs,
     familyName,
-    'FontAwesome5_Solid.otf'
+    'FontAwesome5_Solid.ttf',
+    {fontWeight: Platform.OS === 'ios' ? '700' : undefined}
   );
 
   class FA5icon extends PureComponent {
@@ -87,7 +90,6 @@ export function FA5iconSet(pro_version = false) {
     static Solid = SolidSet;
 
     render() {
-      var weight;
       var IconSet;
 
       var type = this.props.type;
@@ -105,27 +107,21 @@ export function FA5iconSet(pro_version = false) {
 
       switch (type) {
         case FA5Types.brand:
-          weight = '500';
           IconSet = BrandsSet;
           break;
         case FA5Types.light:
-          weight = '200';
           IconSet = LightSet;
           break;
         case FA5Types.solid:
-          weight = '700';
           IconSet = SolidSet;
           break;
         default:
-          weight = '400';
           IconSet = RegularSet;
           break;
       }
 
       return (
-        <IconSet {...this.props} extraStyle={{
-          fontWeight: Platform.OS === 'ios' ? weight : 'normal'
-        }} />
+        <IconSet {...this.props} />
       );
     }
   }

lib/create-icon-set.js

@@ -18,7 +18,12 @@ const NativeIconAPI =
 export const DEFAULT_ICON_SIZE = 12;
 export const DEFAULT_ICON_COLOR = 'black';
 
-export default function createIconSet(glyphMap, fontFamily, fontFile) {
+export default function createIconSet(
+  glyphMap,
+  fontFamily,
+  fontFile,
+  fontStyle
+) {
   let fontReference = fontFamily;
   // Android doesn't care about actual fontFamily name, it will only look in fonts folder.
   if (Platform.OS === 'android' && fontFile) {
@@ -59,7 +64,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
     };
 
     render() {
-      const { name, size, color, style, extraStyle, ...props } = this.props;
+      const { name, size, color, style, ...props } = this.props;
 
       let glyph = name ? glyphMap[name] || '?' : '';
       if (typeof glyph === 'number') {
@@ -77,7 +82,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
         fontStyle: 'normal',
       };
 
-      props.style = [styleDefaults, style, styleOverrides, extraStyle];
+      props.style = [styleDefaults, style, styleOverrides, fontStyle || {}];
       props.ref = this.handleRef;
 
       return (

scripts/fa5upgrade.sh

@@ -13,18 +13,11 @@ echo "Installing FontAwesome5 Pro"
 
 npm install @fortawesome/fontawesome-pro --no-shrinkwrap
 
-echo "Unlinking project"
-
-react-native unlink react-native-vector-icons
-
 echo "Copying font files"
 
-cp ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf Fonts/FontAwesome5_Brands.ttf
-cp ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf Fonts/FontAwesome5_Regular.ttf
-cp ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf Fonts/FontAwesome5_Solid.ttf
-
-echo "Linking project"
-
-react-native link react-native-vector-icons
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.ttf Fonts/FontAwesome5_Brands.ttf
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.ttf Fonts/FontAwesome5_Light.ttf
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-regular-400.ttf Fonts/FontAwesome5_Regular.ttf
+cp ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf Fonts/FontAwesome5_Solid.ttf
 
 echo "Done"