So I got this piece of code, and I want to display the Spinner on the bottom of the screen, just right after the FlatList, but when the function displaySpinner is called nothing displays after the flatlist. I've tried many things like putting trying to display the Spinner on the top of the view and then give it a Top but it's not what I'm looking for. 
By the way I'm new in the programming world and more on React Native so I hope everything makes sense to understand my problem 

```
import React, { Component } from 'react';
import { FlatList, StyleSheet, View, Text, Image } from 'react-native';
import axios from 'axios';
import moment from 'moment';
import Card from './Card';
import CardSection from './CardSection';
import Spinner from './Spinner';

class ArticleList extends Component {
    state = { articles: [],
        refreshing: false,
        isLoading: false,

    };

    componentWillMount() {
        this.loadArticles();
    }

    currentOffset = 0;

   reloadContent() {
    this.setState({

        isLoading: true
    });
        this.currentOffset += 20;
        console.log(this.currentOffset);
        this.loadArticles(); 
    }

    loadArticles = () => {
        const { articles } = this.state;

        console.log(this.currentOffset);

        axios.get(`https://sportsoftheday.com/wp-json/wp/v2/posts?per_page=20&offset=${this.currentOffset}`)
            .then(res =>
                this.setState({
                    articles: this.currentOffset === 0 ? res.data : [...articles, ...res.data],
                    isLoading: false,
                }))
            .catch(err => {
                console.error(err);
            });
    };
    displaySpinner() {
        if (this.state.isLoading === true) {
            return <Spinner size='large' />;
        }
    }

    //Apply removeClippedSubviews for eliminating useless data on the screen

    render() {
        const { articles } = this.state;

        this.date = this.date;
        this.fimg_url = this.fimg_url;

        return (
<View>

                <FlatList
                    data={articles}
                    renderItem={({ item }) => (

                        <Card>

                            <CardSection>

                                <View style={styles.thumbnailContainerStyle}>

                                    <Image
                                        style={styles.thumbnailStyle}
                                        source={{
                                            uri: item.fimg_url,
                                            cache: 'only-if-cached'
                                        }}

                                    />

                                </View>
                                <View style={styles.headerContentStyle}>

                                    <Text style={{ color: '#B2B2B2' }}>
                                        {moment(item.date).format('dddd, Do MMMM YYYY')}</Text>
                                    <Text
                                        numberOfLines={3}
                                        style={styles.headerTextStyle}
                                    >
                                        {item.title.rendered}

                                    </Text>

                                </View>

                            </CardSection>

                        </Card>

                       )}

                    keyExtractor={i => i.id}
                   onEndReached={this.reloadContent.bind(this)}

                    onEndReachedThreshold={0.1}
                />

               {this.displaySpinner()}
            </View>

        );
    }

}

const styles = StyleSheet.create({

    headerContentStyle: {
        flexDirection: 'column',
        justifyContent: 'space-around',
        flex: 1

    },
    headerTextStyle: {
        textAlign: 'justify',

        fontSize: 18,
        color: 'black',
        marginRight: 15
    },
    thumbnailStyle: {
        height: 70,
        width: 70
    },
    thumbnailContainerStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 10,
        marginRight: 10
    },
    imageStyle: {
        height: 300,
        flex: 1,
        width: null
    },

});

export default ArticleList;

```