fix react native warnings (#309)

* fix: remove componentWillReceiveProps in TextInput

* fix: refactor QrView into functional component

* fix: remove unused DataDetails and reference of AppStyle

* fix: ignore the warning from dependencies

* fix: EthBridger warning on iOS

* chore: import order

* Revert "chore: import order"

This reverts commit 1621a2a1.

* fix: logic error

ios/NativeSigner/EthkeyBridge.m

@@ -25,6 +25,17 @@
 
 @interface RCT_EXTERN_MODULE(EthkeyBridge, NSObject)
 
+// explanation about threading here: https://stackoverflow.com/a/50775641/3060739
+- (dispatch_queue_t)methodQueue
+{
+  return dispatch_get_main_queue();
+}
+
++ (BOOL)requiresMainQueueSetup
+{
+    return YES;
+}
+
 RCT_EXTERN_METHOD(brainWalletAddress:(NSString*)seed resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(brainWalletSecret:(NSString*)seed resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(brainWalletSign:(NSString*)seed message:(NSString*)message resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

src/App.js

@@ -20,7 +20,7 @@
 
 import '../shim';
 import React, { Component } from 'react';
-import { StatusBar } from 'react-native';
+import {StatusBar, YellowBox} from 'react-native';
 import {
   createAppContainer,
   createStackNavigator,
@@ -58,6 +58,18 @@ import TermsAndConditions from './screens/TermsAndConditions';
 import TxDetails from './screens/TxDetails';
 
 export default class App extends Component {
+
+  constructor(){
+    super();
+    if (__DEV__) {
+      YellowBox.ignoreWarnings([
+        'Warning: componentWillReceiveProps',
+        'Warning: componentWillMount',
+        'Warning: componentWillUpdate'
+      ]);
+    }
+  }
+
   render() {
     return (
       <UnstatedProvider>
@@ -125,7 +137,7 @@ const Screens = createStackNavigator(
             }
           }
         },
-        { 
+        {
           defaultNavigationOptions: globalStackNavigationOptions,
           headerMode: 'screen',
         }
@@ -207,7 +219,7 @@ const Screens = createStackNavigator(
             screen: AccountEdit
           }
         },
-        { 
+        {
           defaultNavigationOptions: globalStackNavigationOptions,
           initialRouteParams: {
             isWelcome: true

src/components/DataDetails.js

-// Copyright 2015-2019 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-
-// Parity is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// Parity is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-
-'use strict';
-
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Button, Text, View } from 'react-native';
-import AppStyles from '../styles';
-
-function isAscii(data) {
-  for (var i = 2; i < data.length; i += 2) {
-    let n = parseInt(data.substr(i, 2), 16);
-
-    if (n < 32 || n >= 128) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function hexToAscii(hexx) {
-  var hex = hexx.toString();
-  var str = '';
-  for (var i = 0; i < hex.length; i += 2) {
-    str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
-  }
-  return str;
-}
-
-export default class DataDetails extends Component {
-  static propTypes = {
-    data: PropTypes.string.isRequired,
-    onNextButtonPressed: PropTypes.func.isRequired
-  };
-
-  render() {
-    return (
-      <View style={AppStyles.view}>
-        <Text style={AppStyles.hintText}>Data to sign</Text>
-        <Text style={AppStyles.valueText}>
-          {isAscii(this.props.data)
-            ? hexToAscii(this.props.data)
-            : this.props.data}
-        </Text>
-        <Button
-          onPress={this.props.onNextButtonPressed}
-          title="Next"
-          color="gree"
-          accessibilityLabel="Enter Pin"
-        />
-      </View>
-    );
-  }
-}

src/components/QrView.js

@@ -18,70 +18,46 @@
 
 import { isHex } from '@polkadot/util';
 import PropTypes from 'prop-types';
-import React from 'react';
-import { Dimensions, Image, StyleSheet, Text, View } from 'react-native';
-
+import React, { useEffect, useState } from 'react';
+import { Dimensions, Image, StyleSheet, View } from 'react-native';
 import { qrCode, qrHex } from '../util/native';
 
-export default class QrView extends React.PureComponent {
-  static propTypes = {
-    data: PropTypes.string.isRequired // arbitrary message/txn string or `${networkType}:0x${address.toLowerCase()}@${networkKey}`
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      qr: null
-    };
-  }
+QrView.propTypes = {
+  data: PropTypes.string.isRequired
+};
 
-  componentDidMount() {
-    const { data } = this.props;
-  
-    this.displayQrCode(data);
-  }
-
-  componentWillReceiveProps(newProps) {
-    if (newProps.text !== this.props.text) {
-      this.displayIcon(newProps.text);
-    }
-  }
+export default function QrView(props) {
 
-  async displayQrCode (data) {
-    try {
-      const qr = isHex(data) ? await qrHex(data) : await qrCode(data);
+  const [qr, setQr] = useState(null);
 
-      this.setState({
-        qr: qr
-      })
-    } catch (e) {
-      console.error(e);
+  useEffect(() => {
+    async function displayQrCode(data) {
+      try {
+        const qr = isHex(data) ? await qrHex(data) : await qrCode(data);
+        setQr(qr);
+      } catch (e) {
+        console.error(e);
+      }
     }
-  }
-
-  render() {
-    if (this.props.screen) {
-      return <View style={AppStyles.view}>{this.renderQr()}</View>;
-    }
-
-    return this.renderQr();
-  }
-
-  renderQr() {
-    const { width: deviceWidth } = Dimensions.get('window');
-    let size = this.props.size || deviceWidth - 80;
-    let flexBasis = this.props.height || deviceWidth - 40;
-
-    return (
-      <View style={[styles.rectangleContainer, { flexBasis, height: flexBasis }, this.props.style]}>
-        <Image
-          source={{ uri: this.state.qr }}
-          style={{ width: size, height: size }}
-        />
-      </View>
-    );
-  }
+    displayQrCode(props.data);
+  }, [props.data]);
+
+
+  const { width: deviceWidth } = Dimensions.get('window');
+  let size = props.size || deviceWidth - 80;
+  let flexBasis = props.height || deviceWidth - 40;
+
+  return (
+    <View
+      style={[
+        styles.rectangleContainer,
+        { flexBasis, height: flexBasis },
+        props.style
+      ]}
+    >
+      <Image source={{ uri: qr }} style={{ width: size, height: size }} />
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

src/components/TextInput.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import { StyleSheet, TextInput as TextInputOrigin } from 'react-native';
 import colors from '../colors';
-import fonts from "../fonts";
+import fonts from '../fonts';
 
 export default class TextInput extends React.PureComponent {
   static defaultProps = {
@@ -29,11 +29,11 @@ export default class TextInput extends React.PureComponent {
     this.input.focus();
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { focus } = nextProps;
-
+  componentDidUpdate() {
+    const { focus } = this.props;
     focus && this.focus();
   }
+
   render() {
     return (
       <TextInputOrigin
@@ -41,7 +41,7 @@ export default class TextInput extends React.PureComponent {
           this.input = input;
         }}
         keyboardAppearance="dark"
-        underlineColorAndroid='transparent'
+        underlineColorAndroid="transparent"
         {...this.props}
         style={[styles.input, this.props.style]}
       />