Skip to content

Commit

Permalink
react-native: update samples react-native to 0.52
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
jaimecbernardo committed Jan 17, 2018
1 parent eb3451e commit e103961
Show file tree
Hide file tree
Showing 15 changed files with 7,667 additions and 128 deletions.
25 changes: 18 additions & 7 deletions react-native/SuspendResume/.flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
8 changes: 4 additions & 4 deletions react-native/SuspendResume/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
Button,
Expand All @@ -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') {
Expand Down Expand Up @@ -74,5 +82,3 @@ const styles = StyleSheet.create({
marginBottom: 5,
},
});

AppRegistry.registerComponent('SuspendResume', () => SuspendResume);
18 changes: 13 additions & 5 deletions react-native/SuspendResume/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
Original file line number Diff line number Diff line change
@@ -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 />
);
});
12 changes: 0 additions & 12 deletions react-native/SuspendResume/__tests__/index.android.js

This file was deleted.

4 changes: 4 additions & 0 deletions react-native/SuspendResume/android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ import com.android.build.OutputFile
* ]
*/

project.ext.react = [
entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ protected List<ReactPackage> getPackages() {
new MainReactPackage()
);
}

@Override
protected String getJSMainModuleName() {
return "index";
}
};

@Override
Expand Down
78 changes: 0 additions & 78 deletions react-native/SuspendResume/index.ios.js

This file was deleted.

4 changes: 4 additions & 0 deletions react-native/SuspendResume/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('SuspendResume', () => App);
Loading

0 comments on commit e103961

Please sign in to comment.