Changed styling to include Mendix native styling. Default style is the same, but classes now can be used in Mendix.

dist/tmp/widgets/incentro/barcodescantorch/BarcodeScanTorch.js

@@ -87,6 +87,141 @@ module.exports =
 /************************************************************************/
 /******/ ({
 
+/***/ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js":
+/*!*****************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/arrayLikeToArray.js ***!
+  \*****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}module.exports=_arrayLikeToArray;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayLikeToArray=__webpack_require__(/*! ./arrayLikeToArray */ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js");function _arrayWithoutHoles(arr){if(Array.isArray(arr))return arrayLikeToArray(arr);}module.exports=_arrayWithoutHoles;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/defineProperty.js":
+/*!***************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/defineProperty.js ***!
+  \***************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+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;}module.exports=_defineProperty;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/extends.js":
+/*!********************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/extends.js ***!
+  \********************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _extends(){module.exports=_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;};return _extends.apply(this,arguments);}module.exports=_extends;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/interopRequireDefault.js ***!
+  \**********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj};}module.exports=_interopRequireDefault;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/iterableToArray.js":
+/*!****************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/iterableToArray.js ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&Symbol.iterator in Object(iter))return Array.from(iter);}module.exports=_iterableToArray;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/nonIterableSpread.js ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}module.exports=_nonIterableSpread;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/toConsumableArray.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/toConsumableArray.js ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayWithoutHoles=__webpack_require__(/*! ./arrayWithoutHoles */ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js");var iterableToArray=__webpack_require__(/*! ./iterableToArray */ "./node_modules/@babel/runtime/helpers/iterableToArray.js");var unsupportedIterableToArray=__webpack_require__(/*! ./unsupportedIterableToArray */ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");var nonIterableSpread=__webpack_require__(/*! ./nonIterableSpread */ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js");function _toConsumableArray(arr){return arrayWithoutHoles(arr)||iterableToArray(arr)||unsupportedIterableToArray(arr)||nonIterableSpread();}module.exports=_toConsumableArray;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js":
+/*!***************************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js ***!
+  \***************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayLikeToArray=__webpack_require__(/*! ./arrayLikeToArray */ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js");function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return arrayLikeToArray(o,minLen);}module.exports=_unsupportedIterableToArray;
+
+/***/ }),
+
+/***/ "./node_modules/@mendix/pluggable-widgets-tools/dist/index.js":
+/*!********************************************************************!*\
+  !*** ./node_modules/@mendix/pluggable-widgets-tools/dist/index.js ***!
+  \********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){if(k2===undefined)k2=k;Object.defineProperty(o,k2,{enumerable:true,get:function get(){return m[k];}});}:function(o,m,k,k2){if(k2===undefined)k2=k;o[k2]=m[k];});var __exportStar=this&&this.__exportStar||function(m,exports){for(var p in m){if(p!=="default"&&!exports.hasOwnProperty(p))__createBinding(exports,m,p);}};Object.defineProperty(exports,"__esModule",{value:true});__exportStar(__webpack_require__(/*! ./native/common */ "./node_modules/@mendix/pluggable-widgets-tools/dist/native/common.js"),exports);__exportStar(__webpack_require__(/*! ./web/common */ "./node_modules/@mendix/pluggable-widgets-tools/dist/web/common.js"),exports);
+
+/***/ }),
+
+/***/ "./node_modules/@mendix/pluggable-widgets-tools/dist/native/common.js":
+/*!****************************************************************************!*\
+  !*** ./node_modules/@mendix/pluggable-widgets-tools/dist/native/common.js ***!
+  \****************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+var _interopRequireDefault=__webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");var _defineProperty2=_interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));var _extends3=_interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));var _toConsumableArray2=_interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));Object.defineProperty(exports,"__esModule",{value:true});exports.mergeNativeStyles=void 0;function mergeNativeStyles(defaultStyle,overrideStyles){var styles=[defaultStyle].concat((0,_toConsumableArray2.default)(overrideStyles.filter(function(object){return object!==undefined;})));return Object.keys(defaultStyle).reduce(function(flattened,currentKey){var styleItems=styles.map(function(object){return object[currentKey];});return(0,_extends3.default)((0,_extends3.default)({},flattened),(0,_defineProperty2.default)({},currentKey,flattenObjects(styleItems)));},{});}exports.mergeNativeStyles=mergeNativeStyles;function flattenObjects(objects){return objects.reduce(function(merged,object){return(0,_extends3.default)((0,_extends3.default)({},merged),object);},{});}
+
+/***/ }),
+
+/***/ "./node_modules/@mendix/pluggable-widgets-tools/dist/web/common.js":
+/*!*************************************************************************!*\
+  !*** ./node_modules/@mendix/pluggable-widgets-tools/dist/web/common.js ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(exports,"__esModule",{value:true});exports.parseInlineStyle=void 0;function parseInlineStyle(){var style=arguments.length>0&&arguments[0]!==undefined?arguments[0]:"";try{return style.split(";").reduce(function(styleObject,line){var pair=line.split(":");if(pair.length===2){var name=pair[0].trim().replace(/(-.)/g,function(match){return match[1].toUpperCase();});styleObject[name]=pair[1].trim();}return styleObject;},{});}catch(_){return{};}}exports.parseInlineStyle=parseInlineStyle;
+
+/***/ }),
+
 /***/ "./src/BarcodeScanTorch.tsx":
 /*!**********************************!*\
   !*** ./src/BarcodeScanTorch.tsx ***!
@@ -103,74 +238,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_native__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_native__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_native_camera__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-native-camera */ "react-native-camera");
 /* harmony import */ var react_native_camera__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_native_camera__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mendix/pluggable-widgets-tools */ "./node_modules/@mendix/pluggable-widgets-tools/dist/index.js");
