I am unable to scroll even if i am using a scrollview (react-native)

Question

Unable to scroll using react native scroll view does not help. I wanted to make a responsive grid and make it scrollable but as soon as the boxes take up all screen space it does not scroll anymore. I don't know what's going wrong or if the flexbox does not work with scroll view. Thanks in advance

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ScrollView, SafeAreaView } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

export default function CategoriesScreen() {
  return (
    <ScrollView contentContainerStyle={styles.contentContainerStyle}>
      <View style={styles.section}>
        <Text>Hello1</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello1</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello1</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  contentContainerStyle: {
    flex: 1,
    flexDirection: 'column',
    flexWrap: 'wrap',
  },
  section: {
    width: '33.33%',
    height: '33.33%',
    backgroundColor: 'green',
  },
});

Try `flexGrow: 1` in contentContainerStyle instead of `flex: 1` — Armin Dervić, Dec 01 '21 at 11:50

score 0 · Answer 1 · answered Dec 01 '21 at 13:27

The issue is with your contentContainerStyle, this link should help you understand why. By doing flex: 1 in your contentContainerStyle, you're limiting the space of your scrollview to the screen size, meaning there is nothing to scroll.

Here's a working example based on the code you shared:

return (
    <ScrollView style={styles.contentContainerStyle} contentContainerStyle={{flexDirection:'row', flexWrap:'wrap', width:'100%', height:undefined}}>
      <View style={styles.section}>
        <Text>Hello1</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello1</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello1</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello4</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
      <View style={styles.section}>
        <Text>Hello10</Text>
      </View>
    </ScrollView>
  );

contentContainerStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  section: {
    // flex:1,
    width: 100,
    height: 500,
    backgroundColor: 'green',
  },

score 0 · Answer 2 · answered Dec 03 '21 at 12:05

I wrapped everything inside scroll view into a view and it worked

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text, ScrollView, Pressable } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const CategoriesScreen = ({ navigation }) => {
  async function fetchRequestedDoctors(specialist) {
    navigation.navigate('FilteredDoctorsScreen', {
      specialist,
    });
  }

  return (
    <ScrollView>
      <View style={styles.container}>
        <Text style={styles.heading}>Select your problem</Text>
        <Pressable
          style={styles.item}
          onPress={() => fetchRequestedDoctors('bone')}
        >
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>

        <Pressable style={styles.item}>
          <MaterialCommunityIcons name='bone' size={24} color='black' />
          <Text style={styles.title}>Bone</Text>
        </Pressable>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item: {
    width: 115,
    height: 140,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderColor: 'grey',
    borderWidth: 1,
    overflow: 'hidden',
    shadowColor: 'green',
    shadowRadius: 10,
    shadowOpacity: 1,
  },
  title: {
    fontSize: 20,
  },
  heading: {
    width: '100%',
    alignSelf: 'center',
    fontSize: 50,
    textAlign: 'center',
  },
});

export default CategoriesScreen;

I am unable to scroll even if i am using a scrollview (react-native)

2 Answers2