src/groups/GroupsBar.js

@@ -8,13 +8,12 @@ import {
 } from 'mobx-react/native'
 
 import {
-  FlatList, View,
+  FlatList, View, TouchableOpacity, StyleSheet, ActivityIndicator
 } from 'react-native'
 
 import {CommonStyle as CS} from '../styles/Common';
 import GrousBarItem from './GroupsBarItem';
 import { Text } from 'react-native-elements';
-import { TouchableOpacity } from 'react-native-gesture-handler';
 
 @inject('groupsBar')
 @observer
@@ -53,9 +52,9 @@ export default class GroupsBar extends Component {
 
   renderError() {
     return (
-      <TouchableOpacity onPress={this.load}>
+      <TouchableOpacity onPress={this.load} style={[CS.flexContainer]}>
         <View style={[CS.columnAlignCenter, CS.centered, CS.padding2x]}>
-          <Text style={[CS.fontXS, CS.colorDanger, CS.marginBottom]}>Error Loading Groups</Text>
+          <Text style={[CS.fontXS, CS.colorDarkGreyed, CS.marginBottom]}>Error Loading Groups</Text>
           <Text style={[CS.fontS, CS.colorPrimary, CS.borderPrimary, CS.border, CS.borderRadius7x, CS.padding]}>Try again</Text>
         </View>
       </TouchableOpacity>
@@ -68,8 +67,9 @@ export default class GroupsBar extends Component {
   render() {
     return (
       <FlatList
-        ListFooterComponent={this.state.errorLoading ? this.renderError() : undefined}
+        ListFooterComponent={this.state.errorLoading ? this.renderError() : (this.props.groupsBar.loading ? <ActivityIndicator size="large" style={[CS.padding, styles.loading]}/>: undefined)}
         contentContainerStyle={[CS.rowJustifyStart, CS.backgroundTransparent]}
+        style={[styles.bar]}
         horizontal={true}
         renderItem={this.renderItem}
         data={this.props.groupsBar.groups.slice()}
@@ -77,4 +77,14 @@ export default class GroupsBar extends Component {
       />
     )
   }
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    minHeight: 80
+  },
+  loading: {
+    height: 80,
+    alignSelf: 'center'
+  }
+})
\ No newline at end of file