react native ListView with scrollable content in both vertical AND horizontal doesn't seem to work anymore with react-native 0.28 (react 15.1.0)

react native ListView with scrollable content in both vertical AND horizontal doesn’t seem to work anymore with react-native 0.28 (react 15.1.0)

Since the react-native last release 0.27 > 0.28 (and React 15.0.2 > 15.1.0) a ListView that contain a scrollable content in both vertical and horizontal can now only be scrolled in only one direction:

• if the listView is defined with a flexDirection = “row”, the listView can be scrolled horizontally but rebound back to a fix height position preventing to see what the listView contain down vertically.
• if the listView is defined with a flexDirection = “column”, the listView can be scrolled vertically but rebound back to a fix width position preventing to see what the listView contain horizontally further left. sample:

export default React.createClass({
 ...

 render():View {
  return(
    <ListView
      decelerationRate                  = "fast"
      snapToAlignment                   = "start"
      dataSource                        = {this.state.dataSource}
      style                             = {styles.listView}
      renderRow                         = {this._getColumn}
      initialListSize                   = {100}
      scrollEnabled                     = {true}
      horizontal                        = {true}
      pagingEnabled                     = {false}
      showsHorizontalScrollIndicator    = {false}
      showsVerticalScrollIndicator      = {false}
      removeClippedSubviews             = {true}
      automaticallyAdjustContentInsets  = {true}
      alwaysBounceVertical              = {true}
      alwaysBounceHorizontal            = {true}
      bouncesZoom                       = {false}
      canCancelContentTouches           = {true}
      centerContent                     = {false}
      directionalLockEnabled            = {true}
     />
   );
 },

 ...

 _getColumn(el:Array<Object>, sectionID:string, rowID:string):View {
   return(
     <View
        key    = {"row-`$(sectionID)`:`$(rowID)`"}
        style  = {styles.column}
      >
        ...
      </View>
   );
 },

 ...

});

const styles:StyleSheet = StyleSheet.create({
   listView: {
     position          : "relative",
     flexDirection     : "row", // <---------- 'row' || 'column'
     flexWrap          : "wrap",
     alignSelf         : "stretch",
     top               : 0,
     width             : 380,
     height            : 600,
     backgroundColor   : "transparent",
     overflow          : "hidden",
   },
   column: {
     flex              : 1,
     flexDirection     : "row",
     alignSelf         : "stretch",
     alignItems        : "flex-start",
     justifyContent    : "flex-start",
     backgroundColor   : "red",
     position          : "relative",
     width             : 380/3,
     height            : 1250,
   },


});

Before, with React 15.0.2 and react-native 0.26 it worked as expected: it was possible to navigate horizontally and vertically in the columns that appeared within the listView.

Is there anything wrong in my way of setting the StyleSheet? I’ve tested a lot of combination so some extra (maybe not necessary) StyleSheet arguments are still in used in styles.listView and styles.column…

[faisalil]

+1. My example is a bit simpler. I have a scrollview around an image and I am trying to make it scroll in all directions. Before moving to react-native 0.28, it was working fine. Now, its not working. <ScrollView ref={(scrollView) => { this._scrollView = scrollView; } } directionalLockEnabled={false} horizontal={true} style={{ backgroundColor: '#FFF', flex: 1 }}> <View style={{ marginVertical: 50 }}> <Image source={require('../image.png') }> </Image> </View> </ScrollView>

[7kms]

I’m new to react-native ,meet the same problem,my ScrollView can’t work!

<ScrollView
        contentContainerStyle={{paddingVertical: 20}}
      style={[styles.twitterPostContainer]}
      automaticallyAdjustContentInsets={false}
      refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={()=>this._onRefresh()}
            title="refreshing"
            tintColor="#53cac3"/>}>
            <View style={{position:'absolute',top:0,width:Util.size.width}}>
              <Image
                resizeMode="stretch"
                source={{uri:'day3'}}
                style={{width:Util.size.width, height:Util.size.height}}></Image>
            </View>
      </ScrollView>

I’m very depressed! Should I resolve it by revert it to 0.27