Skip to content

Commit 75b74b9

Browse files
jsphkhanjsphkhan
committed
Initial commit for Weather App
1 parent 2beba21 commit 75b74b9

File tree

25 files changed

+704
-113
lines changed

25 files changed

+704
-113
lines changed

‎SimpleWeatherApp/index.ios.js

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎SimpleWeatherApp/.flowconfig renamed to ‎ios/WeatherApp/.flowconfig

File renamed without changes.

‎SimpleWeatherApp/.gitignore renamed to ‎ios/WeatherApp/.gitignore

File renamed without changes.

‎ios/WeatherApp/App/API/api.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
//API Courtesy: OpenWeatherMap - http://openweathermap.org
2+
//Weather Conditions - http://openweathermap.org/weather-conditions
3+
4+
var api = {
5+
baseUrl: "http://api.openweathermap.org/data/2.5/",
6+
dailyForecastUrl: "forecast/daily",
7+
currentWeatherUrl: "weather",
8+
//url: 'http://localhost:8888/joseph/react-native-try/SampleWeatherApp/response1.json',
9+
key: '', //API Key is not required, but recommened by API provider. Put Your API key here
10+
getDailyForecastUrl: function() {
11+
return this.baseUrl + this.dailyForecastUrl;
12+
},
13+
getCurrentWeatherUrl: function() {
14+
return this.baseUrl + this.currentWeatherUrl;
15+
//return this.url;
16+
}
17+
}
18+
19+
module.exports = api;

‎ios/WeatherApp/App/Components/DegreeComponent.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict'
2+
3+
var React = require('react-native');
4+
5+
var {
6+
View,
7+
StyleSheet
8+
} = React;
9+
10+
var DegreeComponent = React.createClass({
11+
render: function() {
12+
return (
13+
<View style={[styles.degree, this.props.style]}></View>
14+
);
15+
}
16+
});
17+
18+
var styles = StyleSheet.create({
19+
degree: {
20+
borderColor: 'black',
21+
backgroundColor: 'transparent',
22+
borderWidth: 1
23+
}
24+
});
25+
26+
module.exports = DegreeComponent;

‎ios/WeatherApp/App/Components/HUDActivityIndicator.ios.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
'use strict';
2+
3+
var React = require('react-native');
4+
var Dimensions = require('Dimensions');
5+
var {width, height} = Dimensions.get('window');
6+
7+
var {
8+
ActivityIndicatorIOS,
9+
StyleSheet,
10+
View,
11+
} = React;
12+
13+
14+
/**
15+
* ProgressHUD-like animated indicator
16+
* animates everytime, should be added/removed to/from superview
17+
*/
18+
var HUDActivityIndicator = React.createClass({
19+
render: function() {
20+
return (
21+
<View style={styles.hudCenter}>
22+
<ActivityIndicatorIOS
23+
size="large"
24+
color="white"
25+
style={styles.indicator}
26+
/>
27+
</View>
28+
);
29+
},
30+
});
31+
32+
var styles = StyleSheet.create({
33+
indicator: {
34+
width: 100,
35+
height: 100,
36+
backgroundColor: 'rgba(0, 0, 0, 0.9)',
37+
borderRadius: 10,
38+
},
39+
hudCenter: {
40+
position: 'absolute',
41+
alignItems: 'center',
42+
justifyContent: 'center',
43+
height: height,
44+
width: width,
45+
top: 0,
46+
backgroundColor: 'transparent'
47+
},
48+
});
49+
50+
module.exports = HUDActivityIndicator;

‎ios/WeatherApp/App/Utils/utils.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* Utility properties and methods */
2+
var Utils = {
3+
days: {
4+
"0":"Sun",
5+
"1":"Mon",
6+
"2":"Tue",
7+
"3":"Wed",
8+
"4":"Thu",
9+
"5":"Fri",
10+
"6":"Sat"
11+
},
12+
months: {
13+
"0":"Jan",
14+
"1":"Feb",
15+
"2":"Mar",
16+
"3":"Apr",
17+
"4":"May",
18+
"5":"Jun",
19+
"6":"Jul",
20+
"7":"Aug",
21+
"8":"Sep",
22+
"9":"Oct",
23+
"10":"Nov",
24+
"11":"Dec"
25+
},
26+
convertToCelcius: function(tempKelvin) {
27+
return (tempKelvin - 273.15).toFixed(1);
28+
},
29+
getIconUrl: function(icon) {
30+
//icon .pngs placed in github io repo
31+
return "http://jsphkhan.github.io/ReactNativeWeatherApp/assets/icons/" + icon + ".png";
32+
}
33+
};
34+
35+
module.exports = Utils;