+/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__);
+
 
 
 
 ;
-class BarcodeScanTorch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+const defaultStyle = {
-    constructor(props) {
-        super(props);
-        this.onBarCodeReadHandler = this.onBarCodeRead.bind(this);
-        this.manualBarcodeHandler = this.manualBarcode.bind(this);
-        this.toggleTorch = this.toggleTorch.bind(this);
-        this.toggleAutoDetect = this.toggleAutoDetect.bind(this);
-        this.state = {
-            torchON: false,
-            autoDetect: true,
-            textboxValue: '',
-        };
-    }
-    toggleTorch() {
-        this.setState({ torchON: !this.state.torchON });
-    }
-    toggleAutoDetect() {
-        this.setState({ autoDetect: !this.state.autoDetect });
-    }
-    render() {
-        return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: localStyle.container },
-            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"], { style: localStyle.preview, captureAudio: false, onBarCodeRead: this.onBarCodeReadHandler, flashMode: this.state.torchON ? react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.torch : react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.off }),
-            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: localStyle.bottom },
-                Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleTorch, style: this.state.torchON ? localStyle.switchOn : localStyle.switchOff },
-                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.torchON ? localStyle.textOn : localStyle.textOff },
-                        "\u21AF Lamp ",
-                        this.state.torchON ? "aan" : "uit")),
-                Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleAutoDetect, style: this.state.autoDetect ? localStyle.switchOn : localStyle.switchOff },
-                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.autoDetect ? localStyle.textOn : localStyle.textOff },
-                        "\u2551\u2588\u2551 Detectie ",
-                        this.state.autoDetect ? "aan" : "uit")),
-                this.state.autoDetect ? Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null) :
-                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: localStyle.textBox },
-                        Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: localStyle.textBarcode }, "Barcode: "),
-                        Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: localStyle.textInput, placeholder: "Scan of vul handmatig", value: this.state.textboxValue, onChangeText: (text) => this.setState({ textboxValue: text }) }),
-                        Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.manualBarcodeHandler, style: localStyle.switchOn },
-                            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: localStyle.textOn }, "Naar machine"))))));
-    }
-    onBarCodeRead(event) {
-        if (this.state.autoDetect) {
-            if (this.props.barcode.status !== "available" || event.data === this.props.barcode.value) {
-                return;
-            }
-            this.props.barcode.setValue(event.data);
-            if (this.props.onDetect && this.props.onDetect.canExecute) {
-                react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
-                this.props.onDetect.execute();
-            }
-        }
-        else {
-            if (this.state.textboxValue !== event.data) {
-                react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
-                this.setState({ textboxValue: event.data });
-                return;
-            }
-        }
-    }
-    manualBarcode() {
-        var _a;
-        this.props.barcode.setValue(this.state.textboxValue);
-        (_a = this.props.onDetect) === null || _a === void 0 ? void 0 : _a.execute();
-    }
-}
-const localStyle = react_native__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     container: {
         flex: 1,
         backgroundColor: 'black'
@@ -232,7 +307,71 @@ const localStyle = react_native__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].creat
         fontSize: 16,
         fontWeight: 'bold',
     }
