React Native ScrollView is not working in iOS

Question

I am working through a tutorial on React-Native. When I tried to instantiate a ScrollView inside of my app it doesn't work. There are no errors, no red screen, it simply won't scroll past the second of five elements.

Here is the code for my index.ios.js

//imports a library
import React from 'react';
import { AppRegistry, View } from 'react-native';

import Header from './src/Components/Header';
import AlbumList from './src/Components/AlbumList';
// import AlbumDetail from './src/Components/AlbumDetail';


//create Component
const App = () => {
    return (
    <View style={{ flex: 1 }}>
      <Header headerText={'Albums'} />
      <AlbumList />
    </View>
  );
};

//renders component
AppRegistry.registerComponent('albums', () => App);

Here is the code for the component AlbumList

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
//axios was npm installed it is a tool for HTPPRequests
import axios from 'axios';
//importing component to use inside of class component
import AlbumDetail from './AlbumDetail';

//This makes a class component which can handle data
class AlbumList extends Component {
  //sets state to an object with a key value pair
  state = { albums: [] };
  //when the page loads the HTTPrequest is done asynch
  componentWillMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
      .then(response => this.setState({ albums: response.data }));
  }
  //this grabs the info coming in from the HTTPRequest and puts it into a component
  renderAlbums() {
    return this.state.albums.map(album =>
      //album= is setting the prop for the component, it is not necessary to name it album
      <AlbumDetail key={album.title} album={album} />);
  }
  //renders the class component
  render() {
    return (
        <ScrollView>
          { this.renderAlbums() }
        </ScrollView>
      );
    }
  }

And finally, here is the code for the AlbumDetail component.

import React from 'react';
import { Text, View, Image } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';

//We setup the prop being passed into this compnent in the AlbumList component
//{this will grab our prop "album" and then accesses the title key's value}

const AlbumDetail = ({ album }) => {
  const { title, artist, thumbnail_image, image } = album;
  return (
    <Card>
      <CardSection>
        <View style={styles.thumbnailContainterStyle}>
          <Image
          style={styles.thumbnailStyle}
          source={{ uri: thumbnail_image }}
          />
        </View>
        <View style={styles.headerContentStyles}>
          <Text style={styles.headerTextStyle}>{title}</Text>
          <Text>{artist}</Text>
        </View>
      </CardSection>
      <CardSection>
        <Image
        style={styles.imageStyle}
        source={{ uri: image }}
        />
      </CardSection>
    </Card>
  );
};

const styles = {
  headerContentStyles: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  headerTextStyle: {
    fontSize: 18
  },

  thumbnailStyle: {
    height: 50,
    width: 50
  },
  thumbnailContainterStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 300,
    flex: 1,
    width: null
  }
};

export default AlbumDetail;

Any help would be greatly appreciated.

Raphael Pinel · Accepted Answer · 2019-06-21 07:00:36Z

9

If you are using a trackpad and are trying to scroll with two fingers, try to scroll by pressing one finger and dragging with another finger.

answered Jun 21, 2019 at 7:00

Raphael Pinel

2,8712 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bdart · Accepted Answer · 2017-01-04 10:04:16Z

6

If anyone is falling over this. Make sure that the ScrollView Container does have a height as mentioned by @SomethingOn . Furthermore I resolved it for ios by using TouchableWithoutFeedback wrapped around each item. Just give each one a key and leave onPress empty.

This was it for me at the end:

setScrollHeight = (width, height) => this.setState({scrollHeight: height});

<View>
  <ScrollView
    onContentSizeChange={this.setScrollHeight}
    style={{height: this.state.scrollHeight}}
  >
    <TouchableWithoutFeedback>
      // do your fancy stuff here
    </TouchableWithoutFeedback>
  </ScrollView>
</View>

answered Jan 4, 2017 at 10:04

bdart

7557 silver badges18 bronze badges

1 Comment

epegzz Over a year ago

Wrapping children with TouchableWithoutFeedback did the trick for me, thank you! :)

SomethingOn · Accepted Answer · 2016-10-04 19:27:50Z

1

I'm running into a similar problem and it seems related to the ScrollView not knowing the height of it's Children. Try setting a height on the component in the AlbumDetail's render method. The documentation for the ScrollView component makes reference to this, but it's a little confusing...especially the part about flex :1.

http://facebook.github.io/react-native/releases/0.33/docs/scrollview.html

My problem is that I'm dynamically loading ScrollView children and therefore I don't know how to tell the scroll view that it has X children and therefore it's height is Y.

edited Oct 4, 2016 at 19:27

answered Oct 4, 2016 at 15:51

SomethingOn

11.1k18 gold badges72 silver badges108 bronze badges

Collectives™ on Stack Overflow

React Native ScrollView is not working in iOS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related