bruz / react-native-redux-groceries

A simple grocery list app with offline support, built with React Native, Redux, Firebase

Groceries

A simple grocery list app using React Native, Redux, Firebase, and Async Storage for offline data. It works on both iOS and Android.

Install

Built and tested with:

• OS X / macOS
• Node 10
• Xcode 10
• Android SDK

A Firebase account is also needed. The security rules for the database must be set to public, since this app doesn't implement authentication. In the Firebase Console under the Database section, Rules tab, change the rules to:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Run:

git clone https://github.com/bruz/react-native-redux-groceries.git groceries
cd groceries
npm install

Configure:

cp config.js.example config.js

Update config.js with your Firebase app credentials.

Develop

Follow the React Native Getting Started guide.

Build and install on an iOS device

• In the Xcode menu, go to Product -> Scheme -> Edit Scheme..., and under Run change the Build Configuration to Release.
• Choose your device in Xcode and run it on there.

To get back to development mode, just change the Build Configuration back to Debug.

Build and install on an Android device

Follow the React Native APK signing instructions.

Credits

Grocery bag icon by Claire Jones from the Noun Project

react-native-redux-groceries's Issues

undefined is not an object (evaluating RCTNetInfo.getCurrentReachability)

facebook/react-native#4047

getting a red screen with an error when loading the app

Error when updating to React Native 0.30.0

iOS works fine, but on Android updating to React Native 0.30.0 causes the following error when clearing an item from the list: Error while updating property 'transform' of a view managed by: RCTView.

Firebase permission issue?

https://www.dropbox.com/s/tqp515vejikbjah/Screenshot%202016-08-13%2011.46.50.png?dl=0

Example request: Data fetching and Posting to Local server

Hi @bruz , Thanks for this awesome grocery list app, It would me more helpful if you add any example app in react native - redux for post and fetch data form local server.

Thanks in Advance

inializeApp config is referencing in the wrong case

Thanks for the great example - I found this problem in the version I cloned.

Works (my edit)
const firebaseApp = initializeApp({
apiKey: config.apiKey,
authDomain: config.authDomain,
databaseURL: config.databaseURL,
storageBucket: config.storageBucket
})

problem in repo
// const firebaseApp = initializeApp({
// apiKey: config.API_KEY,
// authDomain: config.AUTH_DOMAIN,
// databaseURL: config.DATABASE_URL,
// storageBucket: config.STORAGE_BUCKET
// })

Upgrading to Firebase v3.x

Not an issue as such, but to note that it's very simple and easy to upgrade this to Firebase 3, which supports React Native from 3.1+. Update to new version of firebase in npm and then in Groceries.js the following replace the Firebase references above the component:

import * as firebase from 'firebase'
...
const firebaseConfig = {
    apiKey: “YOURKEY”,
    authDomain: “YOURDOMAIN”,
    databaseURL: “YOURDATABASEURL”,
    storageBucket: "",
  };
const firebaseApp = firebase.initializeApp(firebaseConfig);
const itemsRef = firebaseApp.database().ref()
const connectedRef = firebaseApp.database().ref('.info/connected')

android start fails

ReferenceError: Can't find variable: process (http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:2472)

http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:2472:11
loadModuleImplementation@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:127:8
guardedLoadModule@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:70:32
_require@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:54:18
http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:2093:20
loadModuleImplementation@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:127:8
guardedLoadModule@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:70:32
_require@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:54:18
http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1686:25
loadModuleImplementation@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:127:8
guardedLoadModule@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:70:32
_require@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:54:18
http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1514:26
loadModuleImplementation@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:127:8
guardedLoadModule@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:70:32
_require@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:54:18
http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1498:23
loadModuleImplementation@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:127:8
guardedLoadModule@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:70:32
_require@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:54:18
http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1476:103
loadModuleImplementation@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:127:8
guardedLoadModule@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:63:37
_require@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:54:18
global code@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:59357:9

Authentication example

Hey @bruz thanks for creating this example really helped a lot. Is it possible to make an example for authentication? I found this answer http://stackoverflow.com/a/31328688 but I am new with redux so couldn't handle that.

Doesn't work offline

When I build and install this app on my iPhone, it works fine when online, but when I go into airplane mode, the app displays an "Offline" message at the top but otherwise freezes up. Browsing the code quickly, it seems like it should do something while offline, but I'm not sure what...

Firebase configuratuon?

Hello react-native-redux-groceries,

In the Firebase Console under the Database section, I did Rules tab, changed as readme told.
But offline is displayed at groceries starting,

render() {
console.log('PROPS!')
console.log(this.props)
let items, readonlyMessage
if (this.props.connected) {
items = this.props.onlineItems
} else if (this.props.connectionChecked) {
items = this.props.offlineItems
readonlyMessage = XXXXXX Offline <--- This

Why this occurred?

and add operation is rejected with following message.

Possible unhandled promise Rejection (id:0):
PERMMISION_DENIED:Permission deined

FIREBASE WARNING: set/at/ items/1x1n failed.
Permission denied

Some setting will be needed to fix this. Where is the check point?

Thanks
Shoji Itagaki

Authentication

Hi!
Great example you have 👍
Any idea how to implement authentication?

0 bytes PNG file makes android build error while running "react-native run-android"

Just wanna post it here so anyone who gets the same error knows what to do.

Errors:

`react-native run-android
Scanning 483 folders for symlinks in /usr/local/groceries/node_modules (6ms)
JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
Incremental java compilation is an incubating feature.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library
:app:prepareComAndroidSupportRecyclerviewV72340Library
:app:prepareComAndroidSupportSupportV42340Library
:app:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library
:app:prepareComFacebookFrescoDrawee101Library
:app:prepareComFacebookFrescoFbcore101Library
:app:prepareComFacebookFrescoFresco101Library
:app:prepareComFacebookFrescoImagepipeline101Library
:app:prepareComFacebookFrescoImagepipelineBase101Library
:app:prepareComFacebookFrescoImagepipelineOkhttp3101Library
:app:prepareComFacebookReactReactNative0433Library
:app:prepareComFacebookSoloaderSoloader010Library
:app:prepareOrgWebkitAndroidJscR174650Library
:app:prepareDebugDependencies
:app:compileDebugAidl
:app:compileDebugRenderscript
:app:generateDebugBuildConfig
:app:mergeDebugShaders
:app:compileDebugShaders
:app:generateDebugAssets
:app:mergeDebugAssets
:app:generateDebugResValues
:app:generateDebugResources
:app:mergeDebugResources
AAPT err(Facade for 2040171574) : No Delegate set : lost message:libpng error: Read Error
Error: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException:
:app:mergeDebugResources FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:mergeDebugResources'.

Error: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException:

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.`

Reason: There's an 0 byte png file inside "android/app/src/main/res/mipmap-hdpi/".

How to solve: just remove the ic_launcher.png file

Doesnt Work?

fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Reducers shouldn't have side effects

In this example, the reducer calls a side effect to persist the data.
Instead, you should use store.subscribe() to react to store changes and persist it there.

Unable to resolve module react/lib/ReactUpdates

ios run error:

Unable to resolve module react/lib/ReactUpdates from /Users/xxxx/dev/side/react/react-native-redux-groceries/node_modules/react-native/Libraries/react-native/react-native.js: Module does not exist in the module map or in these directories:
  /Users/xxxx/dev/side/react/react-native-redux-groceries/node_modules/react-native/node_modules/react/lib
,  /Users/xxxx/dev/side/react/react-native-redux-groceries/node_modules/react/lib

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

RCTFatal + 104
-[RCTBatchedBridge stopLoadingWithError:] + 1138
__25-[RCTBatchedBridge start]_block_invoke_2 + 65
_dispatch_call_block_and_release + 12
_dispatch_client_callout + 8
_dispatch_main_queue_callback_4CF + 1054
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
__CFRunLoopRun + 2205
CFRunLoopRunSpecific + 420
GSEventRunModal + 161
UIApplicationMain + 159
main + 111
start + 1

Store and hot reloading

Hey there bruz,

Thanks for the great boilerplate here, so far the most interesting (and easiest) place to start digging into RR + Redux from scratch I've seen 👍

I was wondering if you had any ideas on how to fix the issue of hot-reloading the app, which currently crashes the Simulator every time with:

<Provider> does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

I'm aware of the root cause of the error and I've seen the other reports showing how to fix it (see this issue ) but so far, no luck in getting this fixed... any clues how we'd change your boilerplate?

I've tried adding the following to the configureStore but to no avail:

if (module.hot) {
        module.hot.accept(() => {
            const nextRootReducer = require('../reducers').default;
            store.replaceReducer(nextRootReducer);
        });
    }

Still crashes on every file save, when Hot Reloading is enabled? Any tips? :)

unable to run on android emulator

I cloned and then install npm_module but when i tried to run on my android emulator it is giving a error on config.js. I am uploading the screen-shot also.

Error running with Xcode with release On

No problem running with xcode on debug mode but with release mode, I get the following error:

Undefined symbols for architecture arm64:
"___cxa_begin_catch", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"operator new[](unsigned long)", referenced from:
___39-[RCTJSCExecutor registerNativeRequire]_block_invoke in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor loadRAMBundle:error:] in libReact.a(RCTJSCExecutor.o)
"std::terminate()", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"operator delete", referenced from:
-[RCTJSCExecutor dealloc] in libReact.a(RCTJSCExecutor.o)
___39-[RCTJSCExecutor registerNativeRequire]_block_invoke in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor loadRAMBundle:error:] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor .cxx_destruct] in libReact.a(RCTJSCExecutor.o)
"_gxx_personality_v0", referenced from:
-[RCTJavaScriptContext initWithJSContext:onThread:] in libReact.a(RCTJSCExecutor.o)
-[RCTJavaScriptContext init] in libReact.a(RCTJSCExecutor.o)
-[RCTJavaScriptContext invalidate] in libReact.a(RCTJSCExecutor.o)
RCTNSErrorFromJSError(RCTJSCWrapper, OpaqueJSContext const, OpaqueJSValue const*) in libReact.a(RCTJSCExecutor.o)
+[RCTJSCExecutor runRunLoopThread] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor initWithUseCustomJSCLibrary:] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor context] in libReact.a(RCTJSCExecutor.o)
...
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Why is firebase in Groceries.js?

This is an awesome boilerplate, thanks for sharing it! I am confused why the firebase code is in Groceries.js and not separated into an action creator? I am also curious if there is a reason you did not include a child_changed listener?

I am just digging in, so the answer might become obvious soon