From e1039615a12b843a5e5b4539ea42f07f6ec2a9eb Mon Sep 17 00:00:00 2001 From: Jaime Bernardo Date: Wed, 17 Jan 2018 18:12:05 +0000 Subject: [PATCH] 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. --- react-native/SuspendResume/.flowconfig | 25 +- react-native/SuspendResume/.gitignore | 8 +- .../{index.android.js => App.js} | 20 +- react-native/SuspendResume/README.md | 18 +- .../__tests__/{index.ios.js => App.js} | 4 +- .../SuspendResume/__tests__/index.android.js | 12 - .../SuspendResume/android/app/build.gradle | 4 + .../com/suspendresume/MainApplication.java | 5 + react-native/SuspendResume/index.ios.js | 78 - react-native/SuspendResume/index.js | 4 + .../SuspendResume.xcodeproj/project.pbxproj | 174 +- .../ios/SuspendResume/AppDelegate.m | 2 +- .../Images.xcassets/Contents.json | 6 + react-native/SuspendResume/package-lock.json | 7425 +++++++++++++++++ react-native/SuspendResume/package.json | 10 +- 15 files changed, 7667 insertions(+), 128 deletions(-) rename react-native/SuspendResume/{index.android.js => App.js} (80%) rename react-native/SuspendResume/__tests__/{index.ios.js => App.js} (81%) delete mode 100644 react-native/SuspendResume/__tests__/index.android.js delete mode 100644 react-native/SuspendResume/index.ios.js create mode 100644 react-native/SuspendResume/index.js create mode 100644 react-native/SuspendResume/ios/SuspendResume/Images.xcassets/Contents.json create mode 100644 react-native/SuspendResume/package-lock.json diff --git a/react-native/SuspendResume/.flowconfig b/react-native/SuspendResume/.flowconfig index 8346120..7d60895 100644 --- a/react-native/SuspendResume/.flowconfig +++ b/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\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(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 diff --git a/react-native/SuspendResume/.gitignore b/react-native/SuspendResume/.gitignore index 10be197..0826423 100644 --- a/react-native/SuspendResume/.gitignore +++ b/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 diff --git a/react-native/SuspendResume/index.android.js b/react-native/SuspendResume/App.js similarity index 80% rename from react-native/SuspendResume/index.android.js rename to react-native/SuspendResume/App.js index bbff8eb..b726f74 100644 --- a/react-native/SuspendResume/index.android.js +++ b/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); diff --git a/react-native/SuspendResume/README.md b/react-native/SuspendResume/README.md index 9b9f82a..0f771a7 100644 --- a/react-native/SuspendResume/README.md +++ b/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') { diff --git a/react-native/SuspendResume/__tests__/index.ios.js b/react-native/SuspendResume/__tests__/App.js similarity index 81% rename from react-native/SuspendResume/__tests__/index.ios.js rename to react-native/SuspendResume/__tests__/App.js index ba7c5b5..d0b9ee3 100644 --- a/react-native/SuspendResume/__tests__/index.ios.js +++ b/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( - + ); }); diff --git a/react-native/SuspendResume/__tests__/index.android.js b/react-native/SuspendResume/__tests__/index.android.js deleted file mode 100644 index b49b908..0000000 --- a/react-native/SuspendResume/__tests__/index.android.js +++ /dev/null @@ -1,12 +0,0 @@ -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( - - ); -}); diff --git a/react-native/SuspendResume/android/app/build.gradle b/react-native/SuspendResume/android/app/build.gradle index 15a45da..84be5b5 100644 --- a/react-native/SuspendResume/android/app/build.gradle +++ b/react-native/SuspendResume/android/app/build.gradle @@ -72,6 +72,10 @@ import com.android.build.OutputFile * ] */ +project.ext.react = [ + entryFile: "index.js" +] + apply from: "../../node_modules/react-native/react.gradle" /** diff --git a/react-native/SuspendResume/android/app/src/main/java/com/suspendresume/MainApplication.java b/react-native/SuspendResume/android/app/src/main/java/com/suspendresume/MainApplication.java index 5b8296b..0af417e 100644 --- a/react-native/SuspendResume/android/app/src/main/java/com/suspendresume/MainApplication.java +++ b/react-native/SuspendResume/android/app/src/main/java/com/suspendresume/MainApplication.java @@ -25,6 +25,11 @@ protected List getPackages() { new MainReactPackage() ); } + + @Override + protected String getJSMainModuleName() { + return "index"; + } }; @Override diff --git a/react-native/SuspendResume/index.ios.js b/react-native/SuspendResume/index.ios.js deleted file mode 100644 index bbff8eb..0000000 --- a/react-native/SuspendResume/index.ios.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * @flow - */ - -import React, { Component } from 'react'; -import { - AppRegistry, - StyleSheet, - Text, - Button, - AppState, - View -} from 'react-native'; - -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('main.js'); - 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 ( - -