React-Native - Call Child function to update from Parent Element Click - react-native

Question

I have a Child Component that needs to update when a click event occurs in the Parent Component, Below is the code and i need startLoader function to be called.
Child Component:
class Footer extends Component {
constructor(props) {
super(props);
this.state = {
showText: true,
showLoader:false,
};
}
startLoader = () => {
this.setState({
showText:false,
showLoader:true
});
}
finishLoader = () => {
this.setState({
showText:false,
showLoader:true
});
}
render() {
return (<View style={styles.container}>
{ this.state.showText ? <Text style={styles.text}>Load More</Text> : null }
{ this.state.showLoader ? <Image style={{width: 30, height: 30}} source={require('./images/loader.gif')}/> : null }
</View>);
}
}
Parent Component:
class Social extends Component {
constructor(props) {
super(props);
var tabLabel = this.props.tabLabel;
var dataSource = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
this.state = {
text: 'Search ' + tabLabel + ' here...' ,
textInput: '',
dataSource:dataSource,
height:height,
searchHeight: 40,
nextPageToken: '',
arrVideos: new Array(),
listHeight: height,
};
}
renderRow(rowData: object, sectionID: number, rowID: number) {
return (
<TouchableHighlight
underlayColor = '#ddd'>
<View style ={styles.row}>
<View style={styles.imagecon}>
<Image style={{width: 100, height: 80}} source={{uri: rowData.thumbnail}} />
</View>
<View style={styles.textcon}>
<Text style={{ fontSize: 11, fontWeight: 'bold' }} > {rowData.title} </Text>
<Text style={{ fontSize: 11}} > {rowData.desc} </Text>
</View>
</View>
</TouchableHighlight>
)
}
doneClick = () => {
this.props.showTrans();
fetch("https://www.googleapis.com/youtube/v3/search?part=snippet&q=tupac&key=AIzaSyDFOz50C_XkuEh2T-2XTN9fqm_5xHYzbg8&pageToken=" + this.state.nextPageToken)
.then((response) => response.json())
.then((responseData) => {
console.log('fxbxfbxf' + responseData.toString());
console.log('ghghgh' + responseData["items"].length);
//let doc = new DomParser().parseFromString(html,'text/html')
for(var i = 0; i < responseData["items"].length; i++) {
var title = responseData["items"][i]["snippet"].title;
var thumbnail = responseData["items"][i]["snippet"]["thumbnails"]["default"]["url"];
var desc = responseData["items"][i]["snippet"]["description"];
var video = {
title : title,
thumbnail: thumbnail,
desc: desc
}
this.state.arrVideos.push(video);
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.state.arrVideos),
nextPageToken: responseData.nextPageToken,
listHeight: (120 * this.state.arrVideos.length) + 80,
});
this.props.hideTrans();
})
.done();
}
loadMore = () => {
this.refs['footer'].startLoader();
fetch("https://www.googleapis.com/youtube/v3/search?part=snippet&q=tupac&key=AIzaSyDFOz50C_XkuEh2T-2XTN9fqm_5xHYzbg8&pageToken=" + this.state.nextPageToken)
.then((response) => response.json())
.then((responseData) => {
console.log('fxbxfbxf' + responseData.toString());
console.log('ghghgh' + responseData["items"].length);
//let doc = new DomParser().parseFromString(html,'text/html')
for(var i = 0; i < responseData["items"].length; i++) {
var title = responseData["items"][i]["snippet"].title;
var thumbnail = responseData["items"][i]["snippet"]["thumbnails"]["default"]["url"];
var desc = responseData["items"][i]["snippet"]["description"];
var video = {
title : title,
thumbnail: thumbnail,
desc: desc
}
this.state.arrVideos.push(video);
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.state.arrVideos),
nextPageToken: responseData.nextPageToken,
listHeight: (120 * this.state.arrVideos.length) + 80,
});
this.props.hideTrans();
})
.done();
}
render() {
return (
<View style={styles.menu} >
<View style={{alignItems: 'flex-start',
flexDirection: 'row',
backgroundColor: '#90CAF9', height: this.state.searchHeight}} >
<Image style={{marginTop: 10 ,marginLeft: 10 , width: 20, height: 20}} source={require('./images/search.png')} />
<TextInput
onSubmitEditing={ this.doneClick }
style={{marginLeft: 5, color: '#757575', width: width - 80, height: 40, fontSize: 11,}}
onChangeText={(textInput) => this.setState({textInput})}
placeholder={this.state.text}
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.sep} >
</View>
<ScrollView style={{flex:1}}>
<SGListView
stickyHeaderIndices={[]}
onEndReachedThreshold={1}
scrollRenderAheadDistance={1}
pageSize={1}
initialListSize={9}
renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
style = {{flex:1, flexDirection: 'column',
backgroundColor: 'white', height: this.state.listHeight}}
dataSource = {this.state.dataSource}
renderRow = {this.renderRow.bind(this)}
renderFooter={() => <TouchableOpacity onPress={() => this.loadMore() }><Footer ref='footer' /></TouchableOpacity>}
>
</SGListView>
</ScrollView>
</View>
);
}
}
Where Footer is the onpress that needs to update the child component. How can i do this?