CODEWITHSUNDEEP
react-nativereact-native-scrollview
greW
greW

Reputation: 1338

Big image inside ScrollView won't let scroll

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!

Upvotes: 1

Views: 3504

Answers (1)

Doug Friedman
Doug Friedman

Reputation: 46

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>

Upvotes: 1

Related Questions