react-native: create SuspendResume sample

Author: jaimecbernardo

README.md

@@ -5,4 +5,4 @@ This is a collection of samples showcasing the use of [Node.js on Mobile](https:
 It contains the following samples:
 * Android: [Native Gradle Sample](https://github.com/janeasystems/nodejs-mobile-samples/tree/master/android/native-gradle)
 * iOS: [Native Xcode Sample](https://github.com/janeasystems/nodejs-mobile-samples/tree/master/ios/native-xcode)
-
+* React-Native: [Suspend Resume Sample](https://github.com/janeasystems/nodejs-mobile-samples/tree/master/react-native/SuspendResume)

ios/native-xcode/README.md

@@ -12,7 +12,7 @@ To run the sample on iOS you need:
 
 ## How to run
  - Clone this project.
- - Download the Node.js on Mobile shared library from [here](https://github.com/janeasystems/nodejs-mobile/releases/download/nodejs-mobile-v0.1.1/nodejs-mobile-v0.1.1-ios.zip).
+ - Download the Node.js on Mobile shared library from [here](https://github.com/janeasystems/nodejs-mobile/releases/download/nodejs-mobile-v0.1.2/nodejs-mobile-v0.1.2-ios.zip).
  - Copy the `libnode.framework` file inside the zip to this project's `libnode/` folder (there's a `copy-libnode.framework-here` empty file inside the project's folder for convenience).
  - In Xcode import the `ios/native-xcode/native-xcode.xcodeproj` project.
  - Select one physical iOS device as the run target.
@@ -40,7 +40,7 @@ Using the Xcode 9's "Create a new Xcode Project" wizard, create a new Project wi
 #### Copy `libnode.framework` to the project structure:
 
 Create the `libnode/` folder path in the project's root folder, next to the `native-xcode.xcodeproj` package.
-Download the [Node.js on Mobile release](https://github.com/janeasystems/nodejs-mobile/releases/download/nodejs-mobile-v0.1.1/nodejs-mobile-v0.1.1-ios.zip), unzip it and copy `libnode.framework` to `libnode/`.
+Download the [Node.js on Mobile release](https://github.com/janeasystems/nodejs-mobile/releases/download/nodejs-mobile-v0.1.2/nodejs-mobile-v0.1.2-ios.zip), unzip it and copy `libnode.framework` to `libnode/`.
 
 #### Embed the `libnode.framework` in the binary.
 

react-native/SuspendResume/.babelrc

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

react-native/SuspendResume/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

react-native/SuspendResume/.flowconfig

@@ -0,0 +1,45 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; 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
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.49.1

react-native/SuspendResume/.gitattributes

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

react-native/SuspendResume/.gitignore

@@ -0,0 +1,53 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.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

react-native/SuspendResume/.watchmanconfig

@@ -0,0 +1 @@
+{}

react-native/SuspendResume/README.md

@@ -0,0 +1,148 @@
+# React Native Suspend Resume Sample
+
+A React-Native project that uses the [`Node.js for Mobile Apps React Native plugin`]( https://github.com/janeasystems/nodejs-mobile-react-native) shared library.
+
+The sample app runs the Node.js engine in a background thread to start an HTTP server on port 3001 and return the `process.versions` value. It also uses the react-native bridge to send suspend and resume commands to close and reopen the HTTP server when the application goes to the background and back to the foreground. The react-native bridge also returns the process.versions into the UI.
+
+It's possible to access the server from a browser running on a different device connected to the same local network, to verify that the Node.js process running in the background is closing the HTTP server when the app leaves the foreground state.
+
+## How to run
+  - Clone this project.
+  - Run the required npm and react-native commands to install the required node modules in the project root (`react-native/SuspendResume/`):
+    - `npm install`
+    - `react-native link`
+
+### iOS
+
+As currently only `arm64` binaries are available, you need a physical device to run the project, so you'll also have to sign the project.
+
+ - Open the `ios/SuspendResume.xcodeproj` project file in Xcode.
+ - Select one of the physical iOS devices as the run target.
+ - In the project settings (click on the project main node), in the `Signing` portion of the `General` tab, select a valid Team and handle the provisioning profile creation/update. If you get an error that the bundle identifier cannot be used, you can simply change the bundle identifier to a unique string by appending a few characters to it.
+ - Run the app. If the build process doesn't start the app right away, you might have to go to `Settings>General` in the device and enter `Device Management` or `Profiles & Device Management` to manually accept the profile.
+
+
+### Android
+
+You may need to open your app's `/android` folder in `Android Studio`, so that it detects, downloads and cofigures requirements that might be missing, like the `NDK` and `CMake` to build the native code part of the project.
+
+- Run `react-native run-android` in the project's root(`react-native/SuspendResume/`).
+
+#### Troubleshooting
+On Android applications, the `react-native` build process is sometimes unable to rebuild assets.
+If you are getting errors while building the application using `react-native run-android`, the following commands can help you do a clean rebuild of the project, when run in the project's root(`react-native/SuspendResume/`).
+
+On Windows:
+```sh
+cd android
+gradlew clean
+cd ..
+react-native run-android
+```
+
+On Linux/macOS:
+```sh
+cd android
+./gradlew clean
+cd ..
+react-native run-android
+```
+
+## Project structure
+
+### Node.js Part
+
+In `node-root/node-app/main.js` You can find the node.js back-end, that controls the HTTP server as it receives lifecycle events from the React Native part of the project:
+
+```js
+var http = require('http');
+var rn_bridge = require('./rn-bridge/index.js');
+
+let msg_number=0;
+
+var listVersionsServer = http.createServer( (request, response) => {
+  response.end('Versions: ' + JSON.stringify(process.versions));
+});
+
+let listVersionsHTTPServer = listVersionsServer.listen(3001);
+
+// Echo every message received from react-native.
+rn_bridge.channel.on('message', (msg) => {
+  switch(msg) {
+    case 'versions':
+      msg_number++;
+      rn_bridge.channel.send(
+        "This is message number " +
+        msg_number +
+        ". Versions: " +
+        JSON.stringify(process.versions)
+      );
+      break;
+    case 'suspend':
+      listVersionsHTTPServer.close();
+      break;
+    case 'resume':
+      if(!listVersionsHTTPServer.listening)
+        listVersionsHTTPServer = listVersionsServer.listen(3001);
+      break;
+    default:
+      break;
+  }
+});
+
+// Inform react-native node is initialized.
+rn_bridge.channel.send("Node was initialized.");
+```
+
+### React Native part
+
+The React Native interface takes care of querying `Node.js` for versions and showing it in the UI. It also signals when the App enters the background and comes back again, through `AppState`.
+
+index.ios.js and index.android.js contents:
+```js
+...
+import nodejs from 'nodejs-mobile-react-native';
+
+export default class SuspendResume extends Component {
+  constructor(props){
+    super(props);
+    this.state = { lastNodeMessage: "No message yet." };
+  }
+  componentWillMount()
+  {
+    nodejs.start();
+    nodejs.channel.addListener(
+      "message",
+      (msg) => {
+        this.setState({lastNodeMessage: msg});
+      },
+      this 
+    );
+  }
+  componentDidMount(){
+    AppState.addEventListener('change', (state) => {
+      if (state === 'active') {
+        nodejs.channel.send('resume');
+      }
+      if (state === 'background') {
+        nodejs.channel.send('suspend');
+      }
+    });
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button title="Get Versions"
+          onPress={() => nodejs.channel.send('versions')}
+        />
+        <Text style={styles.instructions}>
+          {this.state.lastNodeMessage}
+        </Text>
+      </View>
+    );
+  }
+}
+...
+```
+
+

react-native/SuspendResume/__tests__/index.android.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.android.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});