I only need to add 2 small Android specific things, the keyAction button border radius wouldn't show on the TouchableHighlight and the text inside of the "Screen" wasn't lining up properly. That's really good as everything else was left untouched and just worked out of the box! :+1:

In order to share the same code without needing to just straight copy/paste everything in the *.ios.js files, I created *.native.js files and import them via the individual *.ios/android.js files.

This feels a little messy since it adds so many extra files.

Another way we can do it is to let the plain AppRender.js files be the "native" ones (both for iOS & Android) and rename the Web & NW.js files to something like AppRender.web.js. Doing it this way, we'd have less files but we'd probably have to change the Webpack config & gruntfile to account for the change.

Any thoughts?

If you like this and we come to an agreement on the file structure, then I can fill in the blanks on the README as well. :smiley:

Hi, I managed to successfully run the demo using electron but not with react-native on Android. Here's what I get when trying with react-native run-android

╭─reis@Asakura ~/Documents/Testcode/react-native-nw-react-calculator  ‹master› 
╰─➤  react-native run-android                                            
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42301Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee081Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore081Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco081Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline081Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp081Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0210Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Nexus_5X_API_25_x86(AVD) - 7.1.1'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 9.438 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (adb shell am start -n com.reactnativenwreactcalculator/.MainActivity)...
╭─reis@Asakura ~/Documents/Testcode/react-native-nw-react-calculator  ‹master› 
╰─➤ 

nothing shows on my emulator. I've turned it on via

./emulator -avd Nexus_5X_API_25_x86

Repro steps:

1. git clone https://github.com/benoitvallon/react-native-nw-react-calculator
2. cd react-native-nw-react-calculator
3. npm install
4. npm install (again, per discussion in #3)
5. npm test

Actual results:

koi:✓:react-native-nw-react-calculator>> npm test

> [email protected] test /Users/whitley/src/3p/react-native-nw-react-calculator
> jest

Using Jest CLI v0.9.0, jasmine2

Error: Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: xhrSimpleDataSerializer
  Paths: /Users/whitley/src/3p/react-native-nw-react-calculator/node_modules/react-native/node_modules/fbjs/lib/xhrSimpleDataSerializer.js collides with /Users/whitley/src/3p/react-native-nw-react-calculator/node_modules/flux/node_modules/fbjs/flow/include/xhrSimpleDataSerializer.js

This error is caused by a @providesModule declaration with the same name accross two different files.

This is most likely a setup or configuration issue. To resolve a module name collision, change or blacklist one of the offending modules. See http://facebook.github.io/jest/docs/api.html#config-modulepathignorepatterns-array-string
npm ERR! Test failed.  See above for more details.

I've tried to repro with both node v5.5.0 (npm v3.3.12) and node v5.7.0 (npm v3.6.0), with the same error each time.

FWIW, I ended up here after having similar naming collision errors plaguing my attempts to bring up jest-based tests in a new RN project I'm working on. (BTW, thanks a LOT for including tests here. Very few public RN projects seem to bother.) I'm at a loss as to what could be causing this, aside from it being at least superficially related to facebook/react-native#3625 and facebook/react-native#3618. But those have been hanging around for some time, meanwhile the discussion on issues and PRs here suggest that the tests have been running well for you and others.

Any ideas?

Problem:

Not possible to use keyboard in web version.

Solution:

I added hidden component KeyboardHandler which handle keyboard input. This component rendered in AppRender component. KeyboardHandler uses data from keyCodes.json in constants folder.

Result:

Now it is possible to interact with calculator by keyboard.

Hi, Could you explain how build tools 'knows' which files to import? For example when you use import Render from './KeyRender'; how it knows if choose KeyRender.js, KeyRender.android.js or KeyRender.ios.js? I can't find place where it's configured. For example when I want to change suffixes from .android.js to .myandroid.js which config should I edit?

EDIT: Ok, I think I found it: https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions So react-native uses .android.js or .ios.js files (if exists - if not rn uses .js files) Webpack (used for desktop and web) uses .js files

Please, add demo to show the running application.

After https://github.com/benoitvallon/react-native-nw-react-calculator/pull/15 's merge,

npm run build
cd dist
git init && git add . && git commit -m "Pages"
git remote add github [email protected]:benoitvallon/react-native-nw-react-calculator.git
git push -f github master:gh-pages

I tried it on my side. my demo my branch

I have just updated the end of the readme file and I believe that sky color is not suitable for the background color in-app have to update that soon. Thanks

previous method does not allow flexible import of "CalculatorActions" in other components we strictly had to import "CalculatorActions" with the same name but the changes made allow us to import CalculatorActions with any name in any component

ESLInt has updated to v2 and there're some significant changes (http://eslint.org/docs/user-guide/migrating-to-2.0.0#language-options). There're some ESLint warning with the current .eslintrc and update the option will solve those warnings.

when i execute npm run build: throw the error: `WARNING in main.js from UglifyJs Condition always true [./~/react/lib/ReactMount.js:764,0] Dropping side-effect-free statement [./~/react-router/lib/deprecateObjectProperties.js:65,0] Side effects in initialization of unused variable _ret [./~/react-router/lib/deprecateObjectProperties.js:63,0] Condition always true [./~/react/lib/findDOMNode.js:46,0] Condition always true [./~/react/lib/instantiateReactComponent.js:80,0] Dropping unreachable code [./~/react/lib/shouldUpdateReactComponent.js:40,0] Condition always true [./~/react/lib/traverseAllChildren.js:158,0] Condition always true [./~/react-router/lib/Redirect.js:97,0] Condition always false [./~/style-loader/addStyles.js:24,0] Dropping unreachable code [./~/style-loader/addStyles.js:25,0] Dropping unused variable r [./~/es6-promise/dist/es6-promise.js:130,0] Condition left of && always true [./~/es6-promise/dist/es6-promise.js:944,0] Dropping unused function lib$es6$promise$utils$$isMaybeThenable [./~/es6-promise/dist/es6-promise.js:19,0] Condition always true [./~/history/lib/createMemoryHistory.js:67,0] Condition always true [./~/react-router/lib/IndexRedirect.js:58,0] Condition always true [./~/react-router/lib/IndexRoute.js:55,0] Condition always true [./~/react-router/lib/Route.js:50,0] Dropping side-effect-free statement [./~/react-router/lib/getComponents.js:56,0] Side effects in initialization of unused variable _ret [./~/react-router/lib/getComponents.js:54,0] Condition always true [./~/react/lib/ReactDOMComponent.js:907,0] Dropping side-effect-free statement [./~/react/lib/ReactEventListener.js:72,0] Dropping unused function handleTopLevelWithPath [./~/react/lib/ReactEventListener.js:98,0] Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [./~/react/lib/ReactEventListener.js:26,0] Condition always false [./~/style-loader!./~/css-loader!./~/normalize.css/normalize.css:10,0] Dropping unreachable code [./~/style-loader!./~/css-loader!./~/normalize.css/normalize.css:12,0] Side effects in initialization of unused variable update [./~/style-loader!./~/css-loader!./~/normalize.css/normalize.css:7,0] Condition always false [./~/style-loader!./~/css-loader!./src/styles/main.css:10,0] Dropping unreachable code [./~/style-loader!./~/css-loader!./src/styles/main.css:12,0] Side effects in initialization of unused variable update [./~/style-loader!./~/css-loader!./src/styles/main.css:7,0]

ERROR in Cannot find module 'postcss-filter-plugins' @ ./src/styles/main.css 4:14-78

ERROR in Cannot find module 'postcss-filter-plugins' @ ./~/normalize.css/normalize.css 4:14-67 Warning: Task "webpack:dist" failed. Use --force to continue.

Aborted due to warnings.

npm ERR! Darwin 15.0.0 npm ERR! argv "/Users/admin/.nvm/versions/node/v5.6.0/bin/node" "/Users/admin/.nvm/versions/node/v5.6.0/lib/node_modules/cnpm/node_modules/.bin/npm" "--userconfig=/Users/admin/.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=https://registry.npm.taobao.org" "run" "build" npm ERR! node v5.6.0 npm ERR! npm v3.8.6 npm ERR! code ELIFECYCLE npm ERR! [email protected] build: grunt build npm ERR! Exit status 3 npm ERR! npm ERR! Failed at the [email protected] build script 'grunt build'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the ReactNativeNWReactCalculator package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! grunt build npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs ReactNativeNWReactCalculator npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls ReactNativeNWReactCalculator npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /Users/admin/Desktop/react-native-nw-react-calculator-master/npm-debug.log `

Bumps eslint from 2.13.1 to 6.6.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I am unable to create an equation which involves more than one operator. When I type 3+3, then click * to try to do 3+3*3, it just replaces the + with a . Making the equation 33 and giving me the answer 9.