-});
+};
+class BarcodeScanTorch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+    constructor(props) {
+        super(props);
+        this.onBarCodeReadHandler = this.onBarCodeRead.bind(this);
+        this.manualBarcodeHandler = this.manualBarcode.bind(this);
+        this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__["mergeNativeStyles"])(defaultStyle, this.props.style);
+        this.toggleTorch = this.toggleTorch.bind(this);
+        this.toggleAutoDetect = this.toggleAutoDetect.bind(this);
+        this.state = {
+            torchON: false,
+            autoDetect: true,
+            textboxValue: '',
+        };
+    }
+    toggleTorch() {
+        this.setState({ torchON: !this.state.torchON });
+    }
+    toggleAutoDetect() {
+        this.setState({ autoDetect: !this.state.autoDetect });
+    }
+    render() {
+        return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.container },
+            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"], { style: this.styles.preview, captureAudio: false, onBarCodeRead: this.onBarCodeReadHandler, flashMode: this.state.torchON ? react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.torch : react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.off }),
+            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.bottom },
+                Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleTorch, style: this.state.torchON ? this.styles.switchOn : this.styles.switchOff },
+                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.torchON ? this.styles.textOn : this.styles.textOff },
+                        "\u21AF Lamp ",
+                        this.state.torchON ? "aan" : "uit")),
+                Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleAutoDetect, style: this.state.autoDetect ? this.styles.switchOn : this.styles.switchOff },
+                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.autoDetect ? this.styles.textOn : this.styles.textOff },
+                        "\u2551\u2588\u2551 Detectie ",
+                        this.state.autoDetect ? "aan" : "uit")),
+                this.state.autoDetect ? Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null) :
+                    Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.textBox },
+                        Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.styles.textBarcode }, "Barcode: "),
+                        Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: this.styles.textInput, placeholder: "Scan of vul handmatig", value: this.state.textboxValue, onChangeText: (text) => this.setState({ textboxValue: text }) }),
+                        Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.manualBarcodeHandler, style: this.styles.switchOn },
+                            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.styles.textOn }, "Naar machine"))))));
+    }
+    onBarCodeRead(event) {
+        if (this.state.autoDetect) {
+            if (this.props.barcode.status !== "available" || event.data === this.props.barcode.value) {
+                return;
+            }
+            this.props.barcode.setValue(event.data);
+            if (this.props.onDetect && this.props.onDetect.canExecute) {
+                react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
+                this.props.onDetect.execute();
+            }
+        }
+        else {
+            if (this.state.textboxValue !== event.data) {
+                react_native__WEBPACK_IMPORTED_MODULE_1__["Vibration"].vibrate(400);
+                this.setState({ textboxValue: event.data });
+                return;
+            }
+        }
+    }
+    manualBarcode() {
+        var _a;
+        this.props.barcode.setValue(this.state.textboxValue);
+        (_a = this.props.onDetect) === null || _a === void 0 ? void 0 : _a.execute();
+    }
+}
 
 
 /***/ }),

src/BarcodeScanTorch.tsx

@@ -1,111 +1,24 @@
 import { Component, createElement } from "react";
-import { View, StyleSheet, TouchableOpacity, Text, TextInput, Vibration } from "react-native";
+import { View, TouchableOpacity, Text, TextInput, Vibration, ViewStyle, TextStyle } from "react-native";
 import { RNCamera } from "react-native-camera";
 import { ValueStatus } from "mendix";
-import { Style } from "./utils/common";
+import { Style, mergeNativeStyles } from '@mendix/pluggable-widgets-tools';
 
 export interface BarcodeScanTorchStyle extends Style {
+    container: ViewStyle;
+    preview: ViewStyle;
+    bottom: ViewStyle;
+    textBox: ViewStyle;
+    textInput: TextStyle;
+    switchOn: ViewStyle;
+    switchOff: ViewStyle;
+    textOn: TextStyle;
+    textOff: TextStyle;
+    textBarcode: TextStyle;
+
 };
 
