V2 of the react-native client for reactrails.com

.babelrc

@@ -0,0 +1,3 @@
+{
+"presets": ["react-native"]
+}

.eslintrc.yml

@@ -0,0 +1,51 @@
+---
+extends: eslint-config-shakacode
+plugins:
+- react-native
+- flowtype
+env:
+  mocha: true
+  browser: true
+  node: true
+settings:
+  import/resolver:
+    node:
+      extensions:
+      - ".js"
+      - ".android.js"
+      - ".ios.js"
+      moduleDirectory:
+      - ".."
+      - node_modules
+  flowtype:
+    onlyFilesWithFlowAnnotation: true
+globals:
+  __DEV__: true
+  ReactClass: true
+  ReactElement: true
+rules:
+  react-native/no-unused-styles: 2
+  react-native/split-platform-components: 2
+  react-native/no-inline-styles: 2
+  react-native/no-color-literals: 2
+  react/jsx-no-bind: 1
+  react/prefer-stateless-function: 1
+  react/jsx-indent: 1
+  flowtype/require-parameter-type: 1
+  flowtype/require-return-type:
+  - 0
+  - always
+  - annotateUndefined: never
+  flowtype/space-after-type-colon:
+  - 1
+  - always
+  flowtype/space-before-type-colon:
+  - 1
+  - never
+  flowtype/type-id-match:
+  - 1
+  - "^([A-Z][a-z0-9]+)+Type$"
+
+  react/jsx-filename-extension:
+    - 1
+    - extensions: [".js", ".jsx"]

.flowconfig

@@ -1,26 +1,34 @@
 [ignore]
+; We fork some components by platform
+.*/*[.]android.js
 
-# We fork some components by platform.
-.*/*.android.js
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
 
-# Ignore templates with `@flow` in header
-.*/local-cli/generator.*
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
 
-# Ignore malformed json
-.*/node_modules/y18n/test/.*\.json
-.*/node_modules/jsonlint/test/.*\.json
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+.*/node_modules/react-native/Libraries/Components/StaticContainer.js
+
+; https://github.com/aksonov/react-native-router-flux/issues/892#issuecomment-230104301
+.*/node_modules/react-native-experimental-navigation/.*
 
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
 node_modules/react-native/flow
+flow/
 
 [options]
 module.system=haste
 
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
+experimental.strict_type_args=true
 
 munge_underscores=true
 
@@ -31,9 +39,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
+unsafe.enable_getters_and_setters=true
+
 [version]
-^0.22.1
+^0.35.0

.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

.gitignore

@@ -22,12 +22,13 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 
-# Android/IJ
+# Android/IntelliJ
 #
-*.iml
+build/
 .idea
 .gradle
 local.properties
+*.iml
 
 # node.js
 #
@@ -38,4 +39,15 @@ npm-debug.log
 buck-out/
 \.buckd/
 android/app/libs
-android/keystores/debug.keystore
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots

Readme.md

@@ -1,39 +1,64 @@
 ## React Native Tutorial
-This is a simple "Hello world" app in React Native.
-This tutorial shows how to connect to the the http://www.reactrails.com API for a sample microblog.
-Please see https://github.com/shakacode/react-webpack-rails-tutorial for more information on the back end.
+This is a simple mobile app example for posting comments in React Native. It connexts the API at
+https://www.reactrails.com. You can see a web client there, plus links to the source.
 
 ### Setup
 1. Install the latest version of Xcode from AppStore or https://developer.apple.com/download/ (Apple ID required)
 2. Install the latest version of Android Studio from https://developer.android.com/studio/index.html
-3. Install Node JS 4.0 or higher
+3. Install nvm (Node Version Manager)
 
   ```
-  brew install node
+  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
   ```
-4. Install React Native and recommended packages
+
+4. Install NodeJS stable
+
+  ```
+  nvm install node
+  ```
+
+5. Install React Native and recommended packages
 
   ```
   npm install -g react-native-cli
   brew install watchman
   brew install flow
   ```
-5. Clone react-native-tutorial repo. Note, you need to name the directory in PascalCase, per below. The reason is for running the tests with an absolute file path.
 
