fix(rn): device info pull to refresh

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Oct 29, 2018 · 1b8ca8d · 1b8ca8d
1 parent 56cb86b
commit 1b8ca8d
Showing 1 changed file with 28 additions and 6 deletions.
diff --git a/client/react-native/common/components/Screens/Settings/Devtools/DeviceInfos.js b/client/react-native/common/components/Screens/Settings/Devtools/DeviceInfos.js
@@ -1,9 +1,16 @@
+import {
+  Clipboard,
+  RefreshControl,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+} from 'react-native'
 import React, { PureComponent } from 'react'
-import { Text, ScrollView, TouchableOpacity, Clipboard } from 'react-native'
+
+import { GetDeviceInfos } from '../../../../graphql/queries'
 import { Header } from '../../../Library'
 import { colors } from '../../../../constants'
 import { padding } from '../../../../styles'
-import { GetDeviceInfos } from '../../../../graphql/queries'
 
 export default class DeviceInfos extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
@@ -19,12 +26,19 @@ export default class DeviceInfos extends PureComponent {
 
   state = {
     infos: {},
+    refreshing: false,
+  }
+
+  fetch = () => {
+    this.setState({ refreshing: true }, () =>
+      GetDeviceInfos.then(data => {
+        this.setState({ infos: data.DeviceInfos.infos, refreshing: false })
+      })
+    )
   }
 
   componentDidMount () {
-    GetDeviceInfos.then(data => {
-      this.setState({ infos: data.DeviceInfos.infos })
-    })
+    this.fetch()
   }
 
   render () {
@@ -60,7 +74,15 @@ export default class DeviceInfos extends PureComponent {
     }
 
     return (
-      <ScrollView style={{ backgroundColor: colors.background }}>
+      <ScrollView
+        style={{ backgroundColor: colors.background }}
+        refreshControl={
+          <RefreshControl
+            refreshing={this.state.refreshing}
+            onRefresh={this.fetch}
+          />
+        }
+      >
         {fields}
       </ScrollView>
     )