Using axios.get() with React Native : In less than five minutes

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}>
<Image
style={{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=>