TODO: Bổ sung thư viện lấy ảnh từ thiết bị

android/app/src/main/AndroidManifest.xml

 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
     <application
       android:name=".MainApplication"

ios/AppUms_Student/Info.plist

@@ -23,6 +23,12 @@
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>LSRequiresIPhoneOS</key>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Cho phép ứng dụng truy cập thư viện ảnh của bạn</string>
+	<key>NSCameraUsageDescription</key>
+	<string>Cho phép ứng dụng sử dụng camera của bạn</string>
+	<key>NSMicrophoneUsageDescription</key>
+	<string>Cho phép ứng dụng sử dụng microphone của bạn</string>
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>

package.json

@@ -40,6 +40,7 @@
     "react-native-gifted-charts": "^1.2.41",
     "react-native-i18n": "^2.0.15",
     "react-native-image-crop-picker": "^0.36.2",
+    "react-native-image-picker": "^8.2.1",
     "react-native-indicators": "^0.17.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-material-textfield": "^0.16.1",
@@ -49,8 +50,8 @@
     "react-native-permissions": "^3.6.1",
     "react-native-progress": "^5.0.0",
     "react-native-qrcode-scanner": "^1.5.5",
-    "react-native-reanimated-table": "^0.0.2",
     "react-native-reanimated": "3.12.1",
+    "react-native-reanimated-table": "^0.0.2",
     "react-native-rename": "^2.9.0",
     "react-native-render-html": "^6.1.0",
     "react-native-responsive-fontsize": "^0.5.1",

src/config/Functions.js

@@ -25,6 +25,7 @@ import {sha256, sha224} from 'js-sha256';
 import {RFValue} from 'react-native-responsive-fontsize';
 var Sound = require('react-native-sound');
 
+
 export const soundStart = () => {
   var whoosh = new Sound('sond_noti.mp3', Sound.MAIN_BUNDLE, error => {
     if (error) {
@@ -616,4 +617,4 @@ export const formatDateToString = (date) => {
     const month = (date.getMonth() + 1).toString().padStart(2, '0');
     const day = date.getDate().toString().padStart(2, '0');
     return `${year}-${month}-${day}`;
-  };
\ No newline at end of file
+  };

src/screens/certificate_registration/card_button.js

@@ -7,23 +7,35 @@ const CardButtonImage = ({
   text = 'Tải ảnh ở đây',
   width,
   height = 150,
+  image,
   disabled = false,
 }) => {
   return (
     <TouchableOpacity
       style={[
-        styles.container_image,
-        {width, height},
+        styles.container_image ,
+        {
+          width, 
+          height,
+          borderStyle: 'dashed',
+          borderColor: R.colors.gray150,
+        },
         disabled && styles.disabled,
       ]}
       onPress={onPress}
       disabled={disabled}
       activeOpacity={0.7}>
-      <View style={styles.image_placeholder}></View>
-      <View>
-        <Image source={R.images.icImageDownload} style={styles.image} />
-      </View>
-      <Text style={styles.placeholder_text}>{text}</Text>
+      {image ? (
+        <Image source={{uri: image}} style={{width: '100%', height: '100%' }} resizeMode="contain" />
+      ) : (
+        <View style={{justifyContent: 'center', alignItems: 'center'}}>
+          <View style={styles.image_placeholder}></View>
+          <View>
+            <Image source={R.images.icImageDownload} style={styles.image} />
+          </View>
+          <Text style={styles.placeholder_text}>{text}</Text>
+        </View>
+      )}
     </TouchableOpacity>
   );
 };

src/screens/certificate_registration/index.js

 import React, { useState ,useMemo} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import CertificateRegistrationView from './view';
-
+import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
 const CertificateRegistration = (props) => {
   const [titleHeader,setTitleHeader]= useState('CertificateRegisitor')
   const [isSelected, setSelection] = useState(false);
   const [selectedValue, setSelectedValue] = useState(null); 
+  const [image, setImage] = useState(null);
   const [dataListCertificate, setdataListCertificate]= useState([
     {
     id: 1,
@@ -78,6 +79,28 @@ const CertificateRegistration = (props) => {
     setSelectedValue(item.value); 
 
   };
+  
+  const openImagePicker = () => {
+    const options = {
+      mediaType: 'photo',
+      quality: 1,
+    };
+
+    launchImageLibrary (options,(res)=>{
+      if (res.didCancel) {
+        console.log('User cancelled image picker');
+      } else if (res.errorCode) {
+        console.log('ImagePicker Error: ', res.errorCode);
+      } else {
+        // Lấy URI từ asset đầu tiên
+        const imageUri = res.assets && res.assets[0] ? res.assets[0].uri : null;
+        
+        // Lưu URI vào state
+        setImage(imageUri);
+      }
+    })
+  };
+  
   return (
     <CertificateRegistrationView 
       titleHeader={titleHeader}
@@ -86,6 +109,8 @@ const CertificateRegistration = (props) => {
       onSelect={handleSelect}
       isSelected={isSelected}
       setSelection={setSelection}
+      image={image}
+      openImagePicker={openImagePicker}
     />
   );
 };

src/screens/certificate_registration/style.js

@@ -54,11 +54,11 @@ const styles = StyleSheet.create({
     marginTop: 3,
     marginBottom: 15,
     borderWidth: 1,
+    borderRadius: 10,
+    paddingVertical:5,
     borderColor: R.colors.blue500,
-    borderStyle: 'dashed',
-    borderRadius: 15,
+    
     backgroundColor: R.colors.white,
-    padding: 16,
     flexDirection: 'row',
     flex: 1,
   },

src/screens/certificate_registration/view.js

@@ -11,7 +11,7 @@ import CustomTextInput from '../../components/Input/TextFieldCus';
 import styles from './style';
 
 const CertificateRegistrationView = props => {
-  const {titleHeader, dataList, isSelected, setSelection} = props;
+  const {titleHeader, dataList, isSelected, setSelection, image, openImagePicker} = props;
   const renderBody = () => {
     return (
       <ScrollView
@@ -121,7 +121,7 @@ const CertificateRegistrationView = props => {
           <Text style={styles.text_title_register}>
             Ảnh chứng chỉ <Text style={{color: 'red',}}>*</Text>
           </Text>
-          <CardButtonImage />
+          <CardButtonImage onPress={openImagePicker} image={image}/>
 
           <View style={styles.footer}>
             <CheckBox