pors / reactionic-kitchensink

Kitchen Sink Demo for React-Ionic

React-Ionic Demo

This repository contains a "kitchen sink" demo for the React-Ionic library.

It shows the features of the library in a single app and can also be used as a starting point for your own app.

Table of Contents

• About React-Ionic
• Installation for Meteor
  • Prerequisites
  • Install, build and run
• Installation with Webpack
  • Prerequisites
  • Install, build and run
• Next Steps

About React-Ionic

React-Ionic is a library that allows you to create modern hybrid apps for both iOS and Android. It combines the power of React with the robustness of Ionic.

Read more about React-Ionic here.

The actual library can be found here.

The kitchen sink demo app can be installed in a number of ways, here we show you two options:

• Installation for Meteor.
• Installation with Webpack.

Let me know if you are looking to use the library in another way: mark (a) pors (dot) net.

Installation for Meteor

Prerequisites

You need to have a global installation of node and npm. The commands below should result in something like this:

$ node -v
v4.3.1

$ npm -v
3.7.5

If you have an old version or it is not installed at all follow the instructions here: nodejs.org

And of course Meteor needs to be installed. If you haven't installed it yet, here is how: meteor.com

Install, build and run

Installation is straightforward:

• Download the zip file here
• Unzip the file

Then in a terminal:

cd reactionic-kitchensink
npm install
cd app
meteor run

Note that this installation relies on Meteor 1.3 (with npm package support). Installation for an older version of Meteor is also possible, but needs some more work. Let me know if you are interested in this (see my email above).

Installation with Webpack

Prerequisites

You need to have a global installation of node and npm. The commands below should result in something like this:

$ node -v
v4.3.1

$ npm -v
3.7.5

If you have an old version or it is not installed at all follow the instructions here: nodejs.org

You also need a global installation of webpack and webpack-dev-server, check if you have it like this:

$ webpack 2>&1 >/dev/null | head -1
webpack 1.12.14

$ webpack-dev-server --help 2>&1 >/dev/null | head -1
webpack-dev-server 1.14.1

If needed these packages can be installed with:

sudo npm install webpack webpack-dev-server -g

Or without the sudo, depending on your setup.

Install, build and run

Installation is straightforward:

• Download the zip file here
• Unzip the file

Then in a terminal:

cd reactionic-kitchensink
npm install
webpack
webpack-dev-server --content-base build

Next Steps

The source code of the kitchen sink demo should help you create your own app.

Also have a look at the guide for more detail.

reactionic-kitchensink's Issues

Router PropTypes Call is not correct

Im pretty sure the Router wont work for React 0.16 , because of:

https://facebook.github.io/react/warnings/dont-call-proptypes.html

I have updated a project to 0.15.3 with a similar router structure and Im getting the warnings, tomorrow or on sunday ill fix it anyway. but if someone knows how do it, He can fix it. Im an beginner coder, so ill probably need a bit.

To reproduce the warning, just update to 0.15.3 react!

Run on window very slow

Hi Pros,

I try run "meteor run" on window 7 64 bit, it go to download and update meteor to version 1.3-rc.10. I wait about 3 hours but it still downloading. Can you give a advice for me ?

Thanks

error on IOS Simulator

The Web app runs fine. But when run in the Simulator I get the errors below in the console. The Simulator does run fine but the server is down....

