Release 0.2.1

Author: robmadole

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+## [0.2.1](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.1) - 2020-02-06
+
+### Fixed
+
+- Convert 'focusable' attribute to boolean from string #42
+
 ## [0.2.0](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.0) - 2019-12-13
 
 ### Added

dist/converter.js

@@ -56,8 +56,8 @@ function convert(createElement, element) {
         delete element.attributes[key];
         break;
 
-      case "focusable":
-        acc.attrs[key] = Boolean(val);
+      case 'focusable':
+        acc.attrs[key] = val === 'true' ? true : false;
         break;
 
       default:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fortawesome/react-native-fontawesome",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Official React Native component for Font Awesome 5",
   "main": "index.js",
   "scripts": {
@@ -18,7 +18,8 @@
     "Travis Chase <[email protected]>",
     "Rob Madole <[email protected]>",
     "Mike Wilkerson <[email protected]>",
-    "Dizy <[email protected]>"
+    "Dizy <[email protected]>",
+    "David Martin <github.com/iamdavidmartin>"
   ],
   "license": "MIT",
   "peerDependencies": {

src/components/__tests__/FontAwesomeIcon.test.js

@@ -5,6 +5,8 @@ import renderer from 'react-test-renderer'
 import { StyleSheet } from 'react-native'
 import { find } from 'lodash'
 
+jest.spyOn(React, 'createElement')
+
 const faCoffee = {
   prefix: 'fas',
   iconName: 'coffee',
@@ -189,16 +191,16 @@ describe('when extra props are given', () => {
 })
 
 describe("convert focusable attribute", () => {
-  test("from false string to boolean", () => {
-    const tree = renderer
-      .create(<FontAwesomeIcon icon={faCoffee} focusable='false' color="purple" foo="bar" />)
-      .toJSON();
-    expect(tree.props.focusable).toEqual(false);
-  });
-  test("from true string to boolean", () => {
+  test("no title leads to focusable false", () => {
     const tree = renderer
-      .create(<FontAwesomeIcon icon={faCoffee} focusable='true' color="purple" foo="bar" />)
-      .toJSON();
-    expect(tree.props.focusable).toEqual(true);
-  });
+      .create(<FontAwesomeIcon icon={faCoffee} />)
+      .toJSON()
+
+    React.createElement.mock.calls
+      .map(([_c, attrs, _children]) => attrs)
+      .filter((attrs) => 'focusable' in attrs)
+      .forEach(({ focusable }) => {
+        expect(focusable).toEqual(false)
+      })
+  })
 });

src/converter.js

@@ -25,15 +25,15 @@ function convert(createElement, element, extraProps = {}) {
   const mixins = Object.keys(element.attributes || {}).reduce(
     (acc, key) => {
       const val = element.attributes[key]
-      switch(key){
+      switch (key) {
         case 'class':
         case 'role':
         case 'style':
         case 'xmlns':
           delete element.attributes[key]
           break
-        case "focusable":
-          acc.attrs[key] = Boolean(val);
+        case 'focusable':
+          acc.attrs[key] = (val === 'true') ? true : false
           break
         default:
           if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0 || ( 'fill' === key && 'currentColor' === val )) {