How to list incoming data in React Native - reactjs

Question

I want to list the data from the service I use as it is in the example. Can you help me?
My code:
import React, { Component } from "react";
export default class CustomersTab extends Component {
constructor(props) {
super(props);
this.state = {
token: "",
isLoading: true,
dataSource: null
};
}
componentWillMount() {
tokenner()
.then(responseJson => {
const token = "Bearer " + responseJson.result.token;
this.setState({ token });
fetch(
"apiurl",
{
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: token
}
}
)
.then(response => response.json())
.then(responseData => {
this.setState({
isLoading: false,
dataSource: responseData.result
});
});
})
.catch(error => console.warn(error));
}};
render() {
return (
<View>
<Text>
I WANT LİST DATA HERE
</Text>
</View> )}}
I tried to do it myself, but I could not build the loop structure. Only one data is displayed every time. What should I do?

Answer 1

you have to do something like this. Change id to what you want to display.
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={data => <Text>{data.id}</Text>}
/>
</View>
);

Answer 2

Please Import the View and Text from react native.
import {
Text,
View,
} from 'react-native';
constructor(props: Object) {
super(props);
this.state = {
dataSource: []
}
};
/* dataSource = [
{ "id": "1", "title": "Star Wars", "releaseYear": "1977" },
{ "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
{ "id": "3", "title": "The Matrix", "releaseYear": "1999" },
{ "id": "4", "title": "Inception", "releaseYear": "2010" },
{ "id": "5", "title": "Interstellar", "releaseYear": "2014" }
]
*/
renderMovieList(){
return this.state.dataSource.map((movie, index) =>
<View
key={movie.id}
style={{ height:50 padding:10}}>
<Text> movie.title</Text>
<Text> movie.releaseYear</Text>
</View>
)
}
render() {
return (
<View style={{flex: 1, justifyContent:'center'}}>
{this.state.dataSource.length ? this.renderMovieList(): null}
</View>
);
}