Removed inline CSS

src/components/ButtonWidget.tsx

@@ -4,9 +4,9 @@ import {
   Image,
   ImageSourcePropType,
   Pressable,
-  StyleSheet,
   Text,
 } from 'react-native';
+import { styles } from '../styles/ButtonWidgetStyle';
 
 interface IButtonWidget {
   icon?: ImageSourcePropType;
@@ -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={{
@@ -53,21 +53,4 @@ const ButtonWidget = ({
   );
 };
 
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 10,
-    marginVertical: 4,
-    borderColor: '#16A334',
-    borderWidth: 1,
-    padding: 10,
-    elevation: 2,
-    color: 'white',
-    minWidth: '35%',
-    maxWidth: '100%',
-  },
-  iconStyle: {
-    borderRadius: 15,
-  },
-});
-
 export default ButtonWidget;

src/components/CreateGoalForm/CreateGoalFormStyle.tsx

@@ -0,0 +1,62 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    border: '2px solid black',
+    padding: 30,
+  },
+  form: {
+    border: '2px solid black',
+    padding: 10,
+    borderRadius: 15,
+  },
+  paragraph: {
+    margin: 5,
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: 'blue',
+    textAlign: 'center',
+  },
+  input: {
+    height: 30,
+    margin: 10,
+    borderWidth: 1,
+    padding: 10,
+    backgroundColor: '#ecf0f1',
+    fontSize: 12,
+  },
+  formchild: {
+    marginTop: 5,
+    fontWeight: 'bold',
+  },
+  toggle: {
+    display: 'flex',
+    flexDirection: 'row',
+    margin: 5,
+    padding: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  togglechild: {
+    margin: 5,
+  },
+  button: {
+    backgroundColor: 'blue',
+    padding: 6,
+    marginTop: 12,
+    width: '40%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+  },
+  buttoncontainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText:{
+    color: 'white'
+  }
+});

src/components/CreateGoalForm/CreateGoalform.tsx

@@ -1,14 +1,14 @@
 import {
   Text,
   View,
-  StyleSheet,
   TextInput,
   Switch,
   TouchableOpacity,
 } from 'react-native';
 import React, { useState } from 'react';
 import Deadline from './DatePicker';
 import Dropdown from './Dropdown';
+import { styles } from './CreateGoalFormStyle';
 
 export default function CreateGoalform() {
   const [title, onChangeTitle] = useState('');
@@ -66,68 +66,10 @@ 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>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    border: '2px solid black',
-    padding: 30,
-  },
-  form: {
-    border: '2px solid black',
-    padding: 10,
-    borderRadius: 15,
-  },
-  paragraph: {
-    margin: 5,
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: 'blue',
-    textAlign: 'center',
-  },
-  input: {
-    height: 30,
-    margin: 10,
-    borderWidth: 1,
-    padding: 10,
-    backgroundColor: '#ecf0f1',
-    fontSize: 12,
-  },
-  formchild: {
-    marginTop: 5,
-    fontWeight: 'bold',
-  },
-  toggle: {
-    display: 'flex',
-    flexDirection: 'row',
-    margin: 5,
-    padding: 3,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  togglechild: {
-    margin: 5,
-  },
-  button: {
-    backgroundColor: 'blue',
-    padding: 6,
-    marginTop: 12,
-    width: '40%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 15,
-  },
-  buttoncontainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

src/components/CreateGoalForm/DatePickerStyle.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  datePickerStyle: {
+    height: 40,
+    border: '1px solid black',
+    width: 205,
+    marginTop: 2,
+  },
+  dateIconStyle:{
+    position: 'absolute',
+    left: 0,
+    top: 4,
+    marginLeft: 0,
+  },
+  dateInputStyle:{
+    marginLeft: 36,
+    height: 30,
+    border: 'none',
+  }
+});

src/components/CreateGoalForm/Dropdown.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { SelectCountry } from 'react-native-element-dropdown';
 import Searchbar from './SearchBar';
 import Radio from './RadioGroup';
+import { styles } from './DropdownStyle';
 
 const local_data = [
   {
@@ -60,27 +61,4 @@ const SelectCountryScreen: React.FC<Props> = (_props) => {
   );
 };
 
-export default SelectCountryScreen;
-
-const styles = StyleSheet.create({
-  dropdown: {
-    margin: 10,
-    height: 30,
-    width: 205,
-    backgroundColor: '#ecf0f1',
-    fontSize: 12,
-    paddingHorizontal: 8,
-    border: '1px solid black',
-  },
-
-  placeholderStyle: {
-    fontSize: 12,
-  },
-  selectedTextStyle: {
-    fontSize: 15,
-    marginLeft: 8,
-  },
-  formchild: {
-    marginTop: 5,
-  },
-});
+export default SelectCountryScreen;

src/components/CreateGoalForm/DropdownStyle.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  dropdown: {
+    margin: 10,
+    height: 30,
+    width: 205,
+    backgroundColor: '#ecf0f1',
+    fontSize: 12,
+    paddingHorizontal: 8,
+    border: '1px solid black',
+  },
+
+  placeholderStyle: {
+    fontSize: 12,
+  },
+  selectedTextStyle: {
+    fontSize: 15,
+    marginLeft: 8,
+  },
+  formchild: {
+    marginTop: 5,
+  },
+});

src/components/CreateGoalForm/RadioGroup.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import RadioGroup from 'react-native-radio-buttons-group';
-import { Text, View, StyleSheet } from 'react-native';
+import { Text, View} from 'react-native';
+import { styles } from './RadioGroupStyle';
 
 const radioButtonsData = [
   {
@@ -34,12 +35,4 @@ export default function RadioGroupComponent() {
       />
     </View>
   );
-}
-
-const styles = StyleSheet.create({
-  header: {
-    fontSize: 8,
-    margin: 4,
-    fontWeight: 'bold',
-  },
-});
+}

src/components/CreateGoalForm/RadioGroupStyle.tsx

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  header: {
+    fontSize: 8,
+    margin: 4,
+    fontWeight: 'bold',
+  },
+});

src/components/CreateGoalForm/SearchBar.tsx

@@ -3,11 +3,11 @@ import React, { useState } from 'react';
 import {
   SafeAreaView,
   Text,
-  StyleSheet,
   View,
   FlatList,
   TextInput,
 } from 'react-native';
+import { styles } from './SearchBarStyle';
 
 const SearchBar = () => {
   const [search, setSearch] = useState('');
@@ -63,11 +63,7 @@ const SearchBar = () => {
   const ItemSeparatorView = () => {
     return (
       <View
-        style={{
-          height: 0.5,
-          width: '100%',
-          backgroundColor: '#C8C8C8',
-        }}
+        style={styles.itemSeparatorStyle}
       />
     );
   };
@@ -97,23 +93,4 @@ const SearchBar = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-  },
-  itemStyle: {
-    padding: 10,
-  },
-  textInputStyle: {
-    height: 30,
-    width: 205,
-    borderWidth: 1,
-    paddingLeft: 10,
-    margin: 5,
-    marginLeft: 8,
-    borderColor: 'black',
-    backgroundColor: '#ecf0f1',
-  },
-});
-
-export default SearchBar;
+export default SearchBar;