React Native tutorial #16 call API

in this react native tutorial we learn what is API and how we can fetch API data in react-native using Flat List in a simple example by Anil Sidhu
video points
What is API Call
write code for API code
Write code for make list with flat list
Little bit style
That's it

catch me on social media

Checkout and subscribe our new channel for technical news

[codestepbystep]

Checkout and subscribe our new channel for technical news

[hiteshsingh]

Code but request is understand first. Watch full video..



import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View,
FlatList,
SafeAreaView,
StatusBar
} from 'react-native';

class App extends Component {


constructor(props) {
super(props);
this.state = {
data: []


}
console.log("In side const");
//this.apiCall();
}


componentDidMount()

{
console.log("MOunt")
this.apiCall();
}

async apiCall() {
console.log("INSIDE APP");

//making varible and aftermaking await give async
//
console.log("resp", resp)
let respJson = await resp.json()
console.log("Here json", respJson)
//console.warn(respJson)
this.setState({ data: respJson.movies })
console.log("data is --", this.state.data)
}


render() {
console.log("Inside render")
return (
<View style={{ flex: 1 }}>

<Text style={{ fontSize: 30, color: 'black', margin:50, padding:10, backgroundColor:'skyblue'}}> API CALL</Text>

<SafeAreaView style={styles.container}>



<FlatList


data={this.state.data}

renderItem={({ item }) => <Text style={{ fontSize: 30, backgroundColor:'skyblue', margin:15 }}> {item.id} ..{item.title} </Text>}
/>

</SafeAreaView>

</View>


)
}

}

export default App;

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},

})

[ki]

hi sir, your explanation is very good. but small request please arrange playlist properly for reactnative. so many reactnative videos are there in your channel but they are not in order or in single playlist.

[returnZeroo]

I'm unable to retrieve the local API due to a Network Error in React Native. After doing some research online, I discovered that Android and IOS typically block unencrypted API calls.
In the development stage, how do you guys work with local API?

[Sofien_Steve]

my component has an arrow function not a class method, what do i need to change ?

[kamalcharan]

Sir how to fetch data from php MySQL rest API in React native???plz suggest solution sir.

[sumeetpol]

how fetch from local host and i am useing django rest frame work for jason

[matheusvaladares]

it works, thanks, but my app keep showing a warning ask for a key in the API

[rajkamaldas]

How to get the text input value and display the user information from api ?

[ak_spotlight]

for localhost APi: you have to using hosted API through hosting or IIS

[mr.faujii]

How to fetch from local host in react native

[Lifestylegrow]

can u give react native code for api calls