search

chrisfisher / react-native-directed-scrollview

UNMAINTAINED- see below. A natively implemented scrollview component which lets you specify different scroll directions for child content.
MIT License
149 stars 67 forks source link

Differing view sizes on orientation change #11

Open dpyeates opened 7 years ago

dpyeates commented 7 years ago

I'm using your directed scroll view in my app and I have a different layout on portrait than I have on landscape.

Portrait is a 2x3 grid of views (1024x1536px) and landscape is a 3x2 grid of views (1536x1024px)

I am configuring the directed scrollview like this:

<ScrollView
  bounces={true}
  bouncesZoom={true}
  maximumZoomScale={2.0}
  minimumZoomScale={this.state.fitScale}
   showsHorizontalScrollIndicator={true}
   showsVerticalScrollIndicator={true}
   style={styles.container}
   contentContainerStyle={[{
     width: this.state.containerWidth,
     height: this.state.containerHeight,
   }]}>
     <ScrollViewChild scrollDirection={'both'}>
       {this.state.isPortrait ? this._renderPortrait() : this._renderLandscape()}
     </ScrollViewChild>
</ScrollView>

Where this.state.containerWidth and ...Height are dynamically changed depending on orientation.

I am finding that the transition doesn't seem to work very well - the scrollview gets offset and its not possible to pan or zoom to get it back into view.