Giter VIP home page Giter VIP logo

react-weather's Introduction

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

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

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

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.

react-weather's People

Contributors

stage88 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-weather's Issues

some question please for help

i have install npm and run ios in xcode
error: /Users/u_wolf/Downloads/react-weather-master/ios/main.jsbundle: No such file or directory
in main.js some code is error
*****type State = {
store: any
};
function setup() {

class Root extends Component {
state: State; *******

ERROR TIPS : Types are not supported by current javaScript version

problem

Hello,I ran your demo,But It showed black screen when I click the setting or the left bottom button,I don't know why. Please help me.

[Error] Error: Error while executing command 'react-native run-ios --simulator': Error while executing command 'react-native run-ios --simulator'

I Clone this repo git clone [email protected]:stage88/react-weather.git
cd react-weather
run npm install
and then type "npm start",after that i wanna debug-ios in vscode ,but it log out "[Error] Error: Error while executing command 'react-native run-ios --simulator': Error while executing command 'react-native run-ios --simulator'".

packager works well.

setting .
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},

do you have idea about it ? thanks.

TypeError

The error I am getting is a TypeError. This error occurs when the code tries to call a function that does not exist. In this case, the code is trying to call the tmpDir() function on the os module, but this function does not exist in newer versions of Node.js.

There are a few ways to fix this error:

Upgrade Node.js to a version that still has the tmpDir() function. This is the most straightforward solution, but it may not be possible if you are using a library that is not compatible with older versions of Node.js.
Use the os.tmpdir() function instead. This function is a newer version of the tmpDir() function and it is still available in newer versions of Node.js.
Use a third-party library to manage temporary files. There are a number of third-party libraries that can be used to manage temporary files. These libraries will provide a function that can be used to create temporary directories.
To determine which solution is best for you, you will need to consider the specific requirements of your project.

Here are the steps on how to fix the error using the os.tmpdir() function:

Open the file node-haste/lib/Cache/index.js and change the line that says var tmpDir = require('os').tmpDir(); to var tmpDir = os.tmpdir();.
Save the file.
Try running the npm start command again.
If you are using a third-party library to manage temporary files, you will need to follow the instructions provided by the library to install and configure it.

":CFBundleIdentifier", Does Not Exist

Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ReactWeather.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.