IMPORTANT: Cho FAB chia ra làm 2 màn hình để FAB bám vào màn hình giao diện

src/components/FAB/constants.js

@@ -58,7 +58,7 @@ export const SUBBTN_WIDTH = FAB_WIDTH;
 export const SUBBTN_HEIGHT = SUBBTN_WIDTH;
 
 // Bán kính bo tròn (nút con hình tròn)
-export const SUBBTN_BORDER_RADIUS = SUBBTN_WIDTH / 2;
+export const SUBBTN_BORDER_RADIUS = 10;
 
 // Màu nền mặc định của nút con
 export const SUBBTN_BACKGROUND_COLOR = '#2F6BFF';

src/components/FAB/sub_button.js

@@ -88,6 +88,14 @@ const styles = StyleSheet.create({
     marginTop: 10,                         // Khoảng cách giữa các SubButton4
     flexDirection: 'row',
     alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
   },
   label: {
     marginRight:3,

src/screens/incoming_document/detail/style.js

@@ -62,7 +62,7 @@ const styles = StyleSheet.create({
         borderRadius:100,
         padding:10,
         alignSelf:'flex-start',
-        backgroundColor:R.colors.brown,
+        backgroundColor:R.colors.orange,
         marginHorizontal:5
     },
     containerBtn:{

src/screens/incoming_document/detail/view.js

 import React, {useEffect} from 'react';
-import {Text, View, TouchableOpacity, StyleSheet, Image, ScrollView, FlatList, Alert} from 'react-native';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  ScrollView,
+  FlatList,
+  Alert,
+} from 'react-native';
 import R from '../../../assets/R';
 import styles from './style';
 import Header from '../../../components/Header/Header';
@@ -9,123 +18,190 @@ import SubButton from '../../../components/FAB/sub_button';
 const DetailIncomingDocumentView = props => {
   const {icomingDocument} = props;
   console.log(props);
-  const getColor = (status) => {
+  const getColor = status => {
     switch (status) {
       case 'Hạn chế':
         return R.colors.brown;
       case 'Công khai':
         return R.colors.blue;
     }
-  }
+  };
   const renderItem = ({item}) => {
     console.log(item);
     return (
       <View style={{marginVertical: 7.5}}>
-        <View style={{flexDirection: 'row', marginBottom:5}}>
+        <View style={{flexDirection: 'row', marginBottom: 5}}>
           <Text style={styles.text}>{item.author} - </Text>
-          <Text style={styles.text}>{item.code}{" "}</Text>
-          <Text style={styles.text}>{item.time}{" "}</Text>
+          <Text style={styles.text}>{item.code} </Text>
+          <Text style={styles.text}>{item.time} </Text>
           <Text style={styles.text}>{item.date}</Text>
         </View>
         <View style={styles.containerContent}>
           <Text style={styles.text_2}>{item.content}</Text>
         </View>
       </View>
-    )
-  }
+    );
+  };
   return (
     <View style={styles.container}>
-      <Header title={'Văn bản 2038475'} isBack/>
+      <Header title={'Văn bản 2038475'} isBack />
+      <View style={{flex: 1}}>
         <ScrollView showsVerticalScrollIndicator={false}>
           <View style={styles.body}>
-        <Text style = {styles.textSubTitle}>{icomingDocument.title}</Text>
-        <View style={{marginTop:5}}></View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',marginBottom:5}}>
+            <Text style={styles.textSubTitle}>{icomingDocument.title}</Text>
+            <View style={{marginTop: 5}}></View>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: 5,
+              }}>
               <Text style={styles.text_1}>
-            Văn bản hiện có {icomingDocument.total_head_of_work} công việc liên {'\n'}quan
+                Văn bản hiện có {icomingDocument.total_head_of_work} công việc
+                liên {'\n'}quan
               </Text>
               <Text style={styles.text}>
                 Chế độ:
-            <Text style={{
-              fontWeight:'600',
-              fontFamily:R.fonts.fontMedium,
-              fontSize:R.fontsize.fontSizeContent,
-              color: getColor(icomingDocument.status)}}>{icomingDocument.status}</Text>
+                <Text
+                  style={{
+                    fontWeight: '600',
+                    fontFamily: R.fonts.fontMedium,
+                    fontSize: R.fontsize.fontSizeContent,
+                    color: getColor(icomingDocument.status),
+                  }}>
+                  {icomingDocument.status}
+                </Text>
               </Text>
             </View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
-          <Text style={styles.text}>Số ký hiệu: 
-            <Text style={styles.text_2}>{icomingDocument.symbol_number}</Text>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                marginBottom: 5,
+              }}>
+              <Text style={styles.text}>
+                Số ký hiệu:
+                <Text style={styles.text_2}>
+                  {icomingDocument.symbol_number}
+                </Text>
+              </Text>
+              <Text style={styles.text}>
+                Số vào sổ:
+                <Text style={styles.text_2}>
+                  {icomingDocument.number_entry_book}
                 </Text>
