CODEWITHSUNDEEP
iosreact-nativescrollview
maxsands1503
maxsands1503

Reputation: 177

React Native ScrollView is not working in iOS

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.

Upvotes: 5

Views: 9454

Answers (3)

Raphael Pinel
Raphael Pinel

Reputation: 2780

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.

Upvotes: 9

bdart
bdart

Reputation: 755

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>

Upvotes: 6

SomethingOn
SomethingOn

Reputation: 10881

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.

Upvotes: 1

Related Questions