-import { BarcodeScanTorchProps } from "../typings/BarcodeScanTorchProps";
+const defaultStyle: BarcodeScanTorchStyle = {
-
-export type Props = BarcodeScanTorchProps<BarcodeScanTorchStyle>;
-
-interface State {
-    torchON?: boolean;
-    autoDetect?: boolean;
-    textboxValue?: string;
-}
-
-export class BarcodeScanTorch extends Component<Props, State> {
-    onBarCodeReadHandler = this.onBarCodeRead.bind(this);
-    manualBarcodeHandler = this.manualBarcode.bind(this);
-    constructor(props: Props){
-        super(props)
-        this.toggleTorch = this.toggleTorch.bind(this)
-        this.toggleAutoDetect = this.toggleAutoDetect.bind(this)
-        this.state = {
-               torchON: false,
-               autoDetect: true,
-               textboxValue: '',
-        }
-    }
-
-    toggleTorch(){
-        this.setState({torchON: !this.state.torchON})
-    }
-
-    toggleAutoDetect(){
-        this.setState({autoDetect: !this.state.autoDetect})
-     }
-
-    render(){
-        return (
-            <View style={localStyle.container}>
-                <RNCamera
-                    style={localStyle.preview}
-                    captureAudio={false}
-                    onBarCodeRead={this.onBarCodeReadHandler}
-                    flashMode={this.state.torchON ? RNCamera.Constants.FlashMode.torch: RNCamera.Constants.FlashMode.off}
-                />
-                <View style={localStyle.bottom}>
-                    <TouchableOpacity onPress={this.toggleTorch} style={this.state.torchON ? localStyle.switchOn : localStyle.switchOff}>
-                        <Text style={this.state.torchON ? localStyle.textOn : localStyle.textOff}>↯ Lamp {this.state.torchON ? "aan" : "uit"}</Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity onPress={this.toggleAutoDetect} style={this.state.autoDetect ? localStyle.switchOn : localStyle.switchOff}>
-                        <Text style={this.state.autoDetect ? localStyle.textOn : localStyle.textOff}>║█║ Detectie {this.state.autoDetect ? "aan" : "uit"}</Text>
-                    </TouchableOpacity>
-                {this.state.autoDetect ? <View></View> : 
-                <View style={localStyle.textBox}>
-                    <Text style={localStyle.textBarcode}>Barcode: </Text>
-                    <TextInput style={localStyle.textInput} placeholder="Scan of vul handmatig" value={this.state.textboxValue} onChangeText={(text) => this.setState({textboxValue: text})}/>
-                    <TouchableOpacity onPress={this.manualBarcodeHandler} style={localStyle.switchOn}>
-                        <Text style={localStyle.textOn}>Naar machine</Text>
-                    </TouchableOpacity>
-                </View>
-                }
-                </View>
-            </View>      
-        );
-    }
-    // Internal button for testing
-    //<View style={localStyle.bottom}>
-    //<TouchableOpacity onPress={this.toggleTorch} style={localStyle.switch}>
-    //<Text style={{ color: 'white', fontSize: 16 }}>Zaklamp {this.state.torchON ? "uit" : "aan"}</Text>
-    //</TouchableOpacity>
-    //</View>
-    //<Image style={localStyle.Image} source={this.state.torchOn ? flashon : flashoff} />
-                        
-
-    private onBarCodeRead(event: { data: string }): void {
-        if (this.state.autoDetect) {
-            if (this.props.barcode.status !== ValueStatus.Available || event.data === this.props.barcode.value) {
-                return;
-            }
-
-            this.props.barcode.setValue(event.data);
-
-            if (this.props.onDetect && this.props.onDetect.canExecute) {
-                Vibration.vibrate(400);
-                this.props.onDetect.execute();
-            }
-        }
-        else {
-            if (this.state.textboxValue !== event.data) {
-                Vibration.vibrate(400);
-                this.setState({textboxValue: event.data})
-                return;
-            }
-        }
-    }
-
-    private manualBarcode() {
-        this.props.barcode.setValue(this.state.textboxValue);
-        this.props.onDetect?.execute();
-    }
-}
-
-const localStyle = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: 'black'
@@ -167,4 +80,104 @@ const localStyle = StyleSheet.create({
         fontSize: 16,
         fontWeight: 'bold',
     }
-  })
+};
+
+import { BarcodeScanTorchProps } from "../typings/BarcodeScanTorchProps";
+
+export type Props = BarcodeScanTorchProps<BarcodeScanTorchStyle>;
+
+interface State {
+    torchON?: boolean;
+    autoDetect?: boolean;
+    textboxValue?: string;
+}
+
+export class BarcodeScanTorch extends Component<Props, State> {
+    onBarCodeReadHandler = this.onBarCodeRead.bind(this);
+    manualBarcodeHandler = this.manualBarcode.bind(this);
+    constructor(props: Props){
+        super(props)
+        this.toggleTorch = this.toggleTorch.bind(this)
+        this.toggleAutoDetect = this.toggleAutoDetect.bind(this)
+        this.state = {
+               torchON: false,
+               autoDetect: true,
+               textboxValue: '',
+        }
+    }
+
+    private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);
+
+    toggleTorch(){
+        this.setState({torchON: !this.state.torchON})
+    }
+
+    toggleAutoDetect(){
+        this.setState({autoDetect: !this.state.autoDetect})
+     }
+
+    render(){
+        return (
+            <View style={this.styles.container}>
+                <RNCamera
+                    style={this.styles.preview}
+                    captureAudio={false}
+                    onBarCodeRead={this.onBarCodeReadHandler}
+                    flashMode={this.state.torchON ? RNCamera.Constants.FlashMode.torch: RNCamera.Constants.FlashMode.off}
+                />
+                <View style={this.styles.bottom}>
+                    <TouchableOpacity onPress={this.toggleTorch} style={this.state.torchON ? this.styles.switchOn : this.styles.switchOff}>
+                        <Text style={this.state.torchON ? this.styles.textOn : this.styles.textOff}>↯ Lamp {this.state.torchON ? "aan" : "uit"}</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={this.toggleAutoDetect} style={this.state.autoDetect ? this.styles.switchOn : this.styles.switchOff}>
+                        <Text style={this.state.autoDetect ? this.styles.textOn : this.styles.textOff}>║█║ Detectie {this.state.autoDetect ? "aan" : "uit"}</Text>
+                    </TouchableOpacity>
+                {this.state.autoDetect ? <View></View> : 
+                <View style={this.styles.textBox}>
+                    <Text style={this.styles.textBarcode}>Barcode: </Text>
+                    <TextInput style={this.styles.textInput} placeholder="Scan of vul handmatig" value={this.state.textboxValue} onChangeText={(text) => this.setState({textboxValue: text})}/>
+                    <TouchableOpacity onPress={this.manualBarcodeHandler} style={this.styles.switchOn}>
+                        <Text style={this.styles.textOn}>Naar machine</Text>
+                    </TouchableOpacity>
+                </View>
+                }
+                </View>
+            </View>      
+        );
+    }
+    // Internal button for testing
+    //<View style={this.styles.bottom}>
+    //<TouchableOpacity onPress={this.toggleTorch} style={this.styles.switch}>
+    //<Text style={{ color: 'white', fontSize: 16 }}>Zaklamp {this.state.torchON ? "uit" : "aan"}</Text>
+    //</TouchableOpacity>
+    //</View>
+    //<Image style={this.styles.Image} source={this.state.torchOn ? flashon : flashoff} />
+                        
+
+    private onBarCodeRead(event: { data: string }): void {
+        if (this.state.autoDetect) {
+            if (this.props.barcode.status !== ValueStatus.Available || event.data === this.props.barcode.value) {
+                return;
+            }
+
+            this.props.barcode.setValue(event.data);
+
+            if (this.props.onDetect && this.props.onDetect.canExecute) {
+                Vibration.vibrate(400);
+                this.props.onDetect.execute();
+            }
+        }
+        else {
+            if (this.state.textboxValue !== event.data) {
+                Vibration.vibrate(400);
+                this.setState({textboxValue: event.data})
+                return;
+            }
+        }
+    }
+
+    private manualBarcode() {
+        this.props.barcode.setValue(this.state.textboxValue);
+        this.props.onDetect?.execute();
+    }
+}

src/utils/common.ts

@@ -1,28 +0,0 @@
-import { ImageStyle, TextStyle, ViewStyle } from "react-native";
-
-interface CustomStyle {
-    [key: string]: string | number;
-}
-
-export interface Style {
-    [key: string]: CustomStyle | ViewStyle | TextStyle | ImageStyle;
-}
-
-export function flattenStyles<T extends Style>(defaultStyle: T, overrideStyles: Array<T | undefined>): T {
-    const styles = [defaultStyle, ...overrideStyles.filter((object): object is T => object !== undefined)];
-
-    return Object.keys(defaultStyle).reduce(
-        (flattened, currentKey) => {
-            const styleItems = styles.map(object => object[currentKey]);
-            return {
-                ...flattened,
-                [currentKey]: flattenObjects(styleItems)
-            };
-        },
-        {} as T
-    );
-}
-
-function flattenObjects<T extends object>(objects: T[]): T {
-    return objects.reduce((merged, object) => ({ ...merged, ...object }), {} as T);
-}