-          <Text style={styles.text}>Số vào sổ:
-            <Text style={styles.text_2}>{icomingDocument.number_entry_book}</Text>
               </Text>
             </View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
-          <Text style={styles.text}>Ngày đến: 
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                marginBottom: 5,
+              }}>
+              <Text style={styles.text}>
+                Ngày đến:
                 <Text style={styles.text_2}>{icomingDocument.term}</Text>
               </Text>
-          <Text style={styles.text}>Ngày văn bản: 
-            <Text style={styles.text_2}>{icomingDocument.term_display}</Text>
+              <Text style={styles.text}>
+                Ngày văn bản:
+                <Text style={styles.text_2}>
+                  {icomingDocument.term_display}
+                </Text>
               </Text>
             </View>
-        <Text style={[styles.text , {marginBottom:5}]}>Loại văn bản:
+            <Text style={[styles.text, {marginBottom: 5}]}>
+              Loại văn bản:
               <Text style={styles.text_2}>{icomingDocument.document_type}</Text>
             </Text>
-        <Text style={[styles.text , {marginBottom:5}]}>Lĩnh vực văn bản:
+            <Text style={[styles.text, {marginBottom: 5}]}>
+              Lĩnh vực văn bản:
               <Text style={styles.text_2}>{icomingDocument.field}</Text>
             </Text>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
-          <Text style={styles.text}>Người ký: 
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                marginBottom: 5,
+              }}>
+              <Text style={styles.text}>
+                Người ký:
                 <Text style={styles.text_2}>{icomingDocument.signer_name}</Text>
               </Text>
-          <Text style={styles.text}>Đối tác gửi: 
-            <Text style={styles.text_2}>{icomingDocument.sender_partner}</Text>
+              <Text style={styles.text}>
+                Đối tác gửi:
+                <Text style={styles.text_2}>
+                  {icomingDocument.sender_partner}
+                </Text>
               </Text>
             </View>
             <TextMulti title="Ghi chú" />
-        <View style={{marginTop:5}}></View>
-        <Text style={[styles.text, {marginBottom:3}]}>Nội dung</Text>
-        <View style={[styles.containerContent , {marginBottom:5}]}>
+            <View style={{marginTop: 5}}></View>
+            <Text style={[styles.text, {marginBottom: 3}]}>Nội dung</Text>
+            <View style={[styles.containerContent, {marginBottom: 5}]}>
               <Text style={styles.text_2}>{icomingDocument.content}</Text>
             </View>
-        <Text style={[styles.text,{marginBottom:5}]}>
+            <Text style={[styles.text, {marginBottom: 5}]}>
               Ý kiến của BGH:
               <Text style={styles.text_2}>{icomingDocument.opinion_bgh}</Text>
             </Text>
