Modernize dependencies to Babel 7 and Gulp 5, add comprehensive tests

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "@babel/preset-flow",
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    ["@babel/plugin-transform-runtime", {
+      "helpers": true,
+      "regenerator": false
+    }]
+  ]
+}

README.md

@@ -9,6 +9,13 @@ It also brings some extra functionality:
     <li>Changing line style.</li>
   </ul>
 
+## Compatibility
+
+This package has been updated to work with modern React Native versions:
+- React >= 16.8.0
+- React Native >= 0.60.0
+- Uses Babel 7 and modern JavaScript tooling
+
 ## Props
 <table>
   <th>

__tests__/Hr.test.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Hr from '../src/index';
+
+describe('Hr Component', () => {
+  it('renders a solid line without text', () => {
+    const tree = renderer.create(<Hr />).toJSON();
+    expect(tree).toBeTruthy();
+    expect(tree.type).toBe('View');
+    expect(tree.props.style).toMatchObject({
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginLeft: 8,
+      marginRight: 8,
+    });
+  });
+
+  it('renders with custom margins', () => {
+    const tree = renderer.create(<Hr marginLeft={50} marginRight={20} />).toJSON();
+    expect(tree.props.style).toMatchObject({
+      marginLeft: 50,
+      marginRight: 20,
+    });
+  });
+
+  it('renders with text', () => {
+    const tree = renderer.create(<Hr text="react-native" />).toJSON();
+    expect(tree).toBeTruthy();
+    // When text is present, it should have three children (line, text, line)
+    expect(tree.children).toHaveLength(3);
+  });
+
+  it('renders with custom text style', () => {
+    const textStyle = { color: 'red', fontSize: 20 };
+    const tree = renderer.create(
+      <Hr text="styled text" textStyle={textStyle} />
+    ).toJSON();
+    expect(tree).toBeTruthy();
+    expect(tree.children).toHaveLength(3);
+    // Check that middle child contains text
+    const textElement = tree.children[1];
+    expect(textElement.type).toBe('View');
+  });
+
+  it('renders with custom line style', () => {
+    const lineStyle = { backgroundColor: 'blue', height: 4 };
+    const tree = renderer.create(
+      <Hr lineStyle={lineStyle} />
+    ).toJSON();
+    expect(tree).toBeTruthy();
+  });
+
+  it('renders with both line and text styles', () => {
+    const lineStyle = { backgroundColor: 'blue', height: 2 };
+    const textStyle = { color: 'green', fontSize: 20 };
+    const tree = renderer.create(
+      <Hr
+        text="styled"
+        lineStyle={lineStyle}
+        textStyle={textStyle}
+      />
+    ).toJSON();
+    expect(tree).toBeTruthy();
+    expect(tree.children).toHaveLength(3);
+  });
+
+  it('uses default margins when not specified', () => {
+    const tree = renderer.create(<Hr />).toJSON();
+    expect(tree.props.style.marginLeft).toBe(8);
+    expect(tree.props.style.marginRight).toBe(8);
+  });
+
+  it('renders correctly without text (single line)', () => {
+    const tree = renderer.create(<Hr />).toJSON();
+    // Without text, should render a single line
+    expect(tree.children.length).toBeGreaterThanOrEqual(1);
+  });
+});

dist/index.js

@@ -1,109 +1,94 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _reactNative = require('react-native');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactNative = require("react-native");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var styles = _reactNative.StyleSheet.create({
-    line: {
-        flex: 1,
-        height: 1,
-        backgroundColor: 'black'
-    },
-    text: {
-        flex: 1,
-        textAlign: 'center',
-        marginLeft: 15,
-        marginRight: 15
-    }
+  line: {
+    flex: 1,
+    height: 1,
+    backgroundColor: 'black'
+  },
+  text: {
+    flex: 1,
+    textAlign: 'center',
+    marginLeft: 15,
+    marginRight: 15
+  }
 });
-
-var Hr = function (_Component) {
-    _inherits(Hr, _Component);
-
-    function Hr(props) {
-        _classCallCheck(this, Hr);
-
-        var _this = _possibleConstructorReturn(this, (Hr.__proto__ || Object.getPrototypeOf(Hr)).call(this, props));
-
-        _this.renderLine = _this.renderLine.bind(_this);
-        _this.renderText = _this.renderText.bind(_this);
-        _this.renderInner = _this.renderInner.bind(_this);
-        return _this;
+var Hr = /*#__PURE__*/function (_Component) {
+  function Hr(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Hr);
+    _this = _callSuper(this, Hr, [props]);
+    _this.renderLine = _this.renderLine.bind(_this);
+    _this.renderText = _this.renderText.bind(_this);
+    _this.renderInner = _this.renderInner.bind(_this);
+    return _this;
+  }
+  (0, _inherits2["default"])(Hr, _Component);
+  return (0, _createClass2["default"])(Hr, [{
+    key: "renderLine",
+    value: function renderLine(key) {
+      return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+        key: key,
+        style: [styles.line, this.props.lineStyle]
+      });
     }
-
-    _createClass(Hr, [{
-        key: 'renderLine',
-        value: function renderLine(key) {
-            return _react2.default.createElement(_reactNative.View, { key: key, style: [styles.line, this.props.lineStyle] });
-        }
-    }, {
-        key: 'renderText',
-        value: function renderText(key) {
-            return _react2.default.createElement(
-                _reactNative.View,
-                { key: key },
-                _react2.default.createElement(
-                    _reactNative.Text,
-                    { style: [styles.text, this.props.textStyle] },
-                    this.props.text
-                )
-            );
-        }
-    }, {
-        key: 'renderInner',
-        value: function renderInner() {
-            if (!this.props.text) {
-                return this.renderLine();
-            }
-            return [this.renderLine(1), this.renderText(2), this.renderLine(3)];
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-
-            return _react2.default.createElement(
-                _reactNative.View,
-                { style: { flexDirection: 'row', alignItems: 'center', marginLeft: this.props.marginLeft, marginRight: this.props.marginRight } },
-                this.renderInner()
-            );
+  }, {
+    key: "renderText",
+    value: function renderText(key) {
+      return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+        key: key
+      }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+        style: [styles.text, this.props.textStyle]
+      }, this.props.text));
+    }
+  }, {
+    key: "renderInner",
+    value: function renderInner() {
+      if (!this.props.text) {
+        return this.renderLine();
+      }
+      return [this.renderLine(1), this.renderText(2), this.renderLine(3)];
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginLeft: this.props.marginLeft,
+          marginRight: this.props.marginRight
         }
-    }]);
-
-    return Hr;
+      }, this.renderInner());
+    }
+  }]);
 }(_react.Component);
-
 Hr.propTypes = {
-    lineStyle: _propTypes2.default.shape({}),
-    text: _propTypes2.default.string,
-    marginLeft: _propTypes2.default.number,
-    marginRight: _propTypes2.default.number,
-    textStyle: _propTypes2.default.shape({})
+  lineStyle: _propTypes["default"].shape({}),
+  text: _propTypes["default"].string,
+  marginLeft: _propTypes["default"].number,
+  marginRight: _propTypes["default"].number,
+  textStyle: _propTypes["default"].shape({})
 };
-
 Hr.defaultProps = {
-    marginLeft: 8,
-    marginRight: 8
+  marginLeft: 8,
+  marginRight: 8
 };
-
-exports.default = Hr;
+var _default = exports["default"] = Hr;