RNative-Components

React Native Fetching API data..

September 19, 2020
JavaScript Fetch API provides an interface for accessing and manipulating HTTP requests and responses. In this tutorial, we will create examples that use Javascript fetch() method to make Get/Post/Put/Delete request. The final section shows a simple Fetch HTTP Client to interact and get data from Rest API in Javascript.


  import { StatusBar } from 'expo-status-bar';
  import { useEffect, useState } from 'react';
  import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

  export default function App() {
    let [isLoading, setIsLoading] = useState(true);
    let [error, setError] = useState();
    let [response, setResponse] = useState();

    useEffect(() => {
      fetch("https://api.coindesk.com/v1/bpi/currentprice.json")
        .then(res => res.json())
        .then(
          (result) => {
            setIsLoading(false);
            setResponse(result);
          },
          (error) => {
            setIsLoading(false);
            setError(error);
          }
        )
    }, []);

    const getContent = () => {
      if (isLoading) {
        return <ActivityIndicator size="large" />;
      }

      if (error) {
        return <Text>{error}</Text>
      }
     
      console.log(response);
      return <Text>Bitcoin (USD): {response["bpi"]["USD"].rate}</Text>;
    };

    return (
      <View style={styles.container}>
        {getContent()}
        <StatusBar style="auto" />
      </View>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });


APIs for demo data