Tabbed navigation react native react-navigation - react-native

Question

I have an app working with tabbed navigation but it seems that I need to interact with the components in the tabs that aren't active when the app starts, before they'll display data.
I have 3 tabs in my app, a map that displays restaurants nearby, a list of different ingredients and also a list of additives.
All these data sets are being sourced from a server (salesforce) when the page is loaded that holds the tab nav -- the homescreen component. The only thing this component is doing is loading my three other components.
Now, when I click into the other tabs, the screen is blank until i scroll or click in the page somewhere and then the UI loads. I think this is due to the fact that the setState call has already run, but when the 1st component in the tab nav was visible to the user.
How can I fire a call to update the UI when someone clicks on the newly active tab? (i'm setting state still in the component, not using redux yet.. this will come with time!)..
component below:
import React, {Component} from 'react';
import {
View,
FlatList,
ActivityIndicator
} from 'react-native';
import {Icon, List, ListItem, SearchBar} from 'react-native-elements';
import {oauth, net} from 'react-native-force';
// todo - implement... import {StackNavigator} from 'react-navigation';
export default class Ingredients extends Component {
static navigationOptions = {
tabBarLabel: 'Ingredients',
title: 'Ingredients',
tabBarIcon: ({tintColor}) => (
<Icon
name='blur-linear'
color={tintColor}
/>
)
};
constructor(props) {
super(props);
this.state = {
ingredients: [],
refreshing: false
};
}
componentDidMount() {
oauth.getAuthCredentials(
() => this.fetchData(), // already logged in
() => {
oauth.authenticate(
() => this.fetchData(),
(error) => console.log('Failed to authenticate:' + error)
);
});
}
componentWillUnmount() {
this.setState({
ingredients: [],
refreshing: false
})
};
fetchData = () => {
this.setState({
refreshing: true
});
net.query('SELECT Id, Ingredient__c, CA_GF_Status_Code__c, CA_Ingredient_Notes__c FROM Ingredient__c ORDER BY Ingredient__c',
(response) => this.setState({
ingredients: response.records,
refreshing: false
})
);
};
renderHeader = () => {
//todo - make this actually search something
return <SearchBar placeholder="Type Here..." lightTheme round/>;
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large"/>
</View>
);
};
selectIcon = (statusCode) => {
switch (statusCode) {
case 0:
return <Icon type='font-awesome' name='close' color='#80A33F'/>;
case 1:
return <Icon type='font-awesome' name='check' color='#80A33F'/>;
case 2:
return <Icon type='font-awesome' name='asterisk' color='#80A33F'/>;
case 3:
return <Icon type='font-awesome' name='sign-out' color='#80A33F'/>;
case 4:
return <Icon type='font-awesome' name='question-circle' color='#80A33F'/>;
default:
return <Icon type='font-awesome' name='close' color='#80A33F'/>;
}
};
render() {
return (
<List>
<FlatList
data={this.state.ingredients}
renderItem={({item}) => (
<ListItem
title={item.Ingredient__c}
subtitle={item.CA_Ingredient_Notes__c}
chevronColor='#025077'
avatar={this.selectIcon(item.CA_GF_Status_Code__c)}
onPress={() => {window.alert('this is being pressed')}}
/>
)}
keyExtractor={(item, index) => index}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
refreshing={this.state.refreshing}
onRefresh={this.fetchData}
/>
</List>
);
}
}