React Native Weather App With Source Code смотреть онлайн

#react #native #reactnative #WeatherApp #WeatherAppReact

In this Video We are going to implement Weather forecast app with #ReactNative
using openweathermap api
https://openweathermap.org/current

Source Code
https://github.com/SyedMohsinAliZaidi/WeatherAppNative

like and subscribe if you want more of this content

follow me on instagram
https://instagram.com/codingwithzaidi?igshid=1jdu9k0ayywu1

WeatherCondition.js
export const weatherConditions = {
Rain: {
color: '#005BEA',
title: 'Raining',
subtitle: 'Get a cup of coffee',
icon: 'weather-rainy'
},
Clear: {
color: '#f7b733',
title: 'So Sunny',
subtitle: 'It is hurting my eyes',
icon: 'weather-sunny'
},
Thunderstorm: {
color: '#616161',
title: 'A Storm is coming',
subtitle: 'Because Gods are angry',
icon: 'weather-lightning'
},
Clouds: {
color: '#1F1C2C',
title: 'Clouds',
subtitle: 'Everywhere',
icon: 'weather-cloudy'
},

Snow: {
color: '#00d2ff',
title: 'Snow',
subtitle: 'Get out and build a snowman for me',
icon: 'weather-snowy'
},
Drizzle: {
color: '#076585',
title: 'Drizzle',
subtitle: 'Partially raining...',
icon: 'weather-hail'
},
Haze: {
color: '#66A6FF',
title: 'Haze',
subtitle: 'Another name for Partial Raining',
icon: 'weather-hail'
},
Mist: {
color: '#3CD3AD',
title: 'Mist',
subtitle: "Don't roam in forests!",
icon: 'weather-fog'
}
};


Weather.js Css

weatherContainer: {
flex: 1
},
headerContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around'
},
tempText: {
fontSize: 72,
color: '#fff'
},
bodyContainer: {
flex: 2,
alignItems: 'flex-start',
justifyContent: 'flex-end',
paddingLeft: 25,
marginBottom: 40
},
title: {
fontSize: 60,
color: '#fff'
},
subtitle: {
fontSize: 24,
color: '#fff'
}