Document
unknown
javascript
4 years ago
38 kB
5
Indexable
import * as ImagePicker from 'expo-image-picker';
import {
ActivityIndicator,
Alert,
Dimensions,
FlatList,
Image,
ImageBackground,
KeyboardAvoidingView,
Modal,
PermissionsAndroid,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
import React, {useEffect, useState} from 'react';
import {screenNames, urls} from '../../../constants';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {Button} from 'react-native-paper';
import {Camera} from 'expo-camera';
// import CameraRoll from '@react-native-community/cameraroll';
import Colors from '../../../themes/colors';
import DocumentPicker from 'react-native-document-picker';
import FileViewer from 'react-native-file-viewer';
import RNFS from 'react-native-fs';
import RNFetchBlob from 'rn-fetch-blob';
import TopBarSignup from '../../../custom_components/TopBarSignup';
import {doc} from 'prettier';
import {goBack} from '../../../utils/NavigationService';
import {navigate} from '../../../utils/NavigationService';
/* const value = [
{
img: require('../../../assets/bill1.png'),
billname: 'abcd',
billtype: 'Society Maintenance',
},
{
img: require('../../../assets/aadhar.png'),
billname: 'xyzz',
billtype: 'Tax Bill',
},
]; */
const WIDTH = Dimensions.get('window').width;
const CameraModule = props => {
const [cameraRef, setCameraRef] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
return (
<Modal
animationType="slide"
transparent={true}
visible={true}
onRequestClose={() => {
props.setModalVisible();
}}>
<Camera
style={{flex: 1}}
ratio="16:9"
flashMode={Camera.Constants.FlashMode.on}
type={type}
ref={ref => {
setCameraRef(ref);
}}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end',
}}>
<View
style={{
backgroundColor: 'black',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<Button
style={{marginLeft: 12}}
mode="outlined"
color="white"
onPress={() => {
props.setModalVisible();
}}>
Close
</Button>
<TouchableOpacity
onPress={async () => {
if (cameraRef) {
const options = {
quality: 0.3,
};
let photo = await cameraRef.takePictureAsync(options);
props.setImage(photo);
// console.log(photo);
props.setMessage();
props.setModalVisible();
}
}}>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: 'white',
height: 50,
width: 50,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 16,
marginTop: 16,
}}>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: 'white',
height: 40,
width: 40,
backgroundColor: 'white',
}}></View>
</View>
</TouchableOpacity>
<Button
style={{marginRight: 12}}
mode="outlined"
color="white"
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
);
}}>
{type === Camera.Constants.Type.back ? 'Front' : 'Back '}
</Button>
</View>
</View>
</Camera>
</Modal>
);
};
function Document({route, navigation}) {
const [modalVisible, setModalVisible] = useState(false);
const [image, setImage] = useState(null);
const [camera, setShowCamera] = useState(false);
const [hasPermission, setHasPermission] = useState(null);
const [value, setValue] = useState([]);
const [save, setSave] = useState(false);
const [isLoading, setLoading] = useState(null);
const [documentMessage, setDocumentMessage] = useState('');
const [isUploading, setIsUploading] = useState(null);
// const [imageMessage, setImageMessage] = useState('');
const [textMsg, setTextMsg] = useState('');
const [profilePicVisible, setProfilePicVisible] = useState(false);
const [docImage, setDocImage] = useState(null);
const [delModalVis, setDelModalVis] = useState(false);
const [documentId, setDocumentId] = useState(false);
const [documentUri, setDocumentUri] = useState('');
const [documentType, setDocumentType] = useState('');
const [documentName, setDocumentName] = useState('');
const [documentMsg, setDocumentMsg] = useState('');
const [loading, setloading] = useState(false);
const [roles, setRoles] = useState('');
const [txt, setTxt] = useState('');
let rowData = route.params;
async function _deleteDocument() {
setDelModalVis(false);
const token = `Bearer ${await AsyncStorage.getItem('token')}`;
const response = await fetch(
`${urls.baseUrl}deleteDocument?documentId=${documentId}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: token,
referrer:'https://easerent.com'
},
// body: JSON.stringify({
// documentId
// }),
},
)
.then(response => response.json())
.then(responseJson => {
console.log(documentId, 'documentId');
if (responseJson.Status == '400') {
alert(responseJson.message);
} else if (responseJson.Status == '200') {
info();
}
})
.catch(err => console.error(err));
setLoading(false);
}
useEffect(() => {
(async () => {
const {status} = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
if (Platform.OS !== 'web') {
const {status} =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
})();
info();
}, []);
useEffect(() => {
info();
}, []);
async function info() {
try {
setLoading(true);
const token = `Bearer ${await AsyncStorage.getItem('token')}`;
const role = await AsyncStorage.getItem('role');
setRoles(role);
const response = await fetch(
`${urls.baseUrl}getDocumentByPropertyId?documentType=property&propertyId=${rowData.propertyId}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: token,
referrer:'https://easerent.com'
},
},
);
const json = await response.json();
setValue(json.data.Document);
setLoading(false);
//console.log('Document', json.data);
} catch (e) {
setValue([]);
setLoading(false);
// console.log(e, value);
}
}
async function saveDocument(docData) {
//const checkPermission = async () => {
// Function to check the platform
// If iOS then start downloading
// If Android then ask for permission
// const getExtention = filename => {
// // To get the file extension
// return /[.]/.exec(filename) ? /[^.]+$/.exec(filename) : undefined;
// };
console.log(docData, 'doc in out downloading');
const downloadDoc = doc => {
// Main function to download the image
setLoading(true);
// Image URL which we want to download
console.log(doc, 'doc in downloading');
let docUrl = doc.filePath;
let docName = doc.filePath.slice(doc.filePath.lastIndexOf('/') + 1);
// let docExt = doc.filePath.slice(doc.filePath.lastIndexOf('.')+1) ;
// Getting the extention of the file
// let ext = getExtention(image_URL);
// ext = '.' + ext[0];
// Get config and fs from RNFetchBlob
// config: To pass the downloading related options
// fs: Directory path where we want our image to download
const {config, fs} = RNFetchBlob;
let downloads = fs.dirs.DownloadDir;
let options = {
fileCache: true,
addAndroidDownloads: {
// Related to the Android only
useDownloadManager: true,
notification: true,
path: downloads + '/' + docName,
// description: 'Image',
},
};
config(options)
.fetch('GET', docUrl)
.then(res => {
// Showing alert after successful downloading
console.log('res -> ', JSON.stringify(res));
setLoading(false);
alert('Document Downloaded Successfully.');
})
.catch(() => {
console.log(e);
setLoading(false);
});
};
if (Platform.OS === 'ios') {
return;
}
try {
// console.log(docImage);
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: 'Storage Permission Required',
message: 'App needs access to your storage to download Photos',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
// Once user grant the permission start downloading
//console.log('Storage Permission Granted.');
//downloadDoc();
//const saveRes = await CameraRoll.save(docImage, 'photo');
// console.log('Storage Permission Granted.');
downloadDoc(docData);
} else {
// If permission denied then show alert
Alert.alert('Storage Permission Not Granted');
}
// console.log(granted);
} catch (err) {
// To handle permission related exception
// console.warn('err',err);
}
/* try {
//console.log(image);
} catch (e) {
console.log(e);
} */
}
const _uploadDoc = async () => {
if (documentUri == '') {
// setImageMessage('Please select or capture image.');
setDocumentMsg('Please select document.');
return;
}
if (txt == '') {
setTextMsg('Please enter document name.');
return;
}
try {
setIsUploading(true);
const token = `Bearer ${await AsyncStorage.getItem('token')}`;
const formData = new FormData();
formData.append('comment', txt);
formData.append('docType', 'property');
formData.append('propertyId', rowData.propertyId);
formData.append('userId', rowData.userId);
formData.append('file', {
name: documentName,
type: documentType,
uri:
Platform.OS === 'android'
? documentUri
: documentUri.replace('file:///', ''),
});
console.log(formData, 'formdata from doc upload');
const response = await fetch(`${urls.baseUrl}uploadFile`, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: token,
referrer:'https://easerent.com'
},
body: formData,
});
console.log(response, 'json from doc upload');
const json = await response.json();
if (json.status == 200) {
setModalVisible(!modalVisible);
//alert('Upload Successful');
setDocumentUri('');
setDocumentMsg('Please select document.');
}
info(); // refreshing list of doc after closing the upload modal
setIsUploading(false);
setTxt('');
// setImage(null);
console.log(json, 'json from doc upload');
} catch (err) {
setIsUploading(false);
alert('Failed to Upload..!!')
console.error(err, 'err from doc upload');
}
};
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
const onCloseModal = () => {
setModalVisible(!modalVisible);
// setImageMessage('');
setDocumentName('');
setDocumentMsg('');
setDocumentUri('');
setDocumentType('');
// setImage(null);
setTxt('');
};
const openProfile = doc => {
const url = doc.filePath;
const documentType = doc.documentFormat.slice(
0,
doc.documentFormat.indexOf('/'),
);
// Feel free to change main path according to your requirements.
// IMPORTANT: A file extension is always required on iOS.
// You might encounter issues if the file extension isn't included
// or if the extension doesn't match the mime type of the file.
console.log(documentType == 'image', documentType, 'type');
if (documentType == 'image') {
setProfilePicVisible(true);
setDocImage(doc.filePath);
} else {
const localFile = `${RNFS.DocumentDirectoryPath}/temporaryfile${url.slice(
url.lastIndexOf('.'),
)}`;
const options = {
fromUrl: url,
toFile: localFile,
};
RNFS.downloadFile(options)
.promise.then(() => FileViewer.open(localFile))
.then(() => {
console.log('Success. !!!!!!!!!!');
// success
})
.catch(error => {
console.log('Error. !!!!!!!!!!');
// error
});
}
};
const pickImage = async () => {
try {
const res = await DocumentPicker.pick({
type: [
DocumentPicker.types.images,
DocumentPicker.types.pdf,
DocumentPicker.types.doc,
DocumentPicker.types.docx,
],
});
console.log(res, 'setting doc props outside if');
if (res[0] != null) {
console.log(res, 'setting doc props inside if');
setDocumentUri(res[0].uri);
setDocumentType(res[0].type);
setDocumentName(res[0].name);
setDocumentMsg('Document Selected');
}
} catch (err) {
if (DocumentPicker.isCancel(err)) {
// User cancelled the picker, exit any dialogs or menus and move on
setDocumentMsg('Unable to select document. \n please try again !!!');
} else {
console.log(err, 'Error from Document selection.');
}
}
// let result = await ImagePicker.launchImageLibraryAsync({
// mediaTypes: ImagePicker.MediaTypeOptions.All,
// allowsEditing: true,
// aspect: [4, 3],
// quality: 1,
// });
// // console.log(result);
// if (!result.cancelled) {
// setImage(result.uri);
// setImageMessage('Image selected');
// }
};
const trash = function (docId, propertyId) {
setDelModalVis(true);
console.log(docId, 'docId');
setDocumentId(docId);
};
return (
<>
<TopBarSignup
onBackButtonClick={() => {
goBack();
}}
topBarTextTitle={'Document'}
showDrawer={false}
/>
<View style={styles.container}>
<View
style={{
flexDirection: 'column',
//backgroundColor: '#fff',
height: 130,
// shadowColor: 'black',
// shadowOpacity: 0.26,
// shadowOffset: { width: 0, height: 2},
// shadowRadius: 10,
// elevation: 3,
// backgroundColor: 'white'
}}>
<View style={{flexDirection: 'row'}}>
{rowData.coverImage !== null && rowData.coverImage !== '' ? (
<View
style={{
height: 100,
width: 100,
marginLeft: 30,
marginTop: 30,
borderRadius: 30 / 2,
overflow: 'hidden',
elevation: 10,
}}>
<ImageBackground
source={{uri: rowData.coverImage}}
style={styles.image}
resizeMode={'cover'}
onPress={() =>
navigate(screenNames.PropertyTenantScreen)
}></ImageBackground>
</View>
) : (
<View
style={{
height: 100,
width: 100,
marginLeft: 30,
marginTop: 30,
borderRadius: 30 / 2,
overflow: 'hidden',
elevation: 10,
}}>
<ImageBackground
source={require('../../../assets/house_villa_one.png')}
style={styles.image}
resizeMode={'cover'}></ImageBackground>
</View>
)}
<View style={{flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}}>
<Text style={styles.title}>{rowData.propertyName}</Text>
</View>
<View style={{flexDirection: 'row', marginTop: 5}}>
<Image
source={require('../../../assets/placeholder.png')}
style={{height: 20, width: 20, marginLeft: 10}}
resizeMode="contain"
/>
<Text
style={{
width: '60%',
fontSize: 13,
marginLeft: 5,
color: Colors.colorText,
textAlign: 'left',
}}>
{rowData.addressLine1 + ', ' + rowData.addressLine2 + ', ' + rowData.city + ', ' + rowData.state + ', ' + rowData.country}
</Text>
</View>
</View>
</View>
</View>
<Modal
animationType="fade"
transparent={true}
visible={delModalVis}
onRequestClose={() => {
setDelModalVis(!setDelModalVis);
}}>
<TouchableWithoutFeedback onPress={() => setDelModalVis(false)}>
<View style={styles.centeredView}>
<TouchableWithoutFeedback>
<View style={styles.delModView}>
<Image
source={require('../../../assets/x-mark.png')}
style={{
width: 65,
height: 65,
marginTop: 30,
marginBottom: 15,
}}
/>
<View style={{marginBottom: 10, width: '75%'}}>
<Text
style={{
fontWeight: 'bold',
textAlign: 'center',
fontSize: 15,
}}>
Are you sure you want to delete?
</Text>
</View>
<View style={{flexDirection: 'row', marginVertical: 25}}>
<TouchableOpacity
style={styles.delBtn}
onPress={() => _deleteDocument()}>
<Text style={styles.delbtnTxt}>Yes</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.delBtn}
onPress={() => setDelModalVis(false)}>
<Text style={styles.delbtnTxt}>No</Text>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
<Modal
animationType="none"
transparent={true}
visible={profilePicVisible}
onRequestClose={() => {
setProfilePicVisible(!profilePicVisible);
}}>
<TouchableWithoutFeedback onPress={() => setProfilePicVisible(false)}>
<View style={styles.centeredView}>
<TouchableWithoutFeedback>
<Image
source={{uri: docImage}}
style={{width: WIDTH - 20, height: WIDTH - 20}}
resizeMode="cover"
/>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
<Modal
statusBarTranslucent={true}
style={{width: '100%', height: '100%', padding: 0, margin: 0}}
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
// Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<KeyboardAvoidingView
style={styles.centeredView}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalView}>
<View style={{flexDirection: 'row'}}>
<Text style={styles.modalText}>Add Attachment</Text>
<TouchableOpacity onPress={onCloseModal}>
<Image
source={require('../../../assets/close_modal.png')}
style={{height: 18, width: 18, tintColor: '#808080'}}
resizeMode="contain"
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
marginBottom: 10,
}}>
<View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
</View>
<View
flexDirection="row"
style={{
alignItems: 'center',
}}>
<TouchableOpacity
style={styles.imgcontainer}
onPress={() => {
setShowCamera(true);
}}>
<Image source={require('../../../assets/pic.png')} />
</TouchableOpacity>
<TouchableOpacity
style={styles.imgcontainer}
onPress={pickImage}>
<Image source={require('../../../assets/phone.png')} />
</TouchableOpacity>
</View>
{documentMsg !== '' ? (
<View style={{height: 20, alignItems: 'center', marginTop: 10}}>
<Text
style={{
fontSize: 10,
color: documentMsg != '' ? 'blue' : 'red',
}}>
{documentMsg}
</Text>
</View>
) : (
<View style={{height: 20, marginTop: 10}} />
)}
<View style={{flexDirection: 'row', marginBottom: 5}}>
<TextInput
style={styles.txtm}
placeholder="Enter Document name"
value={txt}
onChangeText={value => setTxt(value)}
/>
<Text
style={{
color: 'red',
fontSize: 30,
marginStart: 10,
marginTop: 10,
}}>
*
</Text>
</View>
{textMsg !== '' ? (
<View
style={{
height: 20,
alignItems: 'center',
marginTop: 2,
marginBottom: 10,
}}>
<Text style={{fontSize: 10, color: 'red'}}>{textMsg}</Text>
</View>
) : (
<View style={{height: 0, marginTop: 10}} />
)}
<View
style={{
flexDirection: 'row',
//alignItems: 'center',
marginBottom: 10,
}}>
<TouchableOpacity
style={{
backgroundColor: '#1B6C9A',
padding: 10,
justifyContent: 'center',
paddingHorizontal: 25,
borderRadius: 10,
alignSelf: 'center',
}}
onPress={_uploadDoc}>
<Text style={styles.textStyle}>Upload </Text>
</TouchableOpacity>
{isUploading == true && (
<ActivityIndicator
size="small"
color="blue"
style={{position: 'absolute', left: 110, top: 10}}
/>
)}
</View>
<TouchableOpacity
style={[styles.button, styles.buttonClose]}
onPress={onCloseModal}>
<Text style={styles.textStyle}>close </Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</Modal>
{camera && (
<CameraModule
showModal={camera}
setMessage={() => setDocumentMsg('Image selected')}
setModalVisible={() => setShowCamera(false)}
setImage={result => {
console.log(result);
setDocumentType(
'image/' + result.uri.slice(result.uri.lastIndexOf('.') + 1),
);
setDocumentName(
result.uri.slice(result.uri.lastIndexOf('/') + 1),
);
setDocumentUri(result.uri);
}}
/>
)}
<View style={{overflow: 'hidden', paddingBottom: 5}}>
<View
style={{
backgroundColor: '#fff',
width: '100%',
height: 30,
shadowColor: '#000',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.8,
shadowRadius: 3,
elevation: 3,
}}
/>
</View>
{roles === 'Owner' || roles === 'Property Manager' ? (
<TouchableOpacity
onPress={() => setModalVisible(true)}
style={{
backgroundColor: '#2C9037',
borderRadius: 25,
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
alignSelf:'flex-end',
position:'absolute',
bottom: 30,
right:30,
elevation: 5,
}}>
<Text style={styles.ortxt}>+</Text>
</TouchableOpacity>
) : (
// <View
// style={{
// width: 50,
// height: 50,
// justifyContent: 'center',
// }}>
// <View style={{height: 1, backgroundColor: '#ccc'}} />
// </View>
<TouchableOpacity
onPress={() => setModalVisible(true)}
style={{
backgroundColor: '#2C9037',
borderRadius: 25,
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
alignSelf:'flex-end',
position:'absolute',
bottom: 30,
right:30,
elevation: 5,
}}>
<Text style={styles.ortxt}>+</Text>
</TouchableOpacity>
)}
{/* <View style={styles.orContanier}>
<View style={styles.orstyle} />
{roles === 'Owner' || roles === 'Property Manager' ? (
<TouchableOpacity
onPress={() =>
navigate(screenNames.Billinfo, {
rowData,
editAble: true,
reqType: 'addBill',
})
}
style={{
backgroundColor: '#2C9037',
borderRadius: 25,
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
alignSelf:'flex-end',
position:'absolute',
bottom: 30,
right:30,
elevation: 5,
}}>
<Text style={styles.ortxt}>+</Text>
</TouchableOpacity>
) : (
<View
style={{
width: 50,
height: 50,
justifyContent: 'center',
}}>
<View style={{height: 1, backgroundColor: '#ccc'}} />
</View>
)}
<View style={{flex: 0.1, height: 1, backgroundColor: '#ccc'}} />
</View> */}
{/* <View
style={{
flexDirection: 'row',
paddingStart: 20,
justifyContent: 'space-between',
}}>
<Text style={[styles.txt, {flex: 0.9}]}>Document</Text>
<Text style={[styles.txt]}>Document Comment</Text>
<Text style={{...styles.txt}}> Action</Text>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 15,
marginBottom: 0,
}}>
<View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
</View> */}
{/* Image with edit preview option */}
{isLoading === true ? (
<ActivityIndicator
size="small"
color="blue"
style={{marginTop: 30}}
/>
) : value[0] == null ? (
<View
style={{
height: 200,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
//backgroundColor: 'black',
}}>
<Text
style={{
alignSelf: 'center',
fontSize: 13,
//fontFamily: 'Montserrat-Bold',
}}>
{' '}
No Documents available{' '}
</Text>
</View>
) : (
<View style={{ paddingTop: 10}}>
<FlatList
data={value}
showsVerticalScrollIndicator={false}
ItemSeparatorComponent={() => (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginVertical: 10,
}}>
<View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
</View>
)}
renderItem={({item: docData}) => {
let typ = docData.documentFormat.slice(
0,
docData.documentFormat.indexOf('/'),
);
// console.log(docData);
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
padding: 5,
width: Dimensions.get('window').width - 15,
height: 60,
backgroundColor: 'white',
elevation: 5,
overflow: 'hidden',
borderRadius: 10,
marginVertical: 5,
alignSelf: 'center',
shadowColor: '#000',
// shadowOffset: {
// width: 0,
// height: 1,
// },
shadowOpacity: 0.25,
shadowRadius: 3.84,
}}>
<TouchableOpacity
style={{
marginStart: 15,
marginEnd: 5,
height: 50,
width: 50,
borderRadius: 25,
overflow: 'hidden',
}}
onPress={() => openProfile(docData)}>
<Image
source={
typ == 'image'
? {uri: docData.filePath}
: require('../../../assets/fe_document.png')
}
style={{height: 50, width: 50, borderRadius: 25}}
resizeMode="cover"
/>
</TouchableOpacity>
<Text style={{flex: 0.6, marginLeft: 10}}>
{docData.comment}
</Text>
{loading === true ? (
<ActivityIndicator size="small" color="blue" />
) : (
<View
style={{
flex: 1,
flexDirection: 'row',
marginStart: 25,
}}>
<TouchableOpacity
style={{
backgroundColor: '#1B6C9A',
width: 40,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={() => openProfile(docData)}>
<Image
source={require('../../../assets/eyebill.png')}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
saveDocument(docData);
}}
style={{
backgroundColor: '#EF983A',
width: 40,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
width: 40,
marginHorizontal: 5,
}}>
<Image source={require('../../../assets/down.png')} />
</TouchableOpacity>
<TouchableOpacity
onPress={() =>
trash(docData.documentId, docData.propertyId)
}
style={{
backgroundColor: '#D05050',
dth: 40,
height: 40,
width: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={require('../../../assets/trashbill.png')}
/>
</TouchableOpacity>
</View>
)}
</View>
);
}}
/>
</View>
)}
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
image: {
height: 100,
width: 100,
borderColor: 'transparent',
},
title: {
width: '80%',
marginStart: 15,
marginTop: 30,
fontWeight: 'bold',
fontSize: 16,
color: '#000000',
},
ortxt: {
color: '#fff',
fontSize: 40,
marginTop: -4,
},
orstyle: {
flex: 0.9,
height: 1,
backgroundColor: '#ccc',
},
orContanier: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 20,
},
txt: {
flex: 1,
fontSize: 13,
// fontWeight: 'bold',
fontFamily: 'Montserrat-Bold',
},
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
// marginTop: 22,
width: '100%',
height: '100%',
backgroundColor: '#000000aa',
},
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 20,
// height: '60%',
width: '80%',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button: {
borderRadius: 10,
padding: 10,
elevation: 2,
paddingHorizontal: 30,
},
buttonOpen: {
backgroundColor: '#F194FF',
},
buttonClose: {
backgroundColor: '#F4B26A',
},
textStyle: {
color: 'white',
// fontWeight: 'bold',
fontFamily: 'Montserrat-Bold',
textAlign: 'center',
},
modalText: {
textAlign: 'center',
// fontWeight: 'bold',
fontFamily: 'Montserrat-Bold',
fontSize: 18,
flex: 1,
},
txtm: {
borderWidth: 1,
width: 150,
height: 40,
marginTop: 10,
marginStart: 10,
flex: 0.7,
},
imgcontainer: {
backgroundColor: '#E3DBDB',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 35,
marginTop: 20,
height: 70,
width: 70,
marginHorizontal: 10,
},
delBtn: {
height: 30,
width: 65,
borderRadius: 15,
marginHorizontal: 20,
backgroundColor: '#1B6C9A',
alignItems: 'center',
justifyContent: 'center',
},
delbtnTxt: {
fontSize: 17,
color: 'white',
fontFamily: 'Montserrat-Bold',
// fontWeight: 'bold',
},
delModView: {
width: '75%',
height: 240,
backgroundColor: 'white',
alignItems: 'center',
borderRadius: 30,
},
});
export default Document;
Editor is loading...