react-native: update samples react-native to 0.52

Updates the react-native version of the SuspendResume sample
to 0.52.0.
Corrects a Warning message on Android due to trying to update
an unmounted component by removing the listener when unmounting.

Author: jaimecbernardo

react-native/SuspendResume/.flowconfig

@@ -12,14 +12,19 @@
 ; 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
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
+; Ignore metro
+.*/node_modules/metro/.*
 
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow
-flow/
+node_modules/react-native/flow/
+node_modules/react-native/flow-github/
 
 [options]
 emoji=true
@@ -30,16 +35,22 @@ 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'
 
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
-suppress_type=$FixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
 
-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\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(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
+^0.61.0

react-native/SuspendResume/.gitignore

@@ -46,8 +46,8 @@ buck-out/
 # 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
+# https://docs.fastlane.tools/best-practices/source-control/
 
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots

react-native/SuspendResume/index.android.js renamed to react-native/SuspendResume/App.js

@@ -6,7 +6,7 @@
 
 import React, { Component } from 'react';
 import {
-  AppRegistry,
+  Platform,
   StyleSheet,
   Text,
   Button,
@@ -16,22 +16,30 @@ import {
 
 import nodejs from 'nodejs-mobile-react-native';
 
-export default class SuspendResume extends Component {
+export default class App extends Component<{}> {
   constructor(props){
     super(props);
     this.state = { lastNodeMessage: "No message yet." };
+    this.listenerRef = null;
   }
   componentWillMount()
   {
     nodejs.start('main.js');
+    this.listenerRef = ((msg) => {
+      this.setState({lastNodeMessage: msg});
+    });
     nodejs.channel.addListener(
       "message",
-      (msg) => {
-        this.setState({lastNodeMessage: msg});
-      },
+      this.listenerRef,
       this 
     );
   }
+  componentWillUnmount()
+  {
+    if (this.listenerRef) {
+      nodejs.channel.removeListener("message", this.listenerRef);
+    }
+  }
   componentDidMount(){
     AppState.addEventListener('change', (state) => {
       if (state === 'active') {
@@ -74,5 +82,3 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
-
-AppRegistry.registerComponent('SuspendResume', () => SuspendResume);

react-native/SuspendResume/README.md

@@ -98,27 +98,35 @@ rn_bridge.channel.send("Node was initialized.");
 
 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:
+App.js contents:
 ```js
 ...
 import nodejs from 'nodejs-mobile-react-native';
 
-export default class SuspendResume extends Component {
+export default class App extends Component<{}> {
   constructor(props){
     super(props);
     this.state = { lastNodeMessage: "No message yet." };
+    this.listenerRef = null;
   }
   componentWillMount()
   {
     nodejs.start('main.js');
+    this.listenerRef = ((msg) => {
+      this.setState({lastNodeMessage: msg});
+    });
     nodejs.channel.addListener(
       "message",
-      (msg) => {
-        this.setState({lastNodeMessage: msg});
-      },
+      this.listenerRef,
       this 
     );
   }
+  componentWillUnmount()
+  {
+    if (this.listenerRef) {
+      nodejs.channel.removeListener("message", this.listenerRef);
+    }
+  }
   componentDidMount(){
     AppState.addEventListener('change', (state) => {
       if (state === 'active') {

react-native/SuspendResume/__tests__/index.ios.js renamed to react-native/SuspendResume/__tests__/App.js

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

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

@@ -72,6 +72,10 @@ import com.android.build.OutputFile
  * ]
  */
 
+project.ext.react = [
+    entryFile: "index.js"
+]
+
 apply from: "../../node_modules/react-native/react.gradle"
 
 /**

react-native/SuspendResume/android/app/build.gradle

@@ -25,6 +25,11 @@ protected List<ReactPackage> getPackages() {
           new MainReactPackage()
       );
     }
+
+    @Override
+    protected String getJSMainModuleName() {
+      return "index";
+    }
   };
 
   @Override

react-native/SuspendResume/android/app/src/main/java/com/suspendresume/MainApplication.java

@@ -0,0 +1,4 @@
+import { AppRegistry } from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('SuspendResume', () => App);