Merge branch '54-add-message-option-on-the-activity-indicatior' into 'master'

Resolve "Add message option on the activity indicatior"

Closes #54

See merge request !57

components/CustomActivityIndicator.js

 import React from 'react'
-import { StyleSheet, View, Modal } from 'react-native'
+import { StyleSheet, View, Modal, Text } from 'react-native'
 import { Colors, ActivityIndicator } from "react-native-paper";
 
 const CustomActivityIndicator = (props) => {
@@ -13,6 +13,9 @@ const CustomActivityIndicator = (props) => {
                     color={Colors.white}
                     size='large'
                 />
+                <Text style={styles.text}>
+                    {props.text}
+                </Text>
             </View>
         </Modal>
     )
@@ -35,5 +38,10 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: `rgba(0,0,0,${0.1})`
+    }, 
+    text: {
+        alignContent: "center", 
+        marginTop: 100,
+        color: 'white'
     }
 })

screens/camera/CameraScreen.js

@@ -101,6 +101,7 @@ const _CameraScreen = (props) => {
         <View style={styles.takeImage}>
           <CustomActivityIndicator
             style={styles.activityIndicator}
+            text="Processing image. Please wait."
             visible={showIndicator}
           />
           <CustomImagePicker setImageUri={(uri) => setImage(uri)} />
@@ -154,7 +155,7 @@ const _CameraScreen = (props) => {
         )}
         {image && (
           <CustomButton
-            title="Start Image Processing"
+            title="Start Processing"
             mode="contained"
             style={styles.button}
             onPress={() => {
@@ -184,13 +185,7 @@ const styles = StyleSheet.create({
     paddingTop: 25,
   },
   button: {
-    width: 150,
-    marginTop: 50,
-    marginBottom: 20,
-    alignSelf: "center",
-  },
-  button: {
-    width: 250,
+    width: 200,
     marginTop: 50,
     marginBottom: 20,
     alignSelf: "center",