Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

How to make React Native's ScrollView initial zoom to not be 1?

$
0
0

I want to put content (multiple images vertically arranged) in a React Native ScrollView (iOS only for now, Android will come later) that is bigger than the phone's screen, and start zoomed out so that it is all visible at the same time.

Are there any good examples of using ScrollView.scrollResponderZoomTo in a componentDidMount call that zooms out to fit content in the screen, something like

<ScrollView
  style={{width: 500, height: 1000}}
  // + whatever other properties make this work required way
>
  <View style={{width: 2000, height: 5000}}>
    <Image style={{width: 2000, height: 2000}} source={.....}/>
    <Image style={{width: 2000, height: 3000}} source={.....}/>
  </View>
</ScrollView>

I tried setting the 'zoomScale' property, but that seems to be ignored and always uses the value 1.

According to this issue (https://github.com/facebook/react-native/issues/2176) there is a scrollResponderZoomTo function that can be used, but when I try to use it, it seems that no matter what values I give it it zooms out much too far and off center.

The F8 sample app has a ZoomableImage module (https://github.com/fbsamples/f8app/blob/b5df451259897d1838933f01ad4596784325c2ad/js/tabs/maps/ZoomableImage.js) which uses the Image.resizeMode.contain style to make an image fit the screen, but that loses the quality of image, so when you zoom in it gets blurry.


Viewing all articles
Browse latest Browse all 16750

Trending Articles