Initial basic implementation

.gitignore

@@ -54,3 +54,5 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
+
+*.swp

babel.config.js

@@ -1,9 +1,10 @@
 module.exports = function (api) {
-  api.cache(false);
-
-  const presets = ["module:metro-react-native-babel-preset"];
+  api.cache(false)
 
   return {
-    presets
-  };
-}
+    presets: [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  }
+}

dist/components/FontAwesomeIcon.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FontAwesomeIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _converter = _interopRequireDefault(require("../converter"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactNative = require("react-native");
+
+var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
+
+var _logger = _interopRequireDefault(require("../logger"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _Dimensions$get = _reactNative.Dimensions.get('window'),
+    windowWidth = _Dimensions$get.width,
+    windowHeight = _Dimensions$get.height;
+
+function objectWithKey(key, value) {
+  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
+}
+
+function normalizeIconArgs(icon) {
+  if (icon === null) {
+    return null;
+  }
+
+  if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
+    return icon;
+  }
+
+  if (Array.isArray(icon) && icon.length === 2) {
+    return {
+      prefix: icon[0],
+      iconName: icon[1]
+    };
+  }
+
+  if (typeof icon === 'string') {
+    return {
+      prefix: 'fas',
+      iconName: icon
+    };
+  }
+}
+
+function FontAwesomeIcon(props) {
+  var iconArgs = props.icon,
+      maskArgs = props.mask,
+      _props$height = props.height,
+      height = _props$height === void 0 ? windowHeight * 0.1 : _props$height,
+      _props$width = props.width,
+      width = _props$width === void 0 ? windowWidth * 0.1 : _props$width;
+  var iconLookup = normalizeIconArgs(iconArgs);
+  var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
+  var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
+  var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup, _objectSpread({}, transform, mask));
+
+  if (!renderedIcon) {
+    (0, _logger.default)("ERROR: icon not found for icon = ", iconArgs);
+    return null;
+  }
+
+  var abstract = renderedIcon.abstract;
+  var extraProps = {
+    height: height,
+    width: width
+  };
+  Object.keys(props).forEach(function (key) {
+    if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
+      extraProps[key] = props[key];
+    }
+  });
+  return convertCurry(abstract[0], extraProps);
+}
+
+FontAwesomeIcon.displayName = 'FontAwesomeIcon';
+FontAwesomeIcon.propTypes = {
+  mask: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.string]),
+  icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.string]),
+  listItem: _propTypes.default.bool,
+  pull: _propTypes.default.oneOf(['right', 'left']),
+  pulse: _propTypes.default.bool,
+  rotation: _propTypes.default.oneOf([90, 180, 270]),
+  spin: _propTypes.default.bool,
+  transform: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
+};
+FontAwesomeIcon.defaultProps = {
+  mask: null,
+  inverse: false,
+  icon: null,
+  listItem: false,
+  pull: null,
+  pulse: false,
+  rotation: null,
+  spin: false,
+  transform: null
+};
+
+var convertCurry = _converter.default.bind(null, _react.default.createElement);

dist/converter.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _humps = _interopRequireDefault(require("humps"));
+
+var _reactNativeSvg = require("react-native-svg");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+var svgObjectMap = {
+  "svg": _reactNativeSvg.Svg,
+  "path": _reactNativeSvg.Path
+};
+
+function convert(createElement, element) {
+  var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  if (typeof element === 'string') {
+    return element;
+  }
+
+  var children = (element.children || []).map(convert.bind(null, createElement));
+  var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {
+    var val = element.attributes[key];
+
+    switch (key) {
+      case 'class':
+      case 'fill':
+      case 'role':
+      case 'style':
+      case 'xmlns':
+        delete element.attributes[key];
+        break;
+
+      default:
+        if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {
+          delete element.attributes[key];
+        } else {
+          acc.attrs[_humps.default.camelize(key)] = val;
+        }
+
+    }
+
+    return acc;
+  }, {
+    attrs: {}
+  });
+  return createElement.apply(void 0, [svgObjectMap[element.tag], _objectSpread({}, mixins.attrs, extraProps)].concat(_toConsumableArray(children)));
+}
+
+var _default = convert;
+exports.default = _default;

dist/logger.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var PRODUCTION = false;
+
+function _default() {
+  if (!PRODUCTION && console && typeof console.error === 'function') {
+    var _console;
+
+    (_console = console).error.apply(_console, arguments);
+  }
+}

examples/Hello/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

examples/Hello/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

examples/Hello/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/Hello/App.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Dimensions, StyleSheet, Text, ScrollView } from 'react-native'
+import { Svg, Path, ClipPath, Defs, Mask, G, Rect } from 'react-native-svg'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import { faCoffee, faBeer } from '@fortawesome/free-solid-svg-icons'
+
+const { width, height } = Dimensions.get('window')
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <ScrollView style={styles.contentContainer}>
+        <Text>Show me some icons:</Text>
+        <FontAwesomeIcon icon={ faCoffee } />
+        <FontAwesomeIcon icon={ faBeer } />
+      </ScrollView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingVertical: 50,
+    marginLeft: 20
+  },
+})

examples/Hello/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "Hello",
+    "description": "This project is really great.",
+    "slug": "Hello",
+    "privacy": "public",
+    "sdkVersion": "30.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

examples/Hello/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "empty-project-template",
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.4",
+    "@fortawesome/free-solid-svg-icons": "^5.3.1",
+    "@fortawesome/react-native-fontawesome": "git+ssh://git@github.com/FortAwesome/react-native-fontawesome#dev",
+    "expo": "^30.0.1",
+    "react": "16.3.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
+    "react-native-fontawesome": "git+ssh://git@github.com/FortAwesome/react-native-fontawesome#dev",
+    "react-native-svg": "^7.0.3"
+  }
+}