Scroll-View React-Native Not functioning - reactjs

Question

Parent Component
const App = () => (
<View style={{ flex: 1 }}>
<Header headerText={'Albums'} />
<AlbumList />
</View>
);
Scroll View
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail';
class AlbumList extends Component {
state={ albums: [] };
componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ albums: response.data }));
}
renderAlbums() {
return this.state.albums.map(album =>
<AlbumDetail key={album.title} album={album} />);
}
render() {
console.log(this.state);
return (
<ScrollView >
{this.renderAlbums()}
</ScrollView>
);
}
}
export default AlbumList;
I am trying to make a ScrollView work. These are the snippet. But still when I run the simulator the scroll view is not working and not giving the full lists of the items.

Answer 1

Try this, basically change the render method return
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail';
class AlbumList extends Component {
this.state={ albums: [] };
componentDidMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ albums: response.data }));
}
renderAlbums() {
return this.state.albums.map(album =>
<AlbumDetail key={album.title} album={album} />);
}
render() {
console.log(this.state);
return (
<div>
<ScrollView></ScrollView>
{this.renderAlbums()}
</div>
);
}
}
export default AlbumList;