Merge pull request #433 from DibyajyotiMishra/master

chore: Add Custom Styles to Components via Props

docs/kotlin.md

@@ -8,7 +8,7 @@ Add the `kotlin_version` to `buildscript.ext`
 buildscript {
   ext {
         ...
-        kotlin_version = '1.4.10'
+        kotlin_version = '1.5.10'
   }
 ```
 
@@ -35,6 +35,7 @@ Add the Kotlin classpath to `buildscript.dependencies`
 ```
 dependencies {
     ...
+    classpath("com.android.tools.build:gradle:7.0.2") // or recent
     classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
 }
 ```
@@ -46,4 +47,4 @@ Add Kotlin imports
 ```
 apply plugin: "kotlin-android"
 apply plugin: "kotlin-android-extensions"
-```
+```

src/CameraScreen.tsx

@@ -9,6 +9,7 @@ import {
   Dimensions,
   Platform,
   SafeAreaView,
+  ImageStyle
 } from 'react-native';
 import _ from 'lodash';
 import Camera from './Camera';
@@ -33,7 +34,9 @@ export type Props = {
   cameraRatioOverlay: any,
   showCapturedImageCount?: boolean,
   captureButtonImage: any,
+  captureButtonImageStyle: ImageStyle,
   cameraFlipImage: any,
+  cameraFlipImageStyle: ImageStyle,
   hideControls: any,
   showFrame: any,
   scanBarcode: any,
@@ -41,6 +44,8 @@ export type Props = {
   frameColor: any,
   torchOnImage: any,
   torchOffImage: any,
+
+  torchImageStyle: ImageStyle,
   onReadCode: (event: any) => void;
   onBottomButtonPressed: (event: any) => void;
 }
@@ -120,7 +125,7 @@ export default class CameraScreen extends Component<Props, State> {
       !this.isCaptureRetakeMode() && (
         <TouchableOpacity style={{ paddingHorizontal: 15 }} onPress={() => this.onSetFlash()}>
           <Image
-            style={{ flex: 1, justifyContent: 'center' }}
+            style={[{ flex: 1, justifyContent: 'center' }, this.props.torchImageStyle]}
             source={this.state.flashData.image}
             resizeMode="contain"
           />
@@ -134,7 +139,7 @@ export default class CameraScreen extends Component<Props, State> {
       !this.isCaptureRetakeMode() && (
         <TouchableOpacity style={{ paddingHorizontal: 15 }} onPress={() => this.onSetTorch()}>
           <Image
-            style={{ flex: 1, justifyContent: 'center' }}
+            style={[{ flex: 1, justifyContent: 'center' }, this.props.torchImageStyle]}
             source={this.state.torchMode ? this.props.torchOnImage : this.props.torchOffImage}
             resizeMode="contain"
           />
@@ -149,7 +154,7 @@ export default class CameraScreen extends Component<Props, State> {
       !this.isCaptureRetakeMode() && (
         <TouchableOpacity style={{ paddingHorizontal: 15 }} onPress={() => this.onSwitchCameraPressed()}>
           <Image
-            style={{ flex: 1, justifyContent: 'center' }}
+            style={[{ flex: 1, justifyContent: 'center' }, this.props.cameraImageStyle]}
             source={this.props.cameraFlipImage}
             resizeMode="contain"
           />
@@ -214,7 +219,7 @@ export default class CameraScreen extends Component<Props, State> {
       !this.isCaptureRetakeMode() && (
         <View style={styles.captureButtonContainer}>
           <TouchableOpacity onPress={() => this.onCaptureImagePressed()}>
-            <Image source={this.props.captureButtonImage} resizeMode="contain" />
+            <Image source={this.props.captureButtonImage} style={this.props.captureButtonImageStyle} resizeMode="contain" />
             {this.props.showCapturedImageCount && (
               <View style={styles.textNumberContainer}>
                 <Text>{this.numberOfImagesTaken()}</Text>