Big image inside ScrollView won't let scroll

Question

I'm trying to add an Image (by the image full size) into a ScrollView component, the idea is to let the image be on it's own size (without limiting it) but instead to let scroll horizontal and vertical (depend on the Image). so I'm using Image.getSize() for it inside a ScrollView, here is my component,

import React, { Component } from 'react';
import { Image, ScrollView } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 10,
      height: 10,
      image: 'http://www.francedimanche.fr/parole/wp-content/uploads/2017/08/Angelina-Jolie.png',
    }
  }

  componentDidMount() {
    Image.getSize(this.state.image, (width, height) => {
      this.setState({ width, height });
    });
  }

  render() {
    return (
      <ScrollView>
        <Image
          style={{ width: this.state.width, height: this.state.height }}
          source={{uri: this.state.image}}
        />
      </ScrollView>
    );
  }
}

thanks!

score 1 · Accepted Answer · answered Oct 18 '17 at 15:28

You can go horizontal or vertical in a ScrollView. To get both you can just nest them:

  <ScrollView horizontal={true}>
    <ScrollView>
      <Image
        style={{ width: this.state.width, height: this.state.height }}
        source={{uri: this.state.image}}
      />
    </ScrollView>
  </ScrollView>

Big image inside ScrollView won't let scroll

1 Answers1