Some enhancement.

dist/Components/Container/Container.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\nbackground-color: whitesmoke;\nposition: fixed;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\nz-index: 1;\ndisplay: ', ';\n'], ['\nbackground-color: whitesmoke;\nposition: fixed;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\nz-index: 1;\ndisplay: ', ';\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledContainer = _styledComponents2.default.div(_templateObject, function (props) {
+    return props.status === 'react-welcome-page-finished' ? 'none' : 'initial';
+});
+
+var Container = function Container(props) {
+    return _react2.default.createElement(StyledContainer, props);
+};
+
+exports.default = Container;

dist/Components/Container/Container.native.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\nbackground-color: whitesmoke;\nposition: absolute;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\nz-index: 1;\n'], ['\nbackground-color: whitesmoke;\nposition: absolute;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\nz-index: 1;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\ndisplay: none;\n'], ['\ndisplay: none;\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledContainer = _styledComponents2.default.View(_templateObject);
+
+var NoneView = _styledComponents2.default.View(_templateObject2);
+
+var Container = function Container(props) {
+    if (props.status === 'finished') {
+        return _react2.default.createElement(NoneView, null);
+    } else {
+        return _react2.default.createElement(StyledContainer, props);
+    }
+};
+
+exports.default = Container;

dist/Components/Image/Image.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+require('../../styles.css');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Image = function Image(props) {
+    return _react2.default.createElement('img', _extends({}, props, { src: props.image, width: '100', height: '100', alt: '' }));
+};
+
+exports.default = Image;

dist/Components/Image/Image.native.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+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 _templateObject = _taggedTemplateLiteral(['\n    width: 100px;\n    height: 100px;\n    resize-mode: contain;\n'], ['\n    width: 100px;\n    height: 100px;\n    resize-mode: contain;\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledImage = _styledComponents2.default.Image(_templateObject);
+
+var Image = function (_React$Component) {
+    _inherits(Image, _React$Component);
+
+    function Image(props) {
+        _classCallCheck(this, Image);
+
+        var _this = _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).call(this, props));
+
+        _this.state = {
+            spinValue: new _reactNative.Animated.Value(0)
+
+            // First set up animation 
+        };_reactNative.Animated.timing(_this.state.spinValue, {
+            toValue: 1,
+            duration: _this.props.duration - 200,
+            easing: _reactNative.Easing.ease
+        }).start();
+
+        // Second interpolate beginning and end values (in this case 0 and 1)
+
+        return _this;
+    }
+
+    _createClass(Image, [{
+        key: 'render',
+        value: function render() {
+
+            var spin = this.state.spinValue.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['160deg', '0deg']
+            });
+
+            return _react2.default.createElement(_reactNative.Animated.Image, _extends({}, this.props, { source: this.props.image, alt: 'Logo Image',
+                style: { transform: [{ rotate: spin }], width: 100, height: 100, opacity: this.state.spinValue }
+            }));
+        }
+    }]);
+
+    return Image;
+}(_react2.default.Component);
+
+exports.default = Image;

dist/Components/InnerContainer/InnerContainer.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\n    text-align: center;\n'], ['\n    text-align: center;\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledInnerContainer = _styledComponents2.default.div(_templateObject);
+
+var InnerContainer = function InnerContainer(props) {
+    return _react2.default.createElement(StyledInnerContainer, props);
+};
+
+exports.default = InnerContainer;

dist/Components/InnerContainer/InnerContainer.native.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\n    display: flex;\n    justify-content: center;\n    align-items: center;\n'], ['\n    display: flex;\n    justify-content: center;\n    align-items: center;\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledInnerContainer = _styledComponents2.default.View(_templateObject);
+
+var InnerContainer = function InnerContainer(props) {
+    return _react2.default.createElement(StyledInnerContainer, props);
+};
+
+exports.default = InnerContainer;

dist/Components/LogoText/LogoText.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+require('../../styles.css');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var LogoText = function LogoText(props) {
+
+    return _react2.default.createElement('p', _extends({ style: { color: props.textColor } }, props));
+};
+
+exports.default = LogoText;

dist/Components/LogoText/LogoText.native.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+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 _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; }
+
+var LogoText = function (_React$Component) {
+    _inherits(LogoText, _React$Component);
+
+    function LogoText(props) {
+        _classCallCheck(this, LogoText);
+
+        var _this = _possibleConstructorReturn(this, (LogoText.__proto__ || Object.getPrototypeOf(LogoText)).call(this, props));
+
+        _this.state = {
+            positionValue: new _reactNative.Animated.Value(0)
+        };
+
+        _reactNative.Animated.timing(_this.state.positionValue, {
+            toValue: 1,
+            duration: _this.props.duration - 200,
+            easing: _reactNative.Easing.ease
+        }).start();
+
+        return _this;
+    }
+
+    _createClass(LogoText, [{
+        key: 'render',
+        value: function render() {
+            var pos = this.state.positionValue.interpolate({
+                inputRange: [0, 1],
+                outputRange: [50, 10]
+            });
+
+            return _react2.default.createElement(_reactNative.Animated.Text, _extends({ style: { transform: [{ translateY: pos }], color: this.props.textColor, opacity: this.state.positionValue } }, this.props));
+        }
+    }]);
+
+    return LogoText;
+}(_react2.default.Component);
+
+exports.default = LogoText;

dist/Components/OuterContainer/OuterContainer.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _templateObject = _taggedTemplateLiteral(['\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    width: 100%;\n'], ['\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    width: 100%;\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledOuterContainer = _styledComponents2.default.div(_templateObject);
+
+var OuterContainer = function OuterContainer(props) {
+
+    if (props.index !== 0) {
+        var keyframes = '@keyframes example {\n                from {background-color: ' + props.prevBackColor + '}\n                to {background-color: ' + props.backColor + '}\n            }';
+
+        var styleSheet = document.styleSheets[0];
+        styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
+    }
+
+    return _react2.default.createElement(StyledOuterContainer, _extends({
+        style: props.index ? {
+            animation: 'example ' + (props.loopDuration ? props.loopDuration : 1000) + 'ms ease'
+        } : { backgroundColor: props.backColor }
+    }, props));
+};
+
+exports.default = OuterContainer;