Merge pull request #111 from rsksmart/imstar15-add_refresh_control_in…

…_transaction_page

Add refresh control in transaction page. fix #40

src/pages/wallet/transaction.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
 import {
-  View, StyleSheet, Text, Linking, Image,
+  View, StyleSheet, Text, Linking, Image, ScrollView, RefreshControl,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -109,6 +109,7 @@ class Transaction extends Component {
       confirmations,
       memo: rawTransaction.memo || strings('page.wallet.transaction.noMemo'),
       title: `${transation.state} Funds`,
+      isRefreshing: false,
     };
   }
 
@@ -126,6 +127,14 @@ class Transaction extends Component {
     this.setState(Transaction.processViewData(transation, latestBlockHeights));
   }
 
+  onRefresh = () => {
+    this.setState({ isRefreshing: true });
+    // simulate 1s network delay
+    setTimeout(() => {
+      this.setState({ isRefreshing: false });
+    }, 1000);
+  }
+
   onLinkPress() {
     const { navigation } = this.props;
     const transation = navigation.state.params;
@@ -137,16 +146,28 @@ class Transaction extends Component {
   render() {
     const { navigation } = this.props;
     const {
-      transactionState, transactionId, amount, datetime, memo, confirmations, title, stateIcon,
+      transactionState, transactionId, amount, datetime, memo, confirmations, title, stateIcon, isRefreshing,
     } = this.state;
+
+    const refreshControl = (
+      <RefreshControl
+        refreshing={isRefreshing}
+        onRefresh={this.onRefresh}
+      />
+    );
+
     return (
       <BasePageGereral
         isSafeView
         hasBottomBtn={false}
         hasLoader={false}
         headerComponent={<Header title={`page.wallet.transaction.${title}`} onBackButtonPress={() => navigation.goBack()} />}
       >
-        <View style={styles.body}>
+        <ScrollView
+          style={styles.body}
+          showsVerticalScrollIndicator={false}
+          refreshControl={refreshControl}
+        >
           <View style={styles.sectionContainer}>
             <Loc style={[styles.sectionTitle, styles.state]} text={transactionState} />
             <View style={styles.amountView}>
@@ -175,7 +196,7 @@ class Transaction extends Component {
               <Loc style={styles.link} text="page.wallet.transaction.viewOnChain" />
             </TouchableOpacity>
           </View>
-        </View>
+        </ScrollView>
       </BasePageGereral>
     );
   }