-  ```
-  git clone [email protected]:shakacode/react-native-tutorial.git ReactNativeTutorial
-  ```
-6. Install dependencies
+6. Install npm dependencies
 
   ```
-  cd react-native-tutorial && npm i
+  npm i
   ```
 
+7. Install Native Dependencies (maybe)
+
+* vector-icons
+
+
+## Customization in Native Files
+
+Besides adding vector-icons
+
+1. App name
+2. Icons, both ios and android
+
+### Android
+
+Android Keystore
+1. Edit `android/app/src/main/AndroidManifest.xml`
+
+
+
 ### Backend API
 
-* Currently connecting by default to http://www.reactrails.com/. Be aware of that!
+* Currently connecting by default to https://www.reactrails.com/. Be aware of that!
+* The url can be changed app/api/index.js. Keep in mind, that Android emulator is
+a separate Virtual Machine with its own localhost binding. To make the api available under that emulator,
+you will have to use ip address of your computer, which can be seen by running `ifconfig` in the shell
 
 ### Running IOS
+
 ```
 react-native run-ios
 ```
@@ -44,18 +69,33 @@ react-native run-ios
   - Run `android sdk` from bash and find installed build tools version there
 2. Run emulator from Android studio or `emulator @<version>` from bash (you can find installed version by running `emulator -list-avds` from bash)
 3. From project folder run
+
 ```
 react-native run-android
 ```
 
 ### Testing
 Testing framework uses mocha + enzyme, to run tests type
+
 ```
 npm test
 ```
 
 ### Linters
 This projects uses Eslint with React and React Native rules. To run linters type
+
 ```
 npm run lint
 ```
+
+
+### Flow
+This projects uses Eslint with React and React Native rules. To run linters type
+
+```
+npm run flow
+```
+
+### Detailed docs
+
+Can be found in `docs` folder. See [Introduction](docs/Introduction.md) to start.

__mocks__/mock.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import _ from 'lodash/fp';
+
+export default (props) => React.createElement(
+  'Mock',
+  _.omit('store', props),
+  props.children,
+);

__mocks__/mockCall.js

@@ -0,0 +1,39 @@
+class MockCall {
+  constructor() {
+    this.queue = [];
+  }
+
+  setMocks(mocks) {
+    this.queue = mocks;
+  }
+
+  getNextMock() {
+    if (!this.queue || !this.queue.length) return undefined;
+    return this.queue.shift();
+  }
+
+  reset() {
+    this.queue = [];
+  }
+}
+
+const mockCall = new MockCall();
+
+// Mocks calls inside a function under test. This function takes several args and
+// stubs the return from call in order of occurence. If no mock were specified
+// it returns underfined
+export const mockCalls = (...args) => mockCall.setMocks(args);
+
+// Clears all mocks for calls
+export const resetMockCalls = () => mockCall.reset();
+
+// The mock call dispatches a fake action to the store with type: 'CALL' and
+// function name and args as parameters.
+const call = ({ dispatch }) => (f, ...args) => {
+  dispatch({ type: 'CALL', name: f.name, args });
+  const mock = mockCall.getNextMock();
+  const result = typeof mock === 'function' ? mock() : mock;
+  return f.then ? Promise.resolve(result) : result;
+};
+
+export default call;

__mocks__/mockThunkMiddleware.js

@@ -0,0 +1,11 @@
+import call from './mockCall';
+
+export const thunkMiddlewareCreator = (callEffect) =>
+  ({ dispatch, getState }) => next => action => {
+    if (typeof action === 'function') {
+      return action(dispatch, getState, callEffect({ dispatch }));
+    }
+    return next(action);
+  };
+
+export default thunkMiddlewareCreator(call);

__mocks__/redux-mock-store.js

@@ -0,0 +1,9 @@
+import configureMockStore from 'redux-mock-store';
+import { initialState as reduxInitialState } from 'ReactRailsApp/app/reducers';
+
+import mockThunkMiddleware from './mockThunkMiddleware';
+
+export const createStoreFromState = configureMockStore([mockThunkMiddleware]);
+export const initialState = reduxInitialState;
+
+export default () => createStoreFromState(initialState);