Create permission for gallery and android

mymoneymanager/.vscode/settings.json

 {
-    "git.ignoreLimitWarning": true
+    "git.ignoreLimitWarning": true,
+    "java.configuration.updateBuildConfiguration": "automatic"
 }
\ No newline at end of file

mymoneymanager/android/app/build.gradle

@@ -3,8 +3,6 @@ apply plugin: "com.android.application"
 import com.android.build.OutputFile
 import org.apache.tools.ant.taskdefs.condition.Os
 
-
-
 /**
  * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
  * and bundleReleaseJsAndAssets).
@@ -135,11 +133,15 @@ android {
     ndkVersion rootProject.ext.ndkVersion
 
     compileSdkVersion rootProject.ext.compileSdkVersion
+    // compileSdkVersion 33
+    // buildToolsVersion ""
 
     defaultConfig {
+        vectorDrawables.useSupportLibrary = true
         applicationId "com.mymoneymanager"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
+        // targetSdkVersion 33
         versionCode 1
         versionName "1.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()

mymoneymanager/android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,13 @@
   package="com.mymoneymanager">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
+    <uses-feature android:name="android.hardware.camera" />
+    <uses-feature android:name="android.hardware.camera.autofocus" />
+    <!-- <uses-feature android:name="android.hardware.camera" android:required="false" />
+    <uses-feature android:name="android.hardware.camera.front" android:required="false" /> -->
 
     <application
       android:name=".MainApplication"

mymoneymanager/android/build.gradle

@@ -49,6 +49,12 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../node_modules/jsc-android/dist")
         }
+        maven {
+            url 'https://maven.google.com'
+        }
+        maven {
+            url "https://www.jitpack.io"
+        }
         mavenCentral {
             // We don't want to fetch react-native from Maven Central as there are
             // older versions over there.

mymoneymanager/package.json

@@ -29,7 +29,7 @@
     "moment-timezone": "^0.5.39",
     "pouchdb": "^7.3.0",
     "react": "18.1.0",
-    "react-native": "0.70.4",
+    "react-native": "0.70.6",
     "react-native-alert-pro": "^1.1.2",
     "react-native-androw": "^0.0.34",
     "react-native-animatable": "^1.3.3",
@@ -44,6 +44,8 @@
     "react-native-flatlist-picker": "^1.0.1",
     "react-native-gesture-handler": "^2.7.0",
     "react-native-hide-show-password-input": "^1.2.0",
+    "react-native-image-crop-picker": "^0.38.1",
+    "react-native-image-picker": "^4.10.2",
     "react-native-item-select": "^0.4.2",
     "react-native-material-datetime-picker": "^0.2.1",
     "react-native-material-dropdown": "^0.11.1",
@@ -83,6 +85,7 @@
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.72.1",
+    "react-native-clean-project": "^4.0.1",
     "react-test-renderer": "18.1.0"
   },
   "jest": {

mymoneymanager/screens/categories/index.js

@@ -43,14 +43,6 @@ const grant = require ('../../images/grant.png');
 const onPress = () => console.log('press');
 
 export default function CategoriesScreen({ navigation }) {
- state = {
-  modalVisible:false
- };
-
- setModalVisible = (visible)=>{
-  this.setState ({modalVisible:visible});
- }
-
   const addCategoryAlert = () =>
   Alert.alert(
     "Add new category",
@@ -96,8 +88,6 @@ export default function CategoriesScreen({ navigation }) {
       {cancelable:false}
    ); 
 
-
-
    const INCOME={
       title: 'Income Categories',
       data:[
@@ -185,29 +175,6 @@ export default function CategoriesScreen({ navigation }) {
       },
     ]
    }
-
-  //  const ModalPoup = ({visible, children}) => {
-  //   const [showModal, setShowModal] = React.useState(visible);
-  //   React.useEffect (() => {
-  //     toggleModal();
-  //   }, [visible]);
-
-  //   const toggleModal = ()=> {
-  //     if (visible){
-  //       setShowModal(true);
-  //     }else{
-  //       setShowModal(false);
-  //     }
-  //   };
-  //   return (
-  //   <Modal transparent visible={showModal}>
-  //     <View style = {styles.modalBackGround}>
-  //       <View style={[styles.modalContainer]}>{children}</View>
-  //     </View>
-  //   </Modal>);
-  //  };
-  //   const [visible,setVisible] = React.useState(false);
-   
    const renderItem = ({item}) => {
     return(
       <View style={{flexDirection:'column', justifyContent:'space-between'}}>
@@ -227,7 +194,7 @@ export default function CategoriesScreen({ navigation }) {
             </View>
     </View>
      )
-     }
+  }
 
      return (
       
@@ -244,15 +211,6 @@ export default function CategoriesScreen({ navigation }) {
           )}
          />
 
-{/* <ModalPoup visible={visible}>
-            <View style={{alignItems:'center'}}>
-            <View style={styles.header}>
-
-            </View>
-            <Image source= {plus} style={{width:30, height:30}}/>
-
-            </View></ModalPoup> */}
-
          <TouchableOpacity style={{backgroundColor:'white', elevation:7, width:70, height:70,justifyContent:'center', alignItems:'center', position:'absolute', borderRadius:100, bottom:20, left:310, marginTop:210}} onPress={addCategoryAlert}>
              <Image style={{width:30, height:30}} source = {plus}></Image>
           </TouchableOpacity>

