f-x-dx / react-weather

A simple weather app built with React Native and Realm

React Weather

A simple weather app built with React Native

Inspiration

I wanted to learn how to make apps using React Native. Instead of inventing an app, I wanted to try and see how hard would it be to implement one of my favourite weather apps: Pocket Weather Australia. Full credits for user experience goes to them.

The app architecture/structure is mostly based on ideas I've seen in the Facebook's F8 app. You can read more about it on their web site: http://makeitopen.com/.

Development stack

• Flow was enabled to catch typing errors in React Native JavaScript code
• Realm for React Native is used to persist data
• I used Nuclide and Visual Studio Code on OSX, both have great support for React Native app development
• I used git for version control, and stored progress on GitHub.
• Currently only tested on an iOS device

APIs

• Weather data is retrieved from http://openweathermap.org/
• Australia postcode and suburb data is retrieved from http://postcodeapi.com.au/
• You can see examples of API data in react-weather/api

Note about API data

The weather data retrived from Open Weather is not very accurate. Most of the time, the weather forecast is not correct. The most reliable Australian weather data is hosted by Australian Bureau of Meteorology, however it is not very API friendly.

External packages

• react-native-parallax-scroll-view: A ScrollView-like component with parallax and sticky header support. I use a customised version of the component to modify behaviour of animations.
• react-swipeable-views: A React component for swipeable views

Weather images

Images are used without permission from Google Weather, for example: Canberra Weather.

Current progress

• App skeleton
• Basic UI prototype
• Call weather APIs for data
• Add React Redux, implement store
• Create first actions, reducers
• Implement weather service
• Add scroll view animations
• Add pull to refresh
• Implement basic settings UI prototype with navigation
• Create location and weather repositories backed by Realm
• Create settings repositories backed by Realm
• Call Australian postcode APIs when adding locations
• Add support for Android devices

Pocket Weather	React Weather

Running

Clone & install

• Clone this repo git clone [email protected]:stage88/react-weather.git
• cd react-weather
• run npm install

API keys

• Get your API key from http://openweathermap.org/
• No key is required to use http://postcodeapi.com.au/
• Create a new file release/keys.js:

module.exports = {
	weatherApiKey: 'YOUR_KEY_HERE'
};

iOS

• Open ReactWeather.xcodeproj in XCode
• Press cmd+r to build it

Android

• Run android avd and start an emulator
• Run react-native run-android

License

Released under the MIT License.

Feedback

Feedback is always welcome. Feel free to contact me, I would love to know if you notice something that can be done better. Please be nice, this is my first React Native app.