Using axios.get() with React Native : In less than five minutes
1 min readJun 12, 2021
First create a new project by running —
npx react-native init chcuckNorisAPI
cd into chcuckNorisAPI and run
npm i axios
In the App.js delete everything and paste
import React, { useEffect, useState } from 'react';import {Text, TouchableOpacity,Image,StyleSheet,View,StatusBar} from 'react-native';import Axios from 'axios'const App=()=>{const [details,setDetails] = useState(null)const url = 'https://api.chucknorris.io/jokes/random'const fetchData = async()=>{const {data} =await Axios.get(url)console.log(data);setDetails(data)}const handleClick=()=>{fetchData()}useEffect(()=>{fetchData()},[])return(<><View style={styles.conatiner}><Imagestyle={{width:150,height:150}}source= {{uri:details?.icon_url}}/><Text style={styles.text}>{details?.value}</Text><TouchableOpacity onPress={handleClick}><Text style={styles.button}>Load new Button</Text></TouchableOpacity></View></>)}export default App;const styles = StyleSheet.create({conatiner:{flex:1,justifyContent:'center',alignItems:'center'},button:{padding:15,color:"#FFFFFF",borderWidth:5,borderColor:"#FFFFFF",backgroundColor:'purple',borderRadius:50,alignSelf:'flex-end',marginVertical:15},text:{margin:10,color:"#000000",fontSize:15,fontWeight:'bold'}})
You can add a loading screen or a spinner . I have covered it in the ToDoList app.
Side note : You can edit the app.json to change the app name.
That’s basically it . Now run
npx react-native start
and
npx react-native run-android (In another terminal)
Output=>