SomeScreen.js

import React from "react";
import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
import axios from 'axios'

export default class SomeScreen extends React.Component {
  state = {
    loading: false,
    products: []
  };

  async componentDidMount() {
    await this.fetchProducts()
  }

  async fetchProducts() {
    const url = "your url"
    axios.get(url).then(response => response.data)
      .then((data) => {
        this.setState({ markers: data, loading: true })
        // console.log(data)
      })

  }

  render() {
    const { loading, products } = this.state;

    if (loading) {
      return (

        <View style={styles.loading}>
          <ActivityIndicator size="large" color="#fff" />
          <Text style={styles.loadingText}> Please wait....</Text>
        </View>

      );
    } else
      return (

        <View style={styles.container}>
          {products.map(product => {
            console.info(product)
            return (
              <Button
                title={product.xxxxx}
                onPress={() => console.info("click")}
              />
            )
          })}
        </View >

      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  loading: {
    flex: 1,
    backgroundColor: "#34495E",
    alignItems: "center",
    justifyContent: "center"
  },
  loadingText: {
    fontSize: 32,
    color: "#fff"
  }
});