reactionicKitchen cd app
➜ app meteor run
[[[[[ ~/projects/reactionicKitchen/app ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/
^C <----- me stopping the server
➜ app meteor run ios
[[[[[ ~/projects/reactionicKitchen/app ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/
=> Started app on iOS Simulator.
{ [Error: UNKNOWN, unknown error '/private/var/folders/5g/5d_ngcg9341440n3bw2ld6380000gn/T/cordova-template-tppxhu']
errno: -1,
code: 'UNKNOWN',
path: '/private/var/folders/5g/5d_ngcg9341440n3bw2ld6380000gn/T/cordova-template-tppxhu',
syscall: 'readdir' }

/Users/paul/.meteor/packages/fourseven_scss/.3.4.3.1shl2zr++os.osx.x86_64+web.browser+web.cordova/plugin.compileScssBatch.os.osx.x86_64/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:116
throw error;
^
Error: UNKNOWN, open '/Users/paul/projects/reactionicKitchen/app/node_modules/fbjs/lib/emptyObject.js'
➜ app

react-addons-pure-render-mixin not included in package.json

Back button has wrong transition

When using the back button, it has the forward animation.

Issue when build app with meteor

Hello guys,

I have the issue like below, please help me fix it. Thanks you.

C:\Users\tle221\Desktop\reactionic-kitchensink\app>meteor run
[[[[[ C:\Users\tle221\Desktop\reactionic-kitchensink\app ]]]]]

=> Started proxy.
=> Started MongoDB.

C:\Users\tle221\AppData\Local.meteor\packages\meteor-tool\1.3.0_3\mt-os.windows.x86_32\dev_bundle\l
ib\node_modules\meteor-promise\promise_server.js:116
throw error;
^
Error: No metadata files found for isopack at: /C/Users/tle221/AppData/Local/.meteor/packages/fourse
ven_scss/3.4.1
at Isopack.loadUnibuildsFromPath (C:\tools\isobuild\isopack.js:903:13)
at C:\tools\packaging\tropohouse.js:514:19
at Array.forEach (native)
at Function..each..forEach (C:\Users\tle221\AppData\Local.meteor\packages\meteor-tool\1.3.0_3
\mt-os.windows.x86_32\dev_bundle\lib\node_modules\underscore\underscore.js:79:11)
at C:\tools\packaging\tropohouse.js:513:11
at C:\tools\utils\buildmessage.js:359:18
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:352:34
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:350:23
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at Object.enterJob (C:\tools\utils\buildmessage.js:324:26)
at Object.download (C:\tools\packaging\tropohouse.js:448:20)
at C:\tools\packaging\tropohouse.js:593:22
at C:\tools\utils\buildmessage.js:359:18
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:352:34
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:350:23
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at Object.enterJob (C:\tools\utils\buildmessage.js:324:26)
at [object Object].downloadPackagesMissingFromMap (C:\tools\packaging\tropohouse.js:590:20)
at C:\tools\project-context.js:725:25
at C:\tools\utils\buildmessage.js:359:18
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:352:34
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:350:23
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at Object.enterJob (C:\tools\utils\buildmessage.js:324:26)
at C:\tools\project-context.js:724:20
at C:\tools\packaging\catalog\catalog.js:100:5
at C:\tools\utils\buildmessage.js:271:13
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:264:29
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:262:18
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:253:23
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at Object.capture (C:\tools\utils\buildmessage.js:252:19)
at Object.catalog.runAndRetryWithRefreshIfHelpful (C:\tools\packaging\catalog\catalog.js:99:31)
at ProjectContext..extend._downloadMissingPackages (C:\tools\project-context.js:723:13)
at C:\tools\project-context.js:278:9
at C:\tools\utils\buildmessage.js:359:18
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:352:34
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:350:23
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at Object.enterJob (C:\tools\utils\buildmessage.js:324:26)
at ProjectContext._completeStagesThrough (C:\tools\project-context.js:268:18)
at C:\tools\project-context.js:260:12
at Function.run (C:\tools\tool-env\profile.js:489:12)
at ProjectContext.prepareProjectForBuild (C:\tools\project-context.js:259:13)
at C:\tools\runners\run-app.js:557:29
at C:\tools\utils\buildmessage.js:271:13
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:264:29
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:262:18
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at C:\tools\utils\buildmessage.js:253:23
at [object Object].withValue (C:\tools\utils\fiber-helpers.js:89:14)
at Object.capture (C:\tools\utils\buildmessage.js:252:19)
at bundleApp (C:\tools\runners\run-app.js:556:31)
at AppRunner._runOnce (C:\tools\runners\run-app.js:634:35)
at AppRunner._fiber (C:\tools\runners\run-app.js:887:28)
at C:\tools\runners\run-app.js:411:12`

"Errors prevented startup"

C:\Users\User\Desktop\reactionic-kitchensink\app>meteor run
[[[[[ C:\Users\User\Desktop\reactionic-kitchensink\app ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:

While checking for mrt:[email protected]:
error: No compatible binary build found for this package. Contact the
package author and ask them to publish it for your platform.

=> Your application has errors. Waiting for file change.

All icons disappear!

I have just downloaded and ran this example by following the README, and it seems that all icons disappear!

Can i set the header title by a DB Call or by a HTTP Get

On my current app, im having views where the title in the navbar is set by a DB Call or a http request. Since the content component is wrapped inside a layout component im not quite sure where to ask for data.

I could either call the db in the layout component, which would lead to unnecessary db calls, or I could call for the data 2 times. How would you do it?

Problem when updating meteor

When updating meteor to 1.3.4.1 and try to launch the app, I get the following error:

=> Errors prevented startup:

   While processing files with fourseven:scss (for target web.browser):
   /client/styles/app.scss: Scss compiler error: Object [object Object] has no method 'existsSync'

Error on new build / installation

I haven't gotten to try it out yet because when I run webpack I get this error:

ERROR in .//css-loader!.//sass-loader!./app/client/styles/app.scss
Module build failed:
@import "{}/node_modules/reactionic/dist/scss/styles/reactionic.scss";
^
File to import not found or unreadable: {}/node_modules/reactionic/dist/scss/styles/reactionic.scss

Parent style sheet: stdin
in /Users/leslyb/Dev/eventtabs/mobile/reactionic-kitchensink-master/app/client/styles/app.scss (line 6,
column 1)
@ ./app/client/styles/app.scss 4:14-126

Any thoughts?

How to build the app?

Ok, this might sound stupid.
Following the readme everything works fine so far and after solving #24 it's running in the browser.
What I don't understand is how to actually include ionic now, how to build the app, etc.

Thanks.

Is React-Ionic still supported?

I know you are checking your issues, so im asking here. Do you know if react-ionic is still supported? The latest update is about 40 days old. Im not sure if the framework is still maintained. Have you thought about taking it over?

Binding Data from Mongodb

How to do binding data from mongo db ?

Thanks :)

Unable to resolve some modules & Error prevented Startup

npm install
gave
npm WARN optional Skipping failed optional dependency /chokidar/fsevents: npm WARN notsup Not compatible with your operating system or architecture: [email protected]
which is fine as I believe that's specific to OSX and I am on Windows 7.

meteor run
gave

=> Started proxy.
=> Started MongoDB.

Unable to resolve some modules:

  "react" in /C/Users/Amin/kitchensink/app/client/imports/components/layouts/main.jsx (web.browser)
  "react-dom" in /C/Users/Amin/kitchensink/app/client/router.jsx (web.browser)
  "lodash" in /C/Users/Amin/kitchensink/app/client/imports/components/layouts/main.jsx (web.browser)
  "react-router" in /C/Users/Amin/kitchensink/app/client/imports/components/layouts/main.jsx (web.browser)
  "reactionic" in /C/Users/Amin/kitchensink/app/client/imports/components/layouts/main.jsx (web.browser)
  "classnames" in /C/Users/Amin/kitchensink/app/client/imports/components/tabs.jsx (web.browser)

If you notice problems related to these missing modules, consider running:

  meteor npm install --save react react-dom lodash react-router reactionic classnames

=> Errors prevented startup:

   While processing files with fourseven:scss (for target web.browser):
   /client/styles/app.scss: Scss compiler error: File to import:
   /C/Users/Amin/kitchensink/app/node_modules/reactionic/dist/scss/styles/reactionic.scss not found in file:
   C:/Users/Amin/kitchensink/app/{}/client/styles/app.scss


=> Your application has errors. Waiting for file change.

In the above, I am not sure how to fix:
a) Unable to resolve some modules
b) Error prevented startup

As it suggests in the previous output, I ran
meteor npm install --save react react-dom lodash react-router reactionic classnames
but gives

npm ERR! tar.unpack untar error C:\Users\Amin\AppData\Roaming\npm-cache\react-dom\15.1.0\package.tgz
npm ERR! tar.unpack untar error C:\Users\Amin\AppData\Roaming\npm-cache\react\15.1.0\package.tgz
npm ERR! tar.unpack untar error C:\Users\Amin\AppData\Roaming\npm-cache\lodash\4.13.1\package.tgz
npm ERR! tar.unpack untar error C:\Users\Amin\AppData\Roaming\npm-cache\classnames\2.2.5\package.tgz
npm ERR! tar.unpack untar error C:\Users\Amin\AppData\Roaming\npm-cache\reactionic\1.1.2\package.tgz
npm ERR! tar.unpack untar error C:\Users\Amin\AppData\Roaming\npm-cache\react-router\2.4.1\package.tgz
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Users\\Amin\\AppData\\Local\\.meteor\\packages\\meteor-tool\\1.3.2_4\\mt-os.windows.x86_32\\dev_bundle\\bin\\\\node.exe" "C:\\Users\\Amin\\AppData\\Local\\.meteor\\packages\\meteor-tool\\1.3.2_4\\mt-os.windows.x86_32\\dev_bundle\\lib\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save" "react" "react-dom" "lodash" "react-router" "reactionic" "classnames"
npm ERR! node v0.10.43
npm ERR! npm  v2.14.22
npm ERR! path C:\Users\Amin\kitchensink\app\node_modules
npm ERR! code EEXIST
npm ERR! errno 47

npm ERR! EEXIST, mkdir 'C:\Users\Amin\kitchensink\app\node_modules'
File exists: C:\Users\Amin\kitchensink\app\node_modules
Move it away, and try again.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Amin\kitchensink\app\npm-debug.log

npm-debug.log attached (with many other attempts) after renaming file extension to .txt
npm-debug.txt

node version

Will node versions above 4.3.1 be a problem?
I'm running 5.5.0...

Cannot read property 'headerTitle' of undefined

download the zip file

cd reactionic-kitchensink
npm install
cd app
meteor run

i got an error, in app.js look for
title: currentPageProps.headerTitle

using
node v4.3.1
npm v3.10.5
Meteor 1.3.2.4