CODEWITHSUNDEEP
react-native
Henrique da Mata
Henrique da Mata

Reputation: 61

Scroll View not scrolling in react native

Scroll view not scrolling

Example that I'm trying on Expo:

      <View style={{flex: 1}}>
        <ScrollView
          contentContainerStyle={{ flexGrow: 1 }}>
          <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
          </View>
        </ScrollView>
      </View>

Upvotes: 2

Views: 5626

Answers (3)

Dhananjay C
Dhananjay C

Reputation: 597

The problem is that in Android other touchable steals user’s touch event that's why you can not scroll the ScrollView but many times it works as expected on IOS platform. I guess you just need to add onStartShouldSetResponder={() => true} to the View which wraps the intended ScrollView. Can you please try below code:

   <View onStartShouldSetResponder={() => true}>
      <ScrollView>
        <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
          <Item />
          <Item />
          <Item />
          <Item />
          <Item />
          <Item />
        </View>

      </ScrollView>
   </View>

I hope this helps!

Upvotes: 3

Jebin Benny
Jebin Benny

Reputation: 951

Can you try this?

      <View style={{flex: 1}}>
        <ScrollView
          style={{ flex: 1 }}>
          <View style={{flexDirection: 'row', flexWrap: 'wrap' }}>
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
          </View>
        </ScrollView>
      </View>

If the content total height is greater than the scroll view, then only the scroll view will scroll.

Upvotes: 0

Matheus Mello
Matheus Mello

Reputation: 320

Maybe you can add flex: 1 on ScrollView

If doesnt work you can try make something like this:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

Upvotes: 1

Related Questions