Removed inline CSS

src/components/ButtonWidget.tsx

@@ -37,7 +37,7 @@ const ButtonWidget = ({
   return (
     <Pressable style={icon ? styles.iconStyle : btnStyle} onPress={onPress}>
       {icon ? (
-        <Image style={{ height: 50, width: 50 }} source={icon} />
+        <Image style={styles.imageStyle} source={icon} />
       ) : (
         <Text
           style={{
@@ -68,6 +68,10 @@ const styles = StyleSheet.create({
   iconStyle: {
     borderRadius: 15,
   },
+  imageStyle:{
+    height: 50, 
+    width: 50
+  }
 });
 
 export default ButtonWidget;

src/components/CreateGoalForm/CreateGoalform.tsx

@@ -66,7 +66,7 @@ export default function CreateGoalform() {
 
         <View style={styles.buttoncontainer}>
           <TouchableOpacity style={styles.button}>
-            <Text style={{ color: 'white' }}>Create</Text>
+            <Text style={styles.buttonText}>Create</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -130,4 +130,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  buttonText:{
+    color: 'white'
+  }
 });

src/components/CreateGoalForm/DatePicker.tsx

@@ -19,17 +19,8 @@ const DatePickerComponent = () => {
           confirmBtnText="Confirm"
           cancelBtnText="Cancel"
           customStyles={{
-            dateIcon: {
-              position: 'absolute',
-              left: 0,
-              top: 4,
-              marginLeft: 0,
-            },
-            dateInput: {
-              marginLeft: 36,
-              height: 30,
-              border: 'none',
-            },
+            dateIcon: styles.dateIconStyle,
+            dateInput: styles.dateInputStyle,
           }}
           onDateChange={() => {
             setDate(date);
@@ -55,4 +46,15 @@ const styles = StyleSheet.create({
     width: 205,
     marginTop: 2,
   },
+  dateIconStyle:{
+    position: 'absolute',
+    left: 0,
+    top: 4,
+    marginLeft: 0,
+  },
+  dateInputStyle:{
+    marginLeft: 36,
+    height: 30,
+    border: 'none',
+  }
 });

src/components/CreateGoalForm/SearchBar.tsx

@@ -63,11 +63,7 @@ const SearchBar = () => {
   const ItemSeparatorView = () => {
     return (
       <View
-        style={{
-          height: 0.5,
-          width: '100%',
-          backgroundColor: '#C8C8C8',
-        }}
+        style={styles.itemSeparatorStyle}
       />
     );
   };
@@ -114,6 +110,11 @@ const styles = StyleSheet.create({
     borderColor: 'black',
     backgroundColor: '#ecf0f1',
   },
+  itemSeparatorStyle: {
+    height: 0.5,
+    width: '100%',
+    backgroundColor: '#C8C8C8',
+  }
 });
 
 export default SearchBar;

src/components/CustomProgressBar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 import { View, Text } from 'react-native';
 import * as Progress from 'react-native-progress';
 
@@ -13,7 +14,7 @@ const CustomProgressBar = ({
 }) => {
   return (
     <View>
-      <Text style={{ color: 'black', margin: 10 }}>{text}</Text>
+      <Text style={styles.text}>{text}</Text>
       <Progress.Bar
         progress={progress}
         color={color}
@@ -27,4 +28,11 @@ const CustomProgressBar = ({
   );
 };
 
+const styles = StyleSheet.create({
+  text:{
+    color: 'black', 
+    margin: 10
+  }
+})
+
 export default CustomProgressBar;

src/components/Modal/ProgressModal.tsx

@@ -18,7 +18,7 @@ function ProgressModal() {
   };
 
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <View style={styles.viewContainer}>
       <TouchableOpacity onPress={toggleModal}>
         <CircularProgress
           value={progress}
@@ -55,7 +55,7 @@ function ProgressModal() {
             <Card.Content>
               <Paragraph>Slide to update progress:</Paragraph>
               <Slider
-                style={{ width: '80%', alignSelf: 'center' }}
+                style={styles.sliderStyle}
                 value={progress}
                 onValueChange={handleSliderChange}
                 minimumValue={0}
@@ -64,7 +64,7 @@ function ProgressModal() {
               />
               <Paragraph>Current Progress: {progress}%</Paragraph>
             </Card.Content>
-            <Button style={styles.button} onPress={toggleModal}>
+            <Button style={styles.Button} onPress={toggleModal}>
               Close
             </Button>
           </Card>
@@ -75,6 +75,11 @@ function ProgressModal() {
 }
 
 const styles = StyleSheet.create({
+  viewContainer:{
+    flex: 1, 
+    justifyContent: 'center', 
+    alignItems: 'center'
+  },
   cardContainer: {
     margin: 20,
     padding: 15,
@@ -118,5 +123,9 @@ const styles = StyleSheet.create({
     padding: 10,
     borderRadius: 8,
   },
+  sliderStyle:{ 
+    width: '80%', 
+    alignSelf: 'center' 
+  }
 });
 export default ProgressModal;

src/components/ShortGoalsComponent/Card.tsx

@@ -25,11 +25,11 @@ const Card = ({ item }: any) => {
       <View style={[CardStyles.flex, CardStyles.container]}>
         <View style={CardStyles.flex}>
           <Image source={Images.commentIcon} style={CardStyles.commentIcon} />
-          <Text style={{ color: 'blue' }}>{item.messageCount}</Text>
+          <Text style={CardStyles.messageCount}>{item.messageCount}</Text>
         </View>
-        <Text style={{ color: 'red' }}>Due in {item.dueDate} days</Text>
+        <Text style={CardStyles.dueDate}>Due in {item.dueDate} days</Text>
         <TouchableOpacity style={[CardStyles.doneBtn, CardStyles.flex]}>
-          <Text style={{ color: 'white', fontWeight: 'bold' }}>
+          <Text style={CardStyles.MarkAsDone}>
             Mark as done
           </Text>
           <Image source={Images.doneIcon} style={CardStyles.doneIcon} />

src/components/ShortGoalsComponent/Styles/CardStyles.tsx

@@ -48,4 +48,14 @@ export const CardStyles = StyleSheet.create({
     width: 17,
     height: 17,
   },
+  messageCount:{
+    color: 'blue'
+  },
+  dueDate:{
+    color: 'red'
+  },
+  MarkAsDone:{
+    color: 'white', 
+    fontWeight: 'bold'
+  }
 });

src/components/ToDoComponent/TodoComponent.tsx

@@ -60,12 +60,7 @@ const TodoComponent = () => {
           onPress={() => navigation.navigate('CreatingGoals')}
         >
           <Text
-            style={{
-              color: 'black',
-              elevation: 10,
-              paddingHorizontal: 6,
-              paddingVertical: 6,
-            }}
+            style={styles.addText}
           >
             Add
           </Text>
@@ -123,6 +118,12 @@ const styles = StyleSheet.create({
     paddingLeft: 15,
     paddingRight: 15,
   },
+  addText:{
+    color: 'black',
+    elevation: 10,
+    paddingHorizontal: 6,
+    paddingVertical: 6,
+  }
 });
 
 export default TodoComponent;