‎ios/WeatherApp/App/Views/ForecastView.js

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/* Forecast View Component */
2+
3+
'use strict'
4+
5+
var React = require('react-native'),
6+
DegreeComponent = require('../Components/DegreeComponent'),
7+
Utils = require('../Utils/utils');
8+
9+
var {
10+
StyleSheet,
11+
View,
12+
Text,
13+
Image,
14+
ListView
15+
} = React;
16+
17+
18+
var ForecastView = React.createClass({
19+
getInitialState: function() {
20+
var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.dt !== r2.dt});
21+
return {
22+
dataSource: dataSource.cloneWithRows(this.props.data)
23+
}
24+
},
25+
formatDateTime: function(unixTimeStamp) {
26+
var jsTimeStamp = unixTimeStamp*1000,
27+
date = new Date(jsTimeStamp);
28+
29+
return {
30+
day: Utils.days[date.getDay()].toUpperCase(),
31+
dateMonth: date.getDate() + " " + Utils.months[date.getMonth()]
32+
}
33+
},
34+
getMaxMinTemp: function(tempObj) {
35+
return {
36+
maxTemp: Utils.convertToCelcius(tempObj.max),
37+
minTemp: Utils.convertToCelcius(tempObj.min)
38+
}
39+
},
40+
renderRow: function(rowData, sectionId, rowId) {
41+
var formattedDate = this.formatDateTime(rowData.dt),
42+
maxMinTemp = this.getMaxMinTemp(rowData.temp);
43+
return (
44+
<View>
45+
<View style={styles.container}>
46+
<View style={styles.dateContainer}>
47+
<Text style={styles.darkText}>{formattedDate.day}</Text>
48+
<Text style={styles.lightText}>{formattedDate.dateMonth}</Text>
49+
</View>
50+
<Image style={styles.icon} source={{ uri: Utils.getIconUrl(rowData.weather[0].icon)}}/>
51+
<View>
52+
<View style={styles.tempContainer}>
53+
<Text style={styles.darkText}>{maxMinTemp.maxTemp}</Text>
54+
<Text style={styles.darkText}>/</Text>
55+
<Text style={[styles.darkText, styles.slightMargin]}>{maxMinTemp.minTemp}</Text>
56+
<DegreeComponent style={{width:6, height: 6, borderRadius: 3, marginTop: -10}}></DegreeComponent>
57+
<Text style={styles.darkText}>C</Text>
58+
</View>
59+
<Text style={styles.lightText}>Forecast: {rowData.weather[0].description}</Text>
60+
<Text style={styles.lightText}>Humidity: {rowData.humidity}%</Text>
61+
</View>
62+
</View>
63+
<View style={styles.separator}/>
64+
</View>
65+
);
66+
},
67+
render: function() {
68+
return (
69+
<ListView style={styles.listContainer} dataSource={this.state.dataSource} renderRow={this.renderRow}/>
70+
);
71+
}
72+
});
73+
74+
75+
var styles = StyleSheet.create({
76+
listContainer: {
77+
backgroundColor: '#f2f2f2'
78+
},
79+
container: {
80+
flex: 1,
81+
paddingLeft: 20,
82+
paddingRight: 20,
83+
paddingTop: 10,
84+
paddingBottom: 10,
85+
flexDirection: 'row',
86+
justifyContent: 'flex-start',
87+
alignItems: 'center', //flex-start, flex-end, center, stretch
88+
},
89+
dateContainer: {
90+
alignItems: 'center',
91+
marginRight: 20
92+
},
93+
separator: {
94+
height: 1,
95+
backgroundColor: '#dddddd'
96+
},
97+
icon: {
98+
width: 75,
99+
height: 75,
100+
marginRight: 20
101+
},
102+
tempContainer: {
103+
flexDirection: 'row',
104+
alignItems: 'center',
105+
justifyContent: 'flex-end'
106+
},
107+
darkText: {
108+
fontSize: 18
109+
},
110+
lightText: {
111+
color: "#9a9a9a"
112+
},
113+
slightMargin: {
114+
marginRight: 1
115+
}
116+
});
117+
118+
module.exports = ForecastView;

0 commit comments

Comments
 (0)