Please review my mobile UX/UI

I previously asked about infinite scroll and decided that for my website I will keep regular pagination for the time being. I have created a Rest API that can take queries such as /api?page=1&query=android and returns json data for the results. Then I havea a mobile frontend done with react native. The user starts the app and the app displays a list which is infinitely scrollable.

Then the user can enter text about what to search for and the search result is displayed.

Now I wonder about the UX/UI I have done because I am not a designe (I am a programmer). Can my "solution" be improved upon concerning the UX/UI, did I make the right decisions?

React native frontend code:

import React, {Component} from 'react';
import {
    ActivityIndicator,
    FlatList,
    StyleSheet,
    TouchableWithoutFeedback,
    View,
    Button, AsyncStorage, Alert
} from 'react-native';
import { List, ListItem } from "react-native-elements";
import {Col, Row, Text, SearchBar } from 'react-native-elements';

class Trends extends Component {

    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            data: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false,
            text: '',
        };
        this.arrayholder = [] ;
    }

    componentDidMount() {
        this.makeRemoteRequest();
    }

    makeRemoteRequest = () => {
        const { page, seed, text } = this.state;
        const url = `https://www.koolbusiness.com/api?seed=${seed}&page=${page}&query=${text}&results=20`;
        this.setState({ loading: true });
        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    data: page === 1 ? res.results : [...this.state.data, ...res.results],
                    error: res.error || null,
                    loading: false,
                    refreshing: false
                });
            })
            .catch(error => {
                this.setState({ error, loading: false });
            });
    };

    handleRefresh = () => {
        this.setState(
            {
                page: 1,
                seed: this.state.seed + 1,
                refreshing: true
            },
            () => {
                this.makeRemoteRequest();
            }
        );
    };

    handleLoadMore = () => {
        this.setState(
            {
                page: this.state.page + 1
            },
            () => {
                this.makeRemoteRequest();
            }
        );
    };

    renderSeparator = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: "86%",
                    backgroundColor: "#CED0CE",
                    marginLeft: "14%"
                }}
            />
        );
    };
    SearchFilterFunction(text){
        this.setState({
            data: [],
            text: text
        });
        this.handleRefresh();
    }
    renderHeader = () => {
        return <SearchBar  onChangeText={(text) => this.SearchFilterFunction(text)}
                             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>
        );
    };
    render() {
        return (
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Details', { id: item.id })} >

                        <ListItem
                            roundAvatar
                            title={`${item.title}`}
                            subtitle={item.text}
                            avatar={{ uri: item.img }}
                            containerStyle={{ borderBottomWidth: 0 }}
                        />
                        </TouchableWithoutFeedback>
                    )}
                    keyExtractor={item => item.id}
                    ItemSeparatorComponent={this.renderSeparator}
                    ListHeaderComponent={this.renderHeader}
                    ListFooterComponent={this.renderFooter}
                    onRefresh={this.handleRefresh}
                    refreshing={this.state.refreshing}
                    onEndReached={this.handleLoadMore}
                    onEndReachedThreshold={50}
                />
            </List>
        );
    }
}

const styles = StyleSheet.create({
    listHeader: {
        flex: 1,
        flexDirection: "row",
        marginLeft: 10,
        marginTop: 5,
    },
    container: {
        flex: 1,
    },
    headerContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        padding: 40,
        backgroundColor: '#FD6B78'
    },
    heading: {
        color: 'white',
        marginTop: 10,
        fontSize: 22,
    },
    text: {
        marginLeft: 20,
        flex: 1
    },
    image: {
        marginRight: 20,
        width: 30,
        height: 30,
        flex: 3,
    }
});

export default Trends;