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