Scroll-View React-Native Not functioning

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;