· 6 years ago · Feb 09, 2019, 07:28 AM
1import React, {Component} from 'react';
2import {Platform, StyleSheet,Alert, Text,TouchableOpacity, View} from 'react-native';
3import { Dropdown } from 'react-native-material-dropdown';
4import ImagePicker from 'react-native-image-picker';
5import DeviceInfo from 'react-native-device-info';
6import { RNS3 } from 'react-native-aws3';
7
8export default class App extends Component<Props> {
9
10 static navigationOptions = {
11 title: 'Check In',
12 };
13 constructor(props) {
14 super(props);
15 this.state = {
16 deviceId: '',
17 isCameraVisiable: false,
18 latitude: null,
19 longitude: null,
20 error: null,
21 serverTime: null,
22 file :'',
23 saveImages : []
24 }
25 }
26
27 handleSubmit(){
28 var date = new Date();
29 var time = date.getTime();
30 console.log(time);
31 // var data = {}
32 // data['time'] = time;
33 Alert.alert('You cliked on send!');
34 }
35
36 getServerTime() {
37 fetch('http://worldclockapi.com/api/json/utc/now')
38 .then((response) => response.json())
39 .then((responseJson) => {
40 if (responseJson) {
41 this.setState({
42 serverTime: responseJson
43 })
44 }
45 console.log(responseJson);
46 })
47 .catch((error) => {
48 console.error(error);
49 });
50 }
51
52 componentDidMount() {
53 navigator.geolocation.getCurrentPosition(
54 (position) => {
55 this.setState({
56 latitude: position.coords.latitude,
57 longitude: position.coords.longitude,
58 error: null,
59 });
60 },
61 (error) => this.setState({ error: error.message }),
62 { enableHighAccuracy: true, timeout: 20000 },
63 );
64 console.log(this.state.longitude);
65 console.log(this.state.error);
66 }
67
68 takePic(){
69 ImagePicker.launchCamera({},(responce)=>{
70 console.log(responce);
71 const file ={
72 uri : responce.uri,
73 name : responce.fileName,
74 method: 'POST',
75 path : responce.path,
76 type : responce.type,
77 notification: {
78 enabled: true
79 }
80 }
81 console.log('fffffffffffffffffffffffffffffffffffffffffffffff');
82 console.log(file);
83 this.state.saveImages.push(file);
84 console.log('=============********************================');
85 console.log(this.state.saveImages);
86 })
87 }
88
89 _upload=(saveImages)=>{
90 const config ={
91 keyPrefix :'uploads/',
92 bucket : 's3merahkee',
93 region :'us-east-2',
94 accessKey:'AKIAII2OTQSLHFW5EYKA',
95 secretKey :'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',
96 successActionStatus :201
97 }
98
99 this.state.saveImages.map((image) => {
100 RNS3.put(image,config)
101 .then((responce) => {
102 console.log('=============********************================');
103 console.log(saveImages);
104 Alert.alert('You cliked on send!');
105 });
106 });
107 }
108 render() {
109 return (
110 <View style={styles.container}>
111 <View style={styles.Camera}>
112 <TouchableOpacity onPress={this.takePic.bind(this)}>
113 <Text>Take Picture</Text>
114 </TouchableOpacity>
115 </View>
116 <View style={styles.Send}>
117 <TouchableOpacity onPress={() => this._upload()}>
118 <Text>Send</Text>
119 </TouchableOpacity>
120 <View>
121 <Text>Latitude: {this.state.latitude}</Text>
122 <Text>Longitude: {this.state.longitude}</Text>
123 <Text>DeviceUniqueId: {DeviceInfo.getUniqueID()}</Text>
124 {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
125 </View>
126 </View>
127 );
128 }
129}
130const styles = StyleSheet.create({
131 container: {
132 flex: 1,
133 backgroundColor: '#F5FCFF',
134 },
135 welcome: {
136 fontSize: 20,
137 textAlign: 'center',
138 margin: 10,
139 },
140 instructions: {
141 textAlign: 'center',
142 color: '#333333',
143 marginBottom: 5,
144 },
145 Dropdown :{
146
147 },
148 Camera :{
149 justifyContent: 'center',
150 alignItems: 'center',
151 marginTop : 20,
152 backgroundColor : '#48a4ff',
153 alignItems : 'center',
154 padding : 1,
155 borderWidth : 1,
156 borderColor : '#48a4ff',
157 },
158 Send :{
159 justifyContent: 'center',
160 alignItems: 'center',
161 marginTop : 20,
162 backgroundColor : '#48a4ff',
163 alignItems : 'center',
164 padding : 3,
165 borderWidth : 1,
166 borderColor : '#48a4ff',
167 }
168});