-        <View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
+            <View
+              style={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                marginBottom: 5,
+              }}>
               <Text style={styles.text}>Phòng ban nhận :</Text>
               {icomingDocument.received_departments.map((item, index) => {
                 return (
                   <View style={styles.card}>
-                <Text style={{color:R.colors.white}}  key={index}>{item.name}</Text>
+                    <Text style={{color: R.colors.white}} key={index}>
+                      {item.name}
+                    </Text>
                   </View>
-            )
+                );
               })}
             </View>
-        <View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
+            <View
+              style={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                marginBottom: 5,
+              }}>
               <Text style={styles.text}>Nhóm nhận :</Text>
               {icomingDocument.received_group.map((item, index) => {
                 return (
-              <View style={[styles.card , {backgroundColor:R.colors.blue}]}>
-                <Text style={{color:R.colors.white}}  key={index}>{item.name}</Text>
+                  <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
+                    <Text style={{color: R.colors.white}} key={index}>
+                      {item.name}
+                    </Text>
                   </View>
-            )
+                );
               })}
             </View>
 
-        <View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
+            <View
+              style={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                marginBottom: 5,
+              }}>
               <Text style={styles.text}>Người nhận :</Text>
               {icomingDocument.receiver.map((item, index) => {
                 return (
-              <View style={[styles.card , {backgroundColor:R.colors.blue}]}>
-                <Text style={{color:R.colors.white}}  key={index}>{item.name}</Text>
+                  <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
+                    <Text style={{color: R.colors.white}} key={index}>
+                      {item.name}
+                    </Text>
                   </View>
-            )
+                );
               })}
             </View>
 
-        <Text style={[styles.text, {color:R.colors.blue}]}>
+            <Text style={[styles.text, {color: R.colors.blue}]}>
               Tài liệu đính kèm
             </Text>
 
@@ -133,10 +209,15 @@ const DetailIncomingDocumentView = props => {
               <Text style={styles.textBtn}>
                 Quyết định thông báo đào tạo - QD347583
               </Text>
-          <Image source={R.images.icDownload} style={{width: 20, height: 20}} resizeMode="contain" tintColor={R.colors.blue}/>
+              <Image
+                source={R.images.icDownload}
+                style={{width: 20, height: 20}}
+                resizeMode="contain"
+                tintColor={R.colors.blue}
+              />
             </TouchableOpacity>
 
-        <Text style={[styles.text, {color:R.colors.blue}]}>
+            <Text style={[styles.text, {color: R.colors.blue}]}>
               Bút phê văn bản
             </Text>
 
@@ -145,14 +226,26 @@ const DetailIncomingDocumentView = props => {
               renderItem={renderItem}
               keyExtractor={(item, index) => index.toString()}
             />
+          </View>
+        </ScrollView>
+
+        <View style={{marginHorizontal: 15}}>
           <FAB>
-          <SubButton onPress={() => Alert.alert('Pressed 1!')} label="Thêm bút phê" images={R.images.icEdit} backgroundColor={R.colors.orange}/>
-          <SubButton onPress={() => Alert.alert('Pressed 2!')} label="Tạo công việc" images={R.images.icMenuEdit} backgroundColor={R.colors.blue}/>
+            <SubButton
+              onPress={() => Alert.alert('Pressed 1!')}
+              label="Thêm bút phê"
+              images={R.images.icEdit}
+              backgroundColor={R.colors.orange}
+            />
+            <SubButton
+              onPress={() => Alert.alert('Pressed 2!')}
+              label="Tạo công việc"
+              images={R.images.icMenuEdit}
+              backgroundColor={R.colors.blue}
+            />
           </FAB>
-       
-    
         </View>
-      </ScrollView>
+      </View>
     </View>
   );
 };

src/screens/incoming_document/view.js

@@ -86,7 +86,7 @@ const IncomingDocumentView = props => {
             <Button
               title="Công việc"
               onPress={() => {}}
-              backgroundColor={R.colors.brown}
+              backgroundColor={R.colors.orange}
               textColor={R.colors.white}
               height={25}
               borderRadius={15}