CODEWITHSUNDEEP
iosreact-native
Aaron
Aaron

Reputation: 525

React Native ScrollView scrolling both directions

I'm trying to get a React Native ScrollView to scroll horizontally and vertically, but for some reason it won't do it. I know it doesn't work on Android, but it is supposed to work on iOS.

I've looked at this issue: https://github.com/facebook/react-native/issues/2962

And did what it suggested, but it still only scrolls one direction.

This is how I have it declared:

<ScrollView directionalLockEnabled={false} horizontal={true} style={styles.container}>
    {this.buildContent()}
</ScrollView>

Any ideas on how to get this to scroll both directions?

Upvotes: 7

Views: 9424

Answers (3)

Aobo Cheng
Aobo Cheng

Reputation: 4528

try this:

    <ScrollView
      maximumZoomScale={2}
      minimumZoomScale={1}
      style={{ width: 320 }}
      contentContainerStyle={{ width: 321 }}
    >
      <View style={{ width: 321, height: 320, backgroundColor: "green" }} />
    </ScrollView>

contentContainerStyle Doc here,the property supported officially from [email protected]

Upvotes: 6

Irrevocable
Irrevocable

Reputation: 39

This is working for me.

<ScrollView
    horizontal
    bounces={false}
>
    <ScrollView
        nestedScrollEnabled
        bounces={false}
        // You will need to figure out the height of inner content yourself
        contentContainerStyle={{ height: calculateHeight() }}
    >
        <View>
        ...
        </View>
    </ScrollView>
</ScrollView>

Upvotes: -1

jankoritak
jankoritak

Reputation: 595

There is currently not a direct way to achieve this. If setting contentContainerStyle prop is not a problem for you, you can go that way. If it is, you can always use 2 nested ScrollViews.

<ScrollView>
   <ScrollView horizontal={true}> 
      {this.buildContent()}
   </ScrollView>
</ScrollView>

Upvotes: 9

Related Questions