mymoneymanager/screens/profile/index.js

@@ -13,8 +13,11 @@ import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { NavigationAction } from '@react-navigation/native';
 import RNMaterialDatetimePicker from 'react-native-material-datetime-picker';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import ImagePicker from 'react-native-image-crop-picker';
 import SidebarScreen from '../sidebar';
 import styles from './style';
+// import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
+
 
 const logo = require ('../../images/pic.png');
 const cutlery = require ('../../images/cutlery.png');
@@ -40,32 +43,6 @@ const caricon = require ('../../images/caricon.png');
 const Stack = createNativeStackNavigator();
 const profile = require ('../../images/profile.jpg');
 
-const Profile =()=> {
-
-  const [fname, onChangeFName] = useState('Farhani');
-  const [lname, onChangeLName] = useState('Halim');
-  const [email, onChangeEmail] = useState('farhanihalim@gmail.com');
-  const [password, onChangePassword] = useState('');
-  const [confirmPassword, onChangeConfirmPassword] = useState('');
-  const [dob, setDOB] = useState('06/02/1999');
-  const [gender, setGender] = useState('Female');
- 
-  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
-
-  const showDatePicker = () => {
-    setDatePickerVisibility(true);
-  };
-
-  const hideDatePicker = () => {
-    setDatePickerVisibility(false);
-  };
-
-  const handleConfirm = (date) => {
-    console.warn("A date has been picked: ", date);
-    hideDatePicker();
-  };
-
-
 const requestCameraPermission = async () => {
   try {
     const granted = await PermissionsAndroid.request(
@@ -89,25 +66,68 @@ const requestCameraPermission = async () => {
     console.warn(err);
   }
 };
+
+const requestGalleryPermission = async () => {
+  try{
+const granted = await PermissionsAndroid.request(
+  PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+  {
+    title: 'Share image',
+    message: 'This app would like read media from storage.',
+    buttonPositive: 'Please accept bare mortal',
+  },
+); 
+  if (granted===PermissionsAndroid.RESULTS.GRANTED) {
+     console.log("You can use the gallery");
+  } else {
+    console.log("Gallery permission denied");
+  }
+ } catch (err) {
+  console.warn(err);
+ }
+};
+const Profile =()=> {
+
+  const [fname, onChangeFName] = useState('Farhani');
+  const [lname, onChangeLName] = useState('Halim');
+  const [email, onChangeEmail] = useState('farhanihalim@gmail.com');
+  const [password, onChangePassword] = useState('');
+  const [confirmPassword, onChangeConfirmPassword] = useState('');
+  const [dob, setDOB] = useState('06/02/1999');
+  const [gender, setGender] = useState('Female');
+  const [profilePic, setProfilePic] = useState(profile);
+  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
+
+  const showDatePicker = () => {
+    setDatePickerVisibility(true);
+  };
+
+  const hideDatePicker = () => {
+    setDatePickerVisibility(false);
+  };
+
+  const handleConfirm = (date) => {
+    console.warn("A date has been picked: ", date);
+    hideDatePicker();
+  };
+ 
     return (
         
         <View style = {{backgroundColor:'white', height:'100%'}}>
-        <ScrollView>
+          <ScrollView>
             <View style={{marginHorizontal:20, marginTop:20}}>
               <Text style={{marginBottom:20, fontSize:15,marginHorizontal:5}}>Profile photo</Text>
-              <View style = {{flexDirection:'row'}}>
-             
-             <TouchableOpacity>
-             <View style ={{flexDirection:'row', marginHorizontal:25}}>
-              <View style={{backgroundColor:'#2693ff', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:50, height:50}}>
-                  <Image style={{width: 60, height: 60,  borderColor:'powderblue', borderWidth: 1, elevation: 7,borderRadius: 100,}} source={profile}/>
-              </View>
-            </View>
-             </TouchableOpacity>
+                <View style = {{flexDirection:'row'}}>
+                 <View style ={{flexDirection:'row', marginHorizontal:25}}>
+                   <View style={{backgroundColor:'#2693ff', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:50, height:50}}>
+                    <Image style={{width: 60, height: 60,  borderColor:'powderblue', borderWidth: 1, elevation: 7,borderRadius: 100,}} source={profilePic}/>
+                   </View>
+                 </View>
+
              <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
                     <View>
                     <View style={{flexDirection:'row'}}>
-                     <TouchableOpacity style={styles.saveButton} title="request permissions" onPress={requestCameraPermission}>
+                     <TouchableOpacity style={styles.saveButton} title="request permissions" onPress={requestGalleryPermission}>
                         <View style={{flexDirection:'row'}}>
                      <Icon name="upload" size={20} color="#5eb5ce"/>
                      <Text style={{color:'#5eb5ce', marginHorizontal:10, fontSize:15}}>Upload Picture</Text>

mymoneymanager/screens/transactions/index.js

@@ -208,18 +208,16 @@ const EXP = [
 ];
 
 // const [selectedLanguage, setSelectedLanguage] = useState();
-
-// this.setState(function(state, props){
-//   return{
-//     counter: state.counter + props.increment
-//   };
-// });
  
 const CURRENCY = [
   {label:'RM',value:'RM'},
   {label:'USD',value:'USD'},
   {label:'KRW',value:'KRW'},
   {label:'EURO',value:'EURO'},
+  {label:'TEST',value:'TEST'},
+  {label:'TRY',value:'TRY'},
+  {label:'CUBA',value:'CUBA'},
+  // {label:'GFDFVF',value:'FGDFDWERDDF'},
 ];
 
 const Transactions =()=> {
@@ -227,11 +225,10 @@ const Transactions =()=> {
   const [imgAccSelected, setImgAccSelected] = useState (acc);
   const [strCatSelected, setStrCatSelected] = useState('Category');
   const [imgCatSelected, setImgCatSelected] = useState(tag);
- 
-  // const [isFocus, setIsFocus] = useState(false);
-
-  // const [selected, setSelected] = React.useState("");  
-  //const [selectedLanguage, setSelectedLanguage] = useState();
+  const [income, setIncome] = useState(INC);
+  const [expense, setExpense] = useState(false);
+  const [strCurrSelected, setStrCurrSelected] = useState('RM');
+  const [currListVisible, setCurrListVisible] = useState(false);
   const [text, onChangeText] = React.useState(null);
   const [number, onChangeNumber] = React.useState(null);
   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
@@ -269,30 +266,6 @@ const Transactions =()=> {
     hideTimePicker();
   };
 
-  //  const [selectedItem, setSelectedItem] = useState('');
-
-  const [income, setIncome] = useState(INC);
-
-  const [expense, setExpense] = useState(false);
-  
-  const [strCurrSelected, setStrCurrSelected] = useState('RM');
-
-  const [ currListVisible, setCurrListVisible] = useState(true);
-
-  // const showCurrList = ()=>{
-  //   setCurrListVisible(true);
-  // }
-  // const hideCurrList = ()=> {
-  //   setCurrListVisible(false);
-  // }
-
-  // const handleConfirmCurrency = (strCurrSelected) => {
-  //   console.log();
-  //   setStrCurrSelected();
-  //   hideCurrList();
-
-  // };
-
   const renderItem = ({ item }) => (
     <SafeAreaView>
                <View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}>
@@ -381,72 +354,31 @@ const Transactions =()=> {
               </TouchableOpacity> 
   </SafeAreaView>
 
-//   onPress={()=>{setStrCurrSelected}}
-
-// const showTimePicker = () => {
-//   setTimePickerVisibility(true);
-// };
-
-{/* <DateTimePickerModal
-                isVisible={isDatePickerVisible}
-                mode="date"
-                onConfirm={handleConfirmDate}
-                onCancel={hideDatePicker}/> <DateTimePickerModal
-                isVisible={isDatePickerVisible}
-                mode="date"
-                onConfirm={handleConfirmDate}
-                onCancel={hideDatePicker}/>*/}
 
-                const renderCurrency = ({ item }) => (
-                  <SafeAreaView>
-                    <TouchableOpacity onPress={()=>{setStrCurrSelected(item.label)}}>
-                          <Text style={{marginTop:10, fontSize:20, marginHorizontal:20, alignItems:'center'}}>{item.label}</Text>
-                    </TouchableOpacity>
-                  </SafeAreaView>
-                );
+  const renderCurrency = ({ item }) => (
+    <SafeAreaView>
+          
+            <TouchableOpacity onPress={()=>{setStrCurrSelected(item.label)}}>
+             <Text style={{marginTop:10, fontSize:20, justifyContent:'center', alignItems:'center', marginHorizontal:100}}>{item.label}</Text>
+            </TouchableOpacity>
+            <View style={[styles.dividerLine,{marginTop:20}]}></View>
+                      
+    </SafeAreaView>
+  );
 
   const ListCurrency = () => { 
   if (currListVisible){
   return(
-    <SafeAreaView>
-      <TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>currListVisible}>
-           <View style={{flexDirection:'row', width:'100%', justifyContent:'space-between'}}>
-              <View style={{flexDirection:'row', width:'80%'}}>
-                 <Text style={{marginTop:24, fontSize:20, marginHorizontal:5}}>{strCurrSelected}</Text>  
-              </View>
-                  <View style={{flexDirection:'row', width:'30%'}}>
-                     <Image style={{width:15, height:15, marginTop:30}} source={drop}></Image>
-                  </View>
-           </View>
-      </TouchableOpacity>
-      
-      {/* <View style={{backgroundColor:'rgba(52, 52, 52, alpha)', width:'100%'}}> */}
-       <View style={{backgroundColor:'white', opacity:0.9, borderRadius:2, justifyContent:'center', marginHorizontal:20, width:'70%', height:'50%', marginTop:70, borderWidth:0.5, borderColor:'white', elevation:2, position:'absolute',}}>
-            {/* <View> */}
+     <SafeAreaView style={{position:'absolute', height:'100%', width:'100%', backgroundColor:'rgba(192,192,192,0.8)', justifyContent:'center', alignItems:'center'}}>
+       <TouchableOpacity style={{height:'100%', width:'100%'}} onPress={()=>{setCurrListVisible(false)}}></TouchableOpacity>
+       <View style={{backgroundColor:'white', borderRadius:5, justifyContent:'center', marginHorizontal:20, width:'70%', height:'30%', marginTop:0, borderWidth:0.5, borderColor:'white', elevation:2, position:'absolute',}}>
             <FlatList     
-              //  style={{alignItems:'flex-start'}}
                data={CURRENCY}
                renderItem={renderCurrency}
                keyExtractor={item => item.id}
               />
               </View>
-              {/* </View> */}
- {/* </View> */}
-          
-           {/* <Overlay
-        animationType="zoomIn" containerStyle={{backgroundColor: 'rgba(37, 8, 10, 0.78)'}}
-        childrenWrapperStyle={{backgroundColor: '#eee'}}
-        animationDuration={500}>
-        {
-          (hideCurrList) => (
-            <Fragment>
-              <Text>Some Modal Content</Text>
-              <Text onPress={hideCurrList}>Close</Text>
-            </Fragment>
-          )
-        }
-      </Overlay> */}
-</SafeAreaView>
+ </SafeAreaView>
      );
    };
  };
@@ -545,10 +477,17 @@ const Transactions =()=> {
         </View>
        
 
-        <View style ={{flexDirection:'row'}}> 
-      
-        
-      <ListCurrency/>
+        <View style ={{flexDirection:'row'}}>
+        <TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>{setCurrListVisible(true)}}>
+           <View style={{flexDirection:'row', width:'100%', justifyContent:'space-between'}}>
+               <View style={{flexDirection:'row', width:'80%'}}>
+                 <Text style={{marginTop:24, fontSize:20, marginHorizontal:5}}>{strCurrSelected}</Text>  
+             </View>
+                   <View style={{flexDirection:'row', width:'30%'}}>
+                      <Image style={{width:15, height:15, marginTop:30}} source={drop}></Image>
+                   </View>
+            </View>
+       </TouchableOpacity>
       
 
 
@@ -586,6 +525,7 @@ const Transactions =()=> {
               <Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
            </TouchableOpacity>
         </View>
+        <ListCurrency/>
 </View>
 
     );  

mymoneymanager/screens/transactions/style.js

@@ -85,19 +85,13 @@ const styles = StyleSheet.create ({
         marginHorizontal:9,
         marginTop:9,
       },
+      dividerLine:{
+        height: 1,
+        width: '500%',
+        backgroundColor: 'lightgrey',
+        marginVertical:10
+    },
 
-      containerBox:{
-        borderWidth: 1,
-        borderColor: '#CECECE',
-        width: 250,
-    height: 50,
-    alignSelf: 'center',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row',
-    marginTop: 30,
-    padding: 5,
-      },
 
 });
 export default styles;
\